Refresh partialview

Question

Нужна помощь с обновлением частичных представлений в MVC из ajax-вызова. На мой взгляд 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> 

На странице загрузки модели заполнена правильно и все флажки правильно заполнены. Теперь OnChange событие DropDownList, мне нужно заполнить флажками с новыми значениями модели,

У меня есть АЯКС вызов, который возвращает 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 
     }); 
}); 
}); 

Свое возвращение новую модель в JSON результат, но частичный вид не перезагружается новыми значениями.

В контроллере, у меня есть два контроллера действий, один под названием при загрузке и один призвал 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); 
} 

Я не могу перезагрузить частичный вид. Что я делаю не так? Я знаю его довольно глупо где-то, но не могу понять.

Спасибо, кучи.

Answer 1

У вас есть 2 проблемы с кодом.

Первый селектор JQuery неверен для элемента, который вы хотите, и данные в, и она должна быть

$('#tblOptions').html(data); // not $('tblOptions') 

Далее, вы хотите, чтобы обновить элемент с HTML, поэтому ваш метод должен возвращать PartialViewResult, не JsonResult, так что вы должны называть CallOnLoad() метод, не CallonChange(), так что вы должны быть АЯКС

$.ajax({ 
    type: 'GET', 
    url: '@Url.Action("CallOnLoad", "Home")', // not '/Home/CallonChange' 

Отметим также, что contentType: 'application/html; charset=utf-8', бессмысленно и ча п быть удалены

В качестве альтернативы, вы можете вернуть JSON с помощью метода CallonChange(), а просто обновить значения существующих элементов, основанных на свойствах модели, например

.done(function (data, textStatus, jqXHR) //success callback 
{ 
    $('#optionsId').val(data.optionsId); // updates the hidden input 
    $('#PrintAddress').prop('checked', data.PrintAddress); // update the checkbox 
    .... 
}