Question

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

在主导航菜单中单击按钮，在ajax帖子中调用 SearchCustomers 方法（如下所示）。一切似乎都有效。 Fiddler显示数据正在回归，但是在Popup中看不到网格。我不知道我做错了什么？

部分视图

@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>
                    )
            }
            )
    }

}

Ajax帖子 - 我猜问题就在这里!!

<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帖子中尝试了其他方法，我已经评论过了。

提前致谢。

Answer 1

控制器上的

将返回更改为部分视图

return PartialView("_PartialName", model);

然后你的ajax调用成功了

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

这样您可以使用局部视图加载div，然后打开对话框

如何在部分视图中绑定WebGrid，这是在JQuery UI模式弹出窗口中

1 个答案: