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

时间:2013-03-17 21:45:03

标签: ajax asp.net-mvc jquery partial-views

我的MVC控制器中有以下代码:

[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);
}

然后在我的观点顶部的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>

基本上当我的dropdown标签(有一个名为SelectedCustomer的类)触发了onchange时,它应该触发post调用。它做了什么,我可以调试到我的控制器,它甚至返回成功传回PartialViewResult但成功SetData()函数没有被调用,而是我得到500内部服务器错误如下所示在谷歌CHromes控制台:

  

POST http:// localhost:45108 / Home / GetPartialDiv / 1 500(内部服务器   错误)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(匿名   功能)5:25 b.event.dispatch jquery-1.9.1.min.js:3   b.event.add.v.handle jquery-1.9.1.min.js:3

任何想法我做错了什么?我用谷歌搜索了这个!!

1 个答案:

答案 0 :(得分:20)

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

$.ajax data属性已包含在路由值中。因此,只需在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);
        }
    });
});