web-dev-qa-db-fra.com

Rendu d'une vue partielle ASP.NET MVC simple à l'aide de l'appel JQuery Ajax Post

J'ai le code suivant dans mon contrôleur 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);
}

Ensuite, cela dans mon javascript en haut de ma vue:

$(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
    }
});

Puis enfin mon html:

 <div id="divPartialView">

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

</div>

Essentiellement, lorsqu'une balise my dropdown (qui a une classe appelée SelectedCustomer) a un onchange déclenché, il doit déclencher l'appel après. Ce qu'il fait et je peux déboguer dans mon contrôleur et il revient même avec succès renvoie le PartialViewResult mais la fonction SetData () réussie n'est pas appelée et à la place j'obtiens une erreur de serveur interne de 500 comme ci-dessous sur la console Google CHromes:

POST http: // localhost: 45108/Home/GetPartialDiv/1 500 (Erreur de serveur interne) 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 (fonction anonyme) 5:25 b.event.dispatch jquery-1.9.1.min.js: 3 b.event.add.v.handle jquery-1.9.1 .min.js: 3

Des idées sur ce que je fais mal? J'ai googlé celui-ci à mort!

ajaxasp.net-mvcjquerypartial-views
13
User101

cette ligne n'est pas vraie: url: "@Url.Action("GetPartialDiv/")" + $(this).val(),

$.ajaxdata L'attribut est déjà inclus dans la valeur de l'itinéraire. Définissez donc simplement l'URL dans l'attribut url. écrire la valeur de la route dans l'attribut 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
AliRıza Adıyahşi