How to bind a WebGrid in a PartialView, which is in JQueryUI ModalPopup

Question

I have this PartialView, which is loaded from the Layout of an MVC4 application.

On a button click in the main navigation menu the method SearchCustomers is called in an ajax post (shown below). Everything seems to work. Fiddler shows Data is coming back as supposed however the grid is not visible in the Popup. I wonder what am I doing wrong?

The Partial View

@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 - I guess the problem is here!!

<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> 

The Controller method:

        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."});

}

As you see I have tried other approaches in the Ajax post, which I have commented out.

Thanks in advance.

Answer 1

on your controller change the return to partial view

return PartialView("_PartialName", model);

then in the success of your ajax call

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

this way you load the div with the partial view and then open the dialog