모달 정렬, 필터링 및 페이징

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

예 @ AmateurProgrammer (감사합니다!) 주석 다음에 나는 가서 한 번도 해보지 않은 자바 스크립트를 시도하기로 결정했습니다. 그래서 약간의 연구 후에 나는 datatables 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>