如何在 JQuery UI Modal Popup 中的 Partial View 中绑定 WebGrid答案

【问题标题】：How to bind a WebGrid in a PartialView, which is in JQueryUI ModalPopup如何在 JQuery UI Modal Popup 中的 Partial View 中绑定 WebGrid
【发布时间】：2014-02-14 09:19:45
【问题描述】：

我有这个 PartialView，它是从 MVC4 应用程序的布局中加载的。

在主导航菜单中单击按钮时，方法 SearchCustomers 在 ajax 帖子中被调用（如下所示）。一切似乎都奏效了。 Fiddler 显示数据按预期返回，但网格在弹出窗口中不可见。我想知道我做错了什么？

局部视图

@model Invoice.Web.ViewModels.SearchCustomerWindowVM

<h2>Search Results</h2>

<div id="resultsGrid">
    @{
    if (Model.CustomersList != null)
    {        
        var grid = new WebGrid(Model.CustomersList, rowsPerPage: 6, ajaxUpdateContainerId:"searchResults ");

        @grid.GetHtml(
            fillEmptyRows: true,
            alternatingRowStyle: "alternate-row",
            headerStyle: "grid-header",
            footerStyle: "grid-footer",
            mode: WebGridPagerModes.All,
            firstText: "<< First",
            previousText: "< Prev",
            nextText: "Next >",
            lastText: "Last >>",
            columns: new [] {

                grid.Column("Forename", canSort: false),
                grid.Column("Surname"),
                grid.Column("PostCode"),
                grid.Column("", 
                    header: "Actions",
                    format: @<text>
                                 @Html.ActionLink("Edit",   "Edit",   new { id=item.CustomerID} )
                                 |
                                 @Html.ActionLink("Delete", "Delete", new { id=item.CustomerID} )
                             </text>
                    )
            }
            )
    }

}

The Ajax Post - 我想问题就在这里！

<script>

    $( "#searchCustomers" ).dialog({
        autoOpen: false,
        height: 350,
        width: 700,
        modal: true
    });

    $("#searchButton")
        .button()
        .click(function() {
            $("#searchCustomers").dialog("open");
        });

function searchCustomers() {
    var forename = $("#Forename").val();
    var surname = $("#Surname").val();
    var postCode = $("#PostCode").val();
    debugger;

        var request = {
            foreName: forename,
            surName: surname,
            postCode: postCode
        };

        $.ajax({
            type: "POST",
            url: "/Customer/SearchCustomers",
            data: JSON.stringify(request),
            datatype: "JSONP",
            contentType: "application/json; charset=utf-8",
            success: function (returndata) {
               // if (returndata.ok) {
                    //$.post(data.Url, function(partial) { 
                      //  $('#IdOfDivToUpdate').html(partial);

                        $("#searchCustomers").dialog("open");
                    //alert("The File Has Been Downloaded.");

                    $('#resultsGrid').html(returndata);
                //} else {
                //    window.alert('Error Saving Authorisation.');
                //}
            }
        }
        );

    }


</script>

控制器方法：

        public ActionResult SearchCustomers(string postCode, string surName, string foreName)
        {
            var model = new SearchCustomerWindowVM();
            var modelList = new List<SearchCustomerWindowVM>();

            var customersList = _customerRepository.GetAllCustomers().ToList();

            foreach (var cust in customersList)
            {
                model.Forename = cust.FirstName;
                model.Surname = cust.Surname;
                model.PostCode = cust.ContactDetails.PostCode;
               modelList.Add(model);
            }


            return Json(modelList);
//            return Json(new {error = true, message = "all good."});

}

如您所见，我在 Ajax 帖子中尝试了其他方法，但我已将其注释掉。

提前致谢。

【问题讨论】：

标签： asp.net-mvc jquery-ui asp.net-mvc-4 jquery-ui-dialog

【解决方案1】：

在您的控制器上将返回更改为局部视图

return PartialView("_PartialName", model);

然后在你的ajax调用成功

$('#searchCustomers').html(result);
$("#searchCustomers").dialog("open");

这样你加载带有局部视图的 div，然后打开对话框

【讨论】：