排序，筛选和分页模式内

Question

我试图按照本教程here，但试图在一个模式内执行它。我基本上调用我的模态内的索引视图（不知道这是否是最佳做法）但是，每次我点击一个头排序或其他任何模式消失，页面重定向到索引视图。这是可能的方式，我正在去做这件事，如果没有，也许有人可以建议一种替代解决方案，我对这些都是新鲜的！

这里是包含调用模态的按钮的部分。

@model IEnumerable<ReconciliationApp.Models.IReconciliationForm> 

<div class="img-responsive center-block" id="formButtons"> 
    <div> 
     <div class="btn-group row col-sm-12"> 
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".browse-modal-lg">Browse</button> 
     </div> 

     <div class="btn-group row col-sm-12"> 
      <button type="button" class="btn btn-primary">Modify</button> 
      <button type="button" class="btn btn-primary">Delete</button> 
      <button type="button" class="btn btn-primary">New</button> 
     </div> 
    </div> 
</div> 

<div class="modal fade browse-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
     <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">Browse Members</h4> 
      </div> 
      <div class="container-fluid" style="padding-left: 50px;"> 
       @Html.EditorForModel("Index") 
      </div> 
     </div> 
    </div> 
</div> 

这里是我的索引视图

@model IEnumerable<ReconciliationApp.Models.CSReconForm> 

@{ 
    ViewBag.Title = "Modal"; 
} 

<h2>CSRecon Browse</h2> 

<p> 
    @Html.ActionLink("Create New", "Create") 
</p> 
<table class="table"> 
    <tr> 
     <th> 
      @Html.ActionLink("Member ID", "Index", new { sortOrder = ViewBag.DateSortParm }) 
     </th> 
     <th> 
      @Html.ActionLink("Brand ID", "Index", new { sortOrder = ViewBag.MemberSortParm }) 
     </th> 
     <th> 
      @Html.ActionLink("First Name", "Index", new { sortOrder = ViewBag.BrandSortParm }) 
     </th> 
     <th> 
      @Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.FirstNameSortParm }) 
     </th> 

     <th> 
      @Html.ActionLink("Processed By", "Index", new { sortOrder = ViewBag.LastNameSortParm }) 
     </th> 
     <th></th> 
    </tr> 

    @foreach (var item in Model) 
    { 
     <tr> 
      <td> 
       @Html.DisplayFor(modelItem => item.MemberID) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.BrandID) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.FirstName) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.LastName) 
      </td> 

      <td> 
       @Html.DisplayFor(modelItem => item.ProcessedBy) 
      </td> 
      <td> 
       @Html.ActionLink("Edit", "Edit", new { id = item.Id }) | 
       @Html.ActionLink("Details", "Details", new { id = item.Id }) | 
       @Html.ActionLink("Delete", "Delete", new { id = item.Id }) 
      </td> 
     </tr> 
    } 
</table> 

和正在使用

public class CSReconFormsController : ApplicationBaseController 
    { 
     private ReconciliationContext db = new ReconciliationContext(); 
     private ApplicationDbContext adb = new ApplicationDbContext(); 

     // GET: CSReconForms 
     public ActionResult Index(string sortOrder) 
     { 

      var usersContext = new ApplicationDbContext(); 
      var users = usersContext.Users.Select(u => u.UserName).ToList(); 
      ViewBag.Users = users; 
      ViewBag.Title = "Modal"; 

      ViewBag.DateSortParm = String.IsNullOrEmpty(sortOrder) ? "dateCreated_desc" : ""; 
      ViewBag.MemberSortParm = sortOrder == "MemberId" ? "memberId_desc" : "MemberId"; 
      ViewBag.BrandSortParm = sortOrder == "BrandId" ? "brandId_desc" : "BrandId"; 
      ViewBag.FirstNameSortParm = sortOrder == "FirstName" ? "firstName_desc" : "FirstName"; 
      ViewBag.LastNameSortParm = sortOrder == "LastName" ? "lastName_desc" : "LastName"; 

      var reconForms = from s in db.CSReconForms select s; 
      switch (sortOrder) 
      { 
       case "MemberId": 
        reconForms = reconForms.OrderBy(s => s.MemberID); 
        break; 
       case "memberId_desc": 
        reconForms = reconForms.OrderByDescending(s => s.MemberID); 
        break; 
       case "BrandId": 
        reconForms = reconForms.OrderBy(s => s.BrandID); 
        break; 
       case "brandId_desc": 
        reconForms = reconForms.OrderByDescending(s => s.BrandID); 
        break; 
       case "FirstName": 
        reconForms = reconForms.OrderBy(s => s.FirstName); 
        break; 
       case "firstName_desc": 
        reconForms = reconForms.OrderByDescending(s => s.FirstName); 
        break; 
       case "LastName": 
        reconForms = reconForms.OrderBy(s => s.LastName); 
        break; 
       case "lastName_desc": 
        reconForms = reconForms.OrderByDescending(s => s.LastName); 
        break; 
       case "dateCreated_desc": 
        reconForms = reconForms.OrderByDescending(s => s.WhenCreated); 
        break; 
       default: 
        reconForms = reconForms.OrderBy(s => s.WhenCreated); 
        break; 
      } 
      return View(reconForms.ToList()); 
     } 
     ... 
    } 

如果有其他任何你认为你可能可能是有用我的控制器的一部分，随时问问！提前致谢！

Answer 1

发生这种情况是因为您的标题实际上是重定向到Index()方法的操作链接，该方法反过来返回Index视图。

@ Html.ActionLink（ “会员ID”， “索引”，新的{中将sortOrder = ViewBag.DateSortParm}）

代替具有在局部视图模态内的Index视图，你应该反过来做。然后，当您创建标题链接时，如果您只想要客户端排序，请不要将它们链接到服务器端操作方法。而是使用JavaScript实现客户端排序。你不需要服务器之旅来排序已经存在于客户端的一些元素！

Answer 2

是的@ After AmateurProgrammer（谢谢！）评论后，我去了，并决定尝试一些JavaScript，这是我以前从未做过的。所以经过一番研究，我最终使用了数据表JQuery插件来处理。我发现这个教程here，并相应地修改它。我发布我的代码给任何可能处于类似情况的人。

这里是控制器方法从哪里获得的数据

 public JsonResult DataTableGet([ModelBinder(typeof(DataTablesBinder))] IDataTablesRequest requestModel) 
     { 

      IQueryable<CSReconForm> query = db.CSReconForms; 

      var totalCount = query.Count(); 

      // Apply filters 
      if (requestModel.Search.Value != String.Empty) 
      { 
       var value = requestModel.Search.Value.Trim(); 
       query = query.Where(p => p.MemberID.Contains(value) || p.BrandID.Contains(value)); 
      } 

      var filteredCount = query.Count(); 

      // Sort 
      var sortedColumns = requestModel.Columns.GetSortedColumns(); 
      var orderByString = String.Empty; 

      foreach (var column in sortedColumns) 
      { 
       orderByString += orderByString != String.Empty ? "," : ""; 
       orderByString += (column.Data == "MemberID" ? "MemberID" : column.Data) + (column.SortDirection == Column.OrderDirection.Ascendant ? " asc" : " desc"); 
      } 

      query = query.OrderBy(orderByString == String.Empty ? "MemberID asc" : orderByString); 

      // Paging 
      query = query.Skip(requestModel.Start).Take(requestModel.Length); 

      var data = query.Select(p => new 
      { 
       Id = p.Id, 
       MemberID = p.MemberID, 
       BrandID = p.BrandID, 
       FirstName = p.FirstName, 
       LastName = p.LastName, 
       WhenCreated = p.WhenCreated, 
       ProcessedBy = p.ProcessedBy 
      }).ToList(); 
      return Json(new DataTablesResponse(requestModel.Draw, data, filteredCount, totalCount), JsonRequestBehavior.AllowGet); 
     } 

这里就是我建立HTML中的表（是的，我加入这个脚本，它内置表本身 - 无需标记中表本身）

   <script type="text/javascript"> 
        $(function() { 

         var controller = "@ViewData["controller"]"; 
         var productListVM = { 
          dt: null, 

          init: function (oObj) { 
           dt = $('#data-table').DataTable({ 
            "serverSide": true, 
            "processing": true, 
            "ajax": "/" + controller + "/DataTableGet", 
            "columns": [ 
             { "title": "MemberID", "data": "MemberID", "searchable": false }, 
             { "title": "BrandID", "data": "BrandID" }, 
             { "title": "FirstName", "data": "FirstName" }, 
             { "title": "LastName", "data": "LastName" }, 
             { "title": "WhenCreated", "data": "WhenCreated" }, 
             { "title": "ProcessedBy", "data": "ProcessedBy" }, 

             { 
              data: null, 
              className: "center", 
              //re: `<a href="/${controller}/Edit/${}" class="editor_edit">Edit</a>/<a href="/${controller}/Delete/" class="editor_remove">Delete</a>`, 
              "render": function (data, type, full, meta) { 


               return '<a href="/' + controller + '/Edit/' + data.Id + '" class="editor_edit">Edit</a>/<a href="/' + controller + '/Delete/' + data.Id + '">Delete</a>'; 
              } 
             }, 
            ], 

            "lengthMenu": [[5, 10, 25, 50], [5, 10, 25, 50]], 
           }); 
          }, 

          refresh: function() { 
           dt.ajax.reload(); 
          } 
         } 
         // Edit record 
         $('#example').on('click', 'a.editor_edit', function (e) { 
          e.preventDefault(); 

          editor 
           .title('Edit record') 
           .buttons({ "label": "Update", "fn": function() { editor.submit() } }) 
           .edit($(this).closest('tr')); 
         }); 

         // Delete a record 
         $('#example').on('click', 'a.editor_remove', function (e) { 
          e.preventDefault(); 

          editor 
           .title('Edit record') 
           .message("Are you sure you wish to delete this row?") 
           .buttons({ "label": "Delete", "fn": function() { editor.submit() } }) 
           .remove($(this).closest('tr')); 
         }); 

         $('#refresh-button').on("click", productListVM.refresh); 

         productListVM.init(); 
        }) 
       </script>