Refresh partialview - ajax

Question

Need help with refreshing partial views in MVC from ajax call.
In my View page.cshtml
<div id="tblOptions">
#Html.DropDownListFor(model => model.State , new SelectList(), new {id="ddlstate"})
#html.HiddenFor(model => model.optionsId)
#Html.CheckBoxFor(model => model.PrintAddress)
........
</div>
On Page load the model is filled properly and all checkboxes are correctly filled. Now onChange event of dropdownlist , I need to fill the checkboxes with new model values,
I have an ajax call, which returns jsonresult
$(document).on('change', '#ddlstate', function () {
$.ajax({
type: 'GET',
url: '/Home/CallonChange',
contentType: 'application/html; charset=utf-8',
data: { PersonCode: '#Model.PersonCode', selectedstate: $('#ddlState').val() },
dataType: 'json',
beforeSend: function (jqXHR, settings) {
$('tblOptions').html('');
}
})
.done(function (data, textStatus, jqXHR) //success callback
{
if (data != null) {
// not loading
$('tblOptions').html(data);
}
else { //display error message
}
})
.fail(function (jqXHR, textStatus, errorThrown) //error callback
{
//display error message
});
});
});
Its returning the new model in JSON result, but the partial view doesn't reload with the new values.
In Controller, I have two action controllers, one called on Load and one called on SelectionChange
[HttpGet]
public ActionResult CallOnLoad(string PersonCode, string selectedstate = "") {
ModelA a = new ModelA(PersonCode, selectedstate);
return PartialView("Home/page", options);
}
[HttpGet]
public JsonResult CallonChange(string PersonCode, string selectedstate= "")
{
ModelA a = new ModelA(PersonCode, selectedstate);
return Json(options, JsonRequestBehavior.AllowGet);
}
I am not able to reload the partial view. What am I doing wrong? I know its pretty silly somewhere but can't figure it out.
Thanks heaps.

Answer 1

You have 2 issues with your code.
First the jQuery selector is incorrect for the element you want to and the data to, and it needs to be
$('#tblOptions').html(data); // not $('tblOptions')
Next, you want to update the element with html, so your method needs to return a PartialViewResult, not a JsonResult so you should be calling the CallOnLoad() method, not CallonChange(), so you ajax should be
$.ajax({
type: 'GET',
url: '#Url.Action("CallOnLoad", "Home")', // not '/Home/CallonChange'
note also that the contentType: 'application/html; charset=utf-8', is pointless and can be removed
Alternatively, you could return json using the CallonChange() method, and just update the values of the existing elements based on your model properties, for example
.done(function (data, textStatus, jqXHR) //success callback
{
$('#optionsId').val(data.optionsId); // updates the hidden input
$('#PrintAddress').prop('checked', data.PrintAddress); // update the checkbox
....
}