asp.net mvc - 模态内的排序、过滤和分页

Question

我在这里尝试遵循本教程，但尝试在模态中执行它。我基本上在我的模态中调用索引视图(不确定这是否是最佳实践(但是，每次我单击标题进行排序或其他任何内容时，模态都会消失，页面被重定向到索引视图。我的做法是否可能，如果没有，也许有人可以提出替代解决方案，我对这一切有点陌生！

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

@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"， "索引"， new { sortOrder = ViewBag.DateSortParm }(

与其将Index视图放在分部视图中的模式内，不如相反。然后，当您创建标头链接时，如果您只需要客户端排序，请不要将它们链接到服务器端操作方法。而是使用 JavaScript 实现客户端排序。您不希望服务器访问只是为了对客户端上已经存在的一些元素进行排序！

Answer 2

是的，在@AmateurProgrammer(谢谢！(的评论之后，我决定尝试一些我以前从未做过的javascript。因此，经过一些研究，我最终使用数据表JQuery插件来工作。我在这里找到了本教程，并对其进行了相应的修改。我正在为可能处于类似情况的任何人发布我的代码。

这是我获取数据的控制器方法

        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>