title: Rendering a simple ASP.NET MVC PartialView using JQuery Ajax Post call
body: <p>I have the following code in my MVC controller:</p>
  
  <pre><code>[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);
  }
  </code></pre>
  
  <p>Then this in my javascript at the top of my view:</p>
  
  <pre><code>$(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
      }
  });
  </code></pre>
  
  <p>Then finally my html:</p>
  
  <pre><code> &lt;div id="divPartialView"&gt;
  
      @Html.Partial("~/Views/MyPartialView.cshtml", Model)
  
  &lt;/div&gt;
  </code></pre>
  
  <p>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:</p>
  
  <blockquote>
    <p>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</p>
  </blockquote>
  
  <p>Any ideas what I'm doing wrong? I've googled this one to death!</p>