ajax - 使用 JQuery Ajax Post 调用渲染简单的 ASP.NET MVC PartialView

Question

我的 MVC Controller 中有以下代码:

[HttpPost]
public  PartialViewResult GetPartialDiv(int id /* drop down value */)
{
    PartyInvites.Models.GuestResponse guestResponse = new PartyInvites.Models.GuestResponse();
    guestResponse.Name = "this was generated from this ddl id:";

    return PartialView("MyPartialView", guestResponse);
}

然后在我的 View 顶部的 javascript 中:

$(document).ready(function () {

$(".SelectedCustomer").change( function (event) {
    $.ajax({
        url: "@Url.Action("GetPartialDiv/")" + $(this).val(),
        data: { id : $(this).val() /* add other additional parameters */ },
        cache: false,
        type: "POST",
        dataType: "html",
        success: function (data, textStatus, XMLHttpRequest) {
            SetData(data);
        }
    });

});

    function SetData(data)
    {
        $("#divPartialView").html( data ); // HTML DOM replace
    }
});

最后是我的 html:

 <div id="divPartialView">

    @Html.Partial("~/Views/MyPartialView.cshtml", Model)

</div>

本质上，当我的下拉标签(有一个名为 SelectedCustomer 的类)触发 onchange 时，它​​应该触发 post 调用。它确实做到了，我可以调试到我的 Controller 中，它甚至成功返回传递回 PartialViewResult 但随后成功的 SetData() 函数没有被调用，而是我在 Google CHromes 控制台上收到如下所示的 500 内部服务器错误:

POST http:// localhost:45108/Home/GetPartialDiv/1 500 (Internal Server Error) jquery-1.9.1.min.js:5 b.ajaxTransport.send jquery-1.9.1.min.js:5 b.extend.ajax jquery-1.9.1.min.js:5 (anonymous function) 5:25 b.event.dispatch jquery-1.9.1.min.js:3 b.event.add.v.handle jquery-1.9.1.min.js:3

你知道我做错了什么吗？我已经用谷歌搜索到这个了!

Answer 1

此行不正确:url: "@Url.Action("GetPartialDiv/")"+ $(this).val(),

$.ajax data 属性已包含路由值。因此只需在 url 属性中定义 url 即可。在 data 属性中写入路由值。

$(".SelectedCustomer").change( function (event) {
    $.ajax({
        url: '@Url.Action("GetPartialDiv", "Home")',
        data: { id : $(this).val() /* add other additional parameters */ },
        cache: false,
        type: "POST",
        dataType: "html",
        success: function (data, textStatus, XMLHttpRequest) {
            SetData(data);
        }
    });
});