web-dev-qa-db-ja.com

JQuery Ajax Post呼び出しを使用した単純なASP.NET MVCパーシャルビューのレンダリング

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>

基本的に、mySelectedCustomerというクラスを持つmyドロップダウンタグでonchangeが呼び出されると、post呼び出しが呼び出されます。それを実行すると、コントローラーにデバッグでき、正常に戻り、PartialViewResultが正常に返されますが、成功したSetData()関数が呼び出されず、代わりに、Google CHromesコンソールで以下のような500内部サーバーエラーが発生します。

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

私が間違っていることはありますか?これをググって死ぬぞ!

13
User101

この行は当てはまりません:url: "@Url.Action("GetPartialDiv/")" + $(this).val(),

$.ajaxdata属性はすでにルート値に含まれています。したがって、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);
        }
    });
});
20