2015-12-16 53 views
0

自學MVC,所以我想完成的第一個項目是一個使用引導程序模式窗體一個簡單的CRUD應用程序。使用PagedList.MVC自舉模式的局部模板問題

我試圖讓我的要求這個學習項目作爲實戰儘可能......因此

  • 搜索與分頁(理想情況下自動完成,如在無需提交按鈕)
  • 保持當前搜索參數
  • CRUD模式表單或
  • 通過AJAX潛在裝?

我已經基本融合以下項目的2成工作中的應用。

我有幾個問題與應用程序...首先,我HttpPostActionResult,如果我回到PartialView( 「_ DetailPaged」),該_DetailPage部分告訴我,模型爲null。因爲_detailPage正在尋找PagedList.IPagedList的典範,我theorectially必須從索引操作重新運行該代碼。

因此,我試着返回RedirectToAction(「索引」),它工作,只要模型能夠正確加載,但是,因爲我正在重新加載我的視圖,某些UI的部分會重複。

理想情況下,我想能夠加載通過AJAX搜索,並只更新部分細節。
我想允許用戶搜索該表,而不使用提交按鈕,因此上述要求,最後,我希望能夠與搜索參數返回查詢,即使是編輯後或添加。

作爲獎勵,我要清理的搜索查詢僅返回數據的一個子集,即這10條記錄,與中小企業樣書籤至於如何查詢一個或下一個10

任何建議將不勝感激。

我查看

<div id="main-div"> 
<div class="clearfix">&nbsp;</div> 
<div class="clearfix">&nbsp;</div> 
<div class="container"> 

    <a href="@Url.Action("Add", "MVCPager2")" id="Add" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i>&nbsp;Create New</a> 
    <div id="div-record"> 
     @Html.Partial("_DetailPaged", Model)  
    </div> 
</div> 

<div class="modal fade" id="Add-Model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title">New Student</h4> 
      </div> 
      <div class="divForAdd"> 
      </div> 
     </div> 
    </div> 
</div> 

<div class="modal fade" id="Edit-Model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title">Update Student</h4> 
      </div> 
      <div class="divForUpdate"> 
      </div> 
     </div> 
    </div> 
</div> 

管窺

@model PagedList.IPagedList<Employee> 
@using PagedList.Mvc; 

@using (Html.BeginForm("Index", "MVCPager", FormMethod.Get)) 

     { 
      <p> 
       Find by name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string) 

       <input type="submit" value="Search" /> 
      </p> 
     } 
<div class="table-responsive"> 
<table class="table table-bordered table-striped"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Age</th> 
      <th>Edit</th> 
      <th>Delete</th> 
     </tr> 
    </thead> 
    <tbody> 
     @foreach (var item in Model) 
     { 
      <tr> 
       <td> 
        @Html.DisplayFor(modelItem => item.FirstName) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.LastName) 
       </td> 
       <td> 
        <a href="@Url.Action("Edit", "Home", new { ID = item.EmployeeID })" class="editDialog"><i class="fa fa-pencil-square-o"></i>&nbsp;Edit</a> 
       </td> 
       <td> 
        @Ajax.ActionLink("Delete", "Delete", "Home", new { @ID = item.EmployeeID }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "div-record" }, new { @class = "fa fa-trash-o" }) 
       </td> 
      </tr> 
     } 
    </tbody> 
</table> 
<br /> 
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount 

@Html.PagedListPager(Model, page => Url.Action("Index", 
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })) 

</div> 

<script> 
$(document).ready(function() { 
    $('#Add').click(function (event) { 
     event.preventDefault(); 
     $.get(this.href, function (response) { 
      $('.divForAdd').html(response); 
     }); 
     $('#Add-Model').modal({ 
      backdrop: 'static', 
     }, 'show'); 
    }); 
    $('.editDialog').click(function (event) { 
     event.preventDefault(); 
     $.get(this.href, function (response) { 
      $('.divForUpdate').html(response); 
     }); 
     $('#Edit-Model').modal({ 
      backdrop: 'static', 
     }, 'show'); 
    }); 
}); 
</script> 

我的控制器

public ActionResult Index(string sortOrder, string currentFilter, string searchString, int? page) 
    { 
     ViewBag.CurrentSort = sortOrder; 
     ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "name_desc" : ""; 
     ViewBag.DateSortParm = sortOrder == "Date" ? "date_desc" : "Date"; 

     if (searchString != null) 
     { 
      page = 1; 
     } 
     else 
     { 
      searchString = currentFilter; 
     } 

     ViewBag.CurrentFilter = searchString; 

     IEnumerable<Employee> Employees; 
     using (NorthwindEntities ctx = new NorthwindEntities()) 
     { 
      Employees = ctx.Employees.ToList(); 
     } 

     if (!String.IsNullOrEmpty(searchString)) 
     { 
      Employees = Employees.Where(s => s.LastName.Contains(searchString) 
            || s.FirstName.Contains(searchString)); 
     } 

     int pageSize = 10; 
     int pageNumber = (page ?? 1);    
     return View(Employees.ToPagedList(pageNumber, pageSize)); 
    } 

    public ActionResult Add() 
    { 
     return PartialView("_AddPaged"); 
    } 

    [HttpPost] 
    public ActionResult Add(Employee model) 
    { 
     List<Employee> Employees = new List<Employee>(); 
     if (ModelState.IsValid) 
     { 
      using (NorthwindEntities ctx = new NorthwindEntities()) 
      { 
       Employee _employee = new Employee 
       { 
        FirstName = model.FirstName, 
        LastName = model.LastName 
       }; 
       ctx.Employees.Add(_employee); 

       try 
       { 
        ctx.SaveChanges(); 
       } 
       catch (DbEntityValidationException ex) 
       { 
        // Retrieve the error messages as a list of strings. 
        var errorMessages = ex.EntityValidationErrors 
          .SelectMany(x => x.ValidationErrors) 
          .Select(x => x.ErrorMessage); 

        // Join the list to a single string. 
        var fullErrorMessage = string.Join("; ", errorMessages); 

        // Combine the original exception message with the new one. 
        var exceptionMessage = string.Concat(ex.Message, " The validation errors are: ", fullErrorMessage); 

        // Throw a new DbEntityValidationException with the improved exception message. 
        throw new DbEntityValidationException(exceptionMessage, ex.EntityValidationErrors); 
       } 
       Employees = ctx.Employees.ToList(); 
      } 
     } 
     return RedirectToAction("Index"); 
     //return PartialView("_DetailPaged"); 
    } 

回答

0

使用這個JavaScript您的機型彈出完成。

做一個App.js在腳本 和複製下面的代碼出現。

MyApp的。js

$(document).ready(function() { 
    $('#add').click(function (event) { 
     event.preventDefault(); 
     $.get(this.href, function (response) { 
      $('.divForAdd').html(response); 
     }); 
     $('#Add-Model').modal({ 
      backdrop: 'static', 
     }, 'show'); 
    }); 


    $('.openDialog-Edit').click(function (event) { 
     event.preventDefault(); 
     $.get(this.href, function (response) { 
      $('.divForCreate').html(response); 
     }); 

     $('#Edit-Model').modal({ 
      backdrop: 'static', 
     }, 'show'); 

    }); 

    $('.openDialog-Delete').click(function (event) { 
     event.preventDefault(); 
     $.get(this.href, function (response) { 
      $('.divForDelete').html(response); 
     }); 

     $('#Delete-Model').modal({ 
      backdrop: 'static', 
     }, 'show'); 

    }); 
});