Jquery $.ajax 和加载函数无法将参数传递给 MVC 控制器以将部分视图放入模态对话框

Question

Good time of the day, stack overflow community. I was building my first application with jquery ajax calls, but I'm having troubles with getting customer information, passed from controller action method as partial view to show it in a modal dialog.

When I use .load function it works as expected, but I cant pass any parameters to my controller action method. Then I tried to use $.ajax, but still no luck.

Let me post my code so you will have better idea of my problem.

My Main view

@model IEnumerable<App.AppService.Customer>


@{
    ViewBag.Title = "GetCustomers";
}

<script type="text/javascript">
    $(document).ready(function() {
        var customerID = 0;
        $("input[type=button]").click(function() {
            customerID = this.id;
            debugger;
            $("#dialogDiv").dialog("open");
        });

        $(function() {
            $('#dialogDiv').dialog({
                autoOpen: false,
                width: 400,
                resizable: false,
                title: 'Update customer information',
                modal: true,
                open: function() {
                    $.ajax({
                        url: '@Url.Action("GetCustomer", "Customer")',
                        contentType: 'application/json; charset=utf-8', 
                        method: "get",
                        data: JSON.stringify({ customerId : customerID }),
                        dataType: 'html'
                    });
                },

                buttons: {
                    "Close": function() {
                        $(this).dialog("close");
                    }
                }
            });
        });
    });
</script>

<h2>GetCustomers</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<div class="row">
    <div class="col-md-offset-1 col-md-10">


        <table class="table table-condensed table-striped">
            <tr>
                <th class="text-center">
                    @Html.DisplayNameFor(model => model.CustomerName)
                </th>
                <th class="text-center">
                    @Html.DisplayNameFor(model => model.Company)
                </th>
                <th class="text-center">
                    @Html.DisplayNameFor(model => model.Email)
                </th>
                <th class="text-center">
                    @Html.DisplayNameFor(model => model.PhoneNumber)
                </th>
                <th></th>
            </tr>

            @foreach (var item in Model)
            {
                <tr id="@item.CustomerID">
                    <td>
                        @Html.DisplayFor(modelItem => item.CustomerName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Company)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Email)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.PhoneNumber)
                    </td>
                    <td>
                        <input type="button" value="edit" id="@item.CustomerID" /> |
                        @Html.ActionLink("Delete", "Delete", new { id = item.CustomerID })
                    </td>
                </tr>
            }

        </table>
    </div>
</div>
<div id="dialogDiv" title="Edit customer">
    <h3>Please wait ...</h3>
</div>

In this view I retrieve all the customers and when edit button is clicked I want to call controller method and retrieve customer by his id in modal dialog.

Below is my controller ActionMethod:

[HttpGet]
public ActionResult GetCustomer(int customerId)
{
    Customer customer = repository.GetCustomerById(customerId);
    return PartialView("_GetCustomerPartial", customer);
}

[HttpPost]
public ActionResult GetCustomer(Customer customer)
{
    if (repository.UpdateCustomer(customer))
    {
        return RedirectToAction("GetCustomers");
    }
    return HttpNotFound();
}

And my Partial View:

@model App.AppService.Customer


@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Customer</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Company)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Company)
            @Html.ValidationMessageFor(model => model.Company)
        </div>

        @Html.HiddenFor(model => model.CustomerID)

        <div class="editor-label">
            @Html.LabelFor(model => model.CustomerName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CustomerName)
            @Html.ValidationMessageFor(model => model.CustomerName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.PhoneNumber)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PhoneNumber)
            @Html.ValidationMessageFor(model => model.PhoneNumber)
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

With this code I'm getting Null reference error. I believe it is because parameters are not passed to action method.

If I use just a load function without any parameters (just for testing), it works perfectly and returns customer object as a partial view to my modal dialog.

Working code:

 $(document).ready(function () {

        $("input[type=button]").click(function () {
            var customerId = this.id;
            debugger;
            $("#dialogDiv").dialog("open");
        });

        $(function () {
            $('#dialogDiv').dialog({
                autoOpen: false,
                width: 400,
                resizable: false,
                title: 'Update customer information',
                modal: true,
                open: function () {
                    debugger;
                    $(this).load("@Url.Action("GetCustomer")");
                },
                buttons: {
                    "Close": function() {
                        $(this).dialog("close");
                    }
                }
            });
        });
    });

With changes in controller action.

[HttpGet]
public ActionResult GetCustomer()
{
    Customer customer = repository.GetCustomerById(any int id);
    return PartialView("_GetCustomerPartial", customer);
}

I want to achieve same working functionality, but with parameters I can pass to controller action method.

I went through this post, but unfortunately didn't understand the solution people provided in comments.

Thank you in advance!

Answer 1

After continuously working on this issue I finally got it working. Below is the solution:

$("input[type=button]").click(function () {
            var customerId = this.id;
            $.ajax({
                url: '@Url.Action("GetCustomer","Customer")',
                contentType: 'application/json; charset=utf-8',
                method: "get",
                data: ({ customerId: customerId }),
                dataType: 'html',
                success: function (result) {
                    $("#dialogDiv").dialog("open").html(result);
                },
                error: function (jqXHR, exception) {
                    var msg = '';
                    if (jqXHR.status === 0) {
                        msg = 'Not connect.\n Verify Network.';
                    } else if (jqXHR.status == 404) {
                        msg = 'Requested page not found. [404]';
                    } else if (jqXHR.status == 500) {
                        msg = 'Internal Server Error [500].';
                    } else if (exception === 'parsererror') {
                        msg = 'Requested JSON parse failed.';
                    } else if (exception === 'timeout') {
                        msg = 'Time out error.';
                    } else if (exception === 'abort') {
                        msg = 'Ajax request aborted.';
                    } else {
                        msg = 'Uncaught Error.\n' + jqXHR.responseText;
                    }
                    $("#output").html(msg);
                    $("#output").css("visibility", "visible");
                }
            });
        });
        $(function () {
            $('#dialogDiv').dialog({
                autoOpen: false,
                width: 400,
                resizable: false,
                title: 'Update customer information',
                modal: true,
                buttons: {
                    "Close": function() {
                        $(this).dialog("close");
                    }
                }
            });
        });

Main points to mention here is that I was using $.ajax call in the wrong place, and removing JSON.stringify helped my to avoid null reference exception. As the return type from the action method was html and I just filled my dialog div with that html and everything worked like a charm.