Question

使用Entity Framework v6.2.0，Bootstrap v3.3.7和dncuug's X.PagedList v7.2.4

的C＃MVC 5项目

我正在尝试创建一个Modal，它显示一对文本框和一个分页的Callers表我想在更改页面时更新表格。

我的视图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注入模态：

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...会有所帮助，但它似乎没有任何影响。

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

有任何想法或建议吗？

Answer 1

最明显的解决方案，我忘记在<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

中安装和引用Contact.cshtml

现在工作正常。

将此作为社区Wiki。也许其他人可以找到有用的代码。

Bootstrap模态中的分页

1 个答案: