Rendering a simple ASP.NET MVC PartialView using JQuery Ajax Post call

Question

I have the following code in my 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);
}

Then this in my javascript at the top of my view:

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

Then finally my html:

 <div id="divPartialView">

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

</div>

Essentially when a my dropdown tag (which has a class called SelectedCustomer) has an onchange fired it should fire the post call. Which it does and I can debug into my controller and it even goes back successfully passes back the PartialViewResult but then the success SetData() function doesnt get called and instead I get a 500 internal server error as below on Google CHromes console:

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

Any ideas what I'm doing wrong? I've googled this one to death!

AliRıza Adıyahşi · Accepted Answer · 2013-03-17 21:48:00Z

20

this line is not true: url: "@Url.Action("GetPartialDiv/")" + $(this).val(),

$.ajax data attribute is already included route value. So just define url in url attribute. write route value in data attribute.

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

answered Mar 17, 2013 at 21:48

AliRıza Adıyahşi

15.9k24 gold badges118 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

User101 Over a year ago

nice spot, just realised its pointless me doing that and passing it as a query string/route value too. however I think i found the problem being my partial view, i had to change it to be return PartialView("MyPartialView", guestResponse);

User101 Over a year ago

I mean return PartialView("~/Views/MyPartialView.cshtml", guestResponse); instead which is weird, as it should just work no?

StanK Over a year ago

The reason you have to fully specify where the view is, is because you haven't placed it in one of the default locations i.e. ~/Views/WhateverTheControllerNameIs/MyPartialView.cshtml or ~/Views/Shared/MyPartialView.cshtml

Collectives™ on Stack Overflow

Rendering a simple ASP.NET MVC PartialView using JQuery Ajax Post call

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related