Refresh partialview

Question

ajax呼び出しからMVCの部分的なビューをリフレッシュするのに役立つ必要があります。 は私のビュー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イベント、私は私がするJsonResult JSON結果の新しいモデルが、部分的なビューを返す

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

そのを返すのAJAX呼び出しを、持っている

、新しいモデル値とのチェックボックスを埋めるために必要があります新しい値を再ロードしません。

コントローラで

、私は2つのアクションコントローラ、1はロードに呼び出され、もう1つは、私は部分的なビューを再ロードすることはできませんよの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、ないあなたが

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

ノートもする必要がありますAJAXので、あなたがcontentType: 'application/html; charset=utf-8',は無意味とCAであることを、CallOnLoad()方法、ないCallonChange()を呼ぶべきであるJsonResult n個の例

ため、

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