Sortieren, Filtern und Blättern in einem Modal

Question

Ich versuche, dieses Tutorial here zu folgen, aber versuche, es in einem Modal auszuführen. Ich rufe im Grunde die Indexansicht innerhalb meines Modals auf (nicht sicher, ob das Best Practice ist oder nicht). Jedes Mal, wenn ich auf einen Header klicke, um zu sortieren oder irgendetwas anderes, verschwindet das Modal und die Seite wird zur Indexansicht umgeleitet. Ist das möglich mit der Art und Weise, wie ich das tue und wenn nicht, vielleicht kann jemand eine alternative Lösung vorschlagen, ich bin irgendwie neu in all dem!

Hier ist der Teil, der eine Schaltfläche enthält, die das Modal aufruft.

@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> 

Hier ist meine Indexansicht

@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> 

Und der Teil meiner Controller, der verwendet wird,

wird

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()); 
     } 
     ... 
    } 

Wenn es etwas anderes, das Sie vielleicht denken Sie nützlich sein könnten, Fragen sind willkommen! Danke im Voraus!

Answer 1

Das passiert, weil Ihre Header tatsächlich Aktionslinks sind, die zur Methode Index() umleiten, die wiederum die Index Ansicht zurückgibt.

@ Html.ActionLink ("Member ID", "Index", neue {sortOrder = ViewBag.DateSortParm})

Statt in einem modalen in der Teilansicht der Index Ansicht ist, Du solltest es anders herum machen. Und wenn Sie die Header-Links erstellen, verknüpfen Sie sie nicht mit serverseitigen Aktionsmethoden, wenn Sie nur eine clientseitige Sortierung wünschen. Implementieren Sie stattdessen die Client-seitige Sortierung mithilfe von JavaScript. Sie möchten keine Server-Reise, nur um einige Elemente auf der Client-Seite zu sortieren!

Answer 2

Ja nach @ AmateurProgrammer's (danke!) Kommentar Ich ging und beschloss, etwas Javascript zu versuchen, die ich noch nie zuvor getan hatte. Nach einigen Nachforschungen habe ich das JQuery-Plugin für Datenquellen verwendet. Ich fand dieses Tutorial here und änderte es entsprechend. Ich poste meinen Code für jeden, der sich in einer ähnlichen Situation befindet. Hier

ist die Controller-Methode, wo ich die Daten bekommen

 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); 
     } 

Hier ist, wo ich beim Aufbau der Tabelle innerhalb des HTML (ja ich dieses Skript hinzugefügt, die den Tisch selbst gebaut - keine Notwendigkeit für Markup für die Tabelle selbst)

   <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>