引导模式中的分页

Question

使用 Entity Framework v6.2.0、Bootstrap v3.3.7 和 dncuug's X.PagedList v7.2.4 的 C# MVC 5 项目

我正在尝试创建一个显示几个文本框和呼叫者分页表的模式。
我想在更改页面时更新表格。

我的视图，Contact.cshtml，包含用于启动注入的 Modal shell 和 JavaScript：

<div class="row">
    <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <button class="btn btn-info btn-block" data-toggle="modal" id="load-partial" type="button">Search for or add a Caller</button>
    </div>
</div>
<div class="modal fade" id="dynamic-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document"></div> @* You need this here for events like shown.bs.modal to fire *@ 
</div>

@section scripts
{
    @Scripts.Render("~/bundles/jqueryval")

    <script>
        $("#load-partial").on('click', function() {
            //setup modal
            $('#dynamic-modal').modal({
                keyboard: true
            }).load('/Home/GetCallerSearch', { callDetailId: '@Model.Id' }).show();
        });
    </script>
}

我的HomeController 是准备将 ViewModel 和 ViewBag 注入到 Modal 中的：

public ActionResult GetCallerSearch(string callDetailId, int? page)
{
    using (var unitOfWork = new UnitOfWork(ApplicationDbContext))
    {
        var callerSearchViewModel = new CallerSearchViewModel { CallDetail_Id = Guid.Parse(callDetailId) };

        // Ran into problems Mapping the Models to ViewModels here, so going with Models for right now
        IQueryable<Caller> callers = unitOfWork.CallerRepo.GetAllFullCallers().AsQueryable();
        int pageNumber = page ?? 1; // If null, default to the first page
        int maxNumberOfCallersPerPage = 10;
        IPagedList<Caller> onePageOfCallers = callers.ToPagedList(pageNumber, maxNumberOfCallersPerPage);

        ViewBag.OnePageOfCallers = onePageOfCallers;

        return PartialView("CallerSearch", callerSearchViewModel);
    }
}

最后是 PartialView，CallerSearch.cshtml，它包含 Modal 的内部结构，包括我要更新的表格和几个文本框。

@using Project_Name.ViewModels
@using X.PagedList.Mvc; @* Import this so we get our HTML Helper *@
@using X.PagedList;     @* Import this so we can cast our list to IPagedList (only necessary because ViewBag is dynamic) *@
@model CallerSearchViewModel


@* This is to be injected into a bootstrap modal which is why there is no <div class="modal" ...></div> *@
@* Without modal-dialog, the modal will be as wide as the screen. Replaces the modal-dialog div at destination. *@
<div id="callerSearchModal" class="modal-dialog modal-lg" role="document">
    <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" id="callerSearchLabel">Caller Search</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control" })
                </div>
                <div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    @Html.TextBoxFor(m => m.LastName, new { @class = "form-control" })
                </div>
            </div>
            <div class="row">
                <table class="table table-hover table-bordered table-responsive">
                    <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>ADD</th>
                    </tr>
                    </thead>
                    @foreach (var caller in ViewBag.OnePageOfCallers)
                    {
                        <tbody>
                        <tr>
                            <td>@caller.FirstName</td>
                            <td>@caller.LastName</td>
                            <td><button id="@caller.Id" class="btn btn-xs btn-block btn-primary glyphicon-plus" type="button" onclick="addCallerPartialView('#newCaller', this.id, '@Model.CallDetail_Id')"></button></td>
                        </tr>
                        </tbody>
                    }
                </table>
            </div>
            @Html.PagedListPager(
                (IPagedList) ViewBag.OnePageOfCallers,
                page => Url.Action("GetCallerSearch", "Home", new { callDetailId = Model.CallDetail_Id, page }),
                PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions(){ HttpMethod = "GET", UpdateTargetId = "callerSearchModal" }))
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Add</button>
        </div>
    </div>
</div>

在底部，您可以看到正在处理分页的@Html.PagedListPager(...)。我认为PageListRenderOptions... 会有所帮助，但似乎没有任何影响。

我遇到的问题是，当我点击任何页面按钮而不是更新我的 Modal 时，我会被重定向到我的 PartialView，.../Home/GetCallerSearch?callDetailId={someGuid}&page={pageNumber}。

有什么想法或建议吗？

Answer 1

最明显的解决办法，我忘记在我的Contact.cshtml中安装和引用<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

现在可以正常使用了。

将此作为社区 Wiki。也许其他人会发现代码很有用。