部分ビューを読み込んだ後にドロップダウン値が選択されない

Question

親ビューに2つの部分ビューがあります。親ビューには、「状態」と呼ばれる部分的なビューを保持する「div」タグがあります。

<div id="divState"></div></td> 

部分図はそれにDDLを有する：

@Html.DropDownList("State", null, "---------- Select ----------", htmlAttributes: new { @class = "form-control" }) 

部分図は、以下のようにロードされている：

$('#divState').load('@Url.Action("LoadState", "General")'); 

コントローラコードは以下のようである：

[HttpGet] 
     public ActionResult LoadState() 
     { 
      if (Request.IsAjaxRequest()) 
      { 
       ViewBag.State = new SelectList(db.Generals, "IID", "Value"); 
       return PartialView("_State"); 
      } 
      else 
      { 
       return null; 
      } 
     } 

リンクボタンがありますモーダルダイアログボックスを開きます。これは、実際には部分的なビューです。パーシャルビューには、2つのフィールドとデータ保存用のボタンがあります。保存後、最後に入力された値で状態DDLに値が表示されます。最後に挿入された値を格納して選択するために、次のjQueryを記述しました。

<script type="text/javascript"> 
      $(function() { 
       $("#btnSave").click(function() { 
        debugger; 
        $.ajax({ 
         type: "POST", 
         url: '@Url.Action("SaveGeneralData", "General")', 
         data: '{name:"' + $("#Value").val() + '", description:"' + $("#Description").val() + '"}', 
         contentType: "application/json; charset=utf-8", 
         dataType: "json", 
         success: function (response) { 
          //alert("Id :" + response.IID); 
          var id = response.IID; 
          $('#divState').load('@Url.Action("LoadState", "General")');// Loading the partial view from controller 
// to get the newly inserted value 
          $('#dialogState').dialog('close'); 
          //$('div#divState select').val("5").attr("selected", "selected"); 
          $("div#divState select").val("5"); 
         }, 
         failure: function (response) { 
          alert(response.responseText); 
          //alert("1"); 
         }, 
         error: function (response) { 
          alert(response.responseText); 
         } 
        }); 
       }); 
      }); 
    </script> 

DDLを保持する部分ビューをリロードしているときに、挿入値がDDLに表示されています。 しかし、私の問題は、最後に挿入された値が選択されていないことです。 DDLは、最後の挿入レコードをフラッシュした後の最初のリスト項目を表示しています（つまり、「5」としてハードコードされています）。

ありがとうございました。 Partha

Answer 1

​​関数が完了する前に、Ajax呼び出しが非同期であり、$("div#divState select").val("5");コード行が実行されます。

あなたがその不明確なぜあなたは再び<select>を置き換えるためにAjaxの呼び出しを行う、しかし、成功コールバック

success: function (response) { 
    ... 
    $('#divState').load('@Url.Action("LoadState", "General")', function() { 
     // set value in the callback (after the DOM has been updated) 
     $("div#divState select").val("5"); 
    }); 
}, 

に<select>の値を設定する必要があります。最初のajaxコールでGeneralsテーブルにデータが保存されているので、オプションを更新する必要がある場合は、JsonResultにIIDとValueを返してから、新しい<option>要素を作成して既存の<select>