Refresh Teilansicht

Question

Benötigen Sie Hilfe beim Aktualisieren partieller Ansichten in MVC von Ajax Anruf. Meiner Ansicht 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> 

Auf Seite das Modell laden ist richtig und alle Kontrollkästchen gefüllt korrekt ausgefüllt. Jetzt onChange Ereignis von Dropdownlist, muss ich mit neuen Modellwerte der Kontrollkästchen füllen,

ich einen Ajax-Aufruf haben, die JsonResult kehrt

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

Sein das neue Modell in JSON Ergebnis Rückkehr, aber die Teilansicht lädt nicht mit den neuen Werten neu.

In Controller habe ich zwei Regler, ein auf Last genannt und ein auf Selection

[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); 
} 

Ich bin nicht in der Lage, die Teilansicht aufgerufen neu zu laden. Was mache ich falsch? Ich weiß, es ist ziemlich dumm irgendwo, aber ich kann es nicht herausfinden.

Vielen Dank.

Answer 1

Sie haben 2 Probleme mit Ihrem Code.

Zuerst wird die jQuery-Selektor ist falsch für das Element, das Sie wollen, und die Daten, und es muss

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

Weiter sein, können Sie das Element mit HTML aktualisieren möchten, so dass Ihre Methode muss zurückkehren ein PartialViewResult, kein JsonResult so sollten Sie die CallOnLoad() Methode, nicht CallonChange() Aufruf werden, so sollten Sie

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

beachten Sie auch sein ajax dass die contentType: 'application/html; charset=utf-8', sinnlos ist und ca n

Alternativ entfernt werden, Sie json mit der CallonChange() Methode zurückkehren können, und aktualisieren Sie einfach die Werte der vorhandenen Elemente basierend auf dem Modell-Eigenschaften, zum Beispiel

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