MVCのhtml.DropDownList（）を動的にバインドする方法

Question

私のページにドロップダウンリストとテキストボックスがあり、ドロップダウンリストをテキストボックスの変更で変更したいと思います。私はこのようなjQueryのポストを使用します。

$("#txtBuildId").change(function() { var builddate = $("#txtBuildId").val(); $.post("/UTOverview/Index?builddate=" + builddate); });

と私の指数関数は次のとおりです。

public ActionResult Index() 
    { 
     string buildDate = Request.Params.Get("builddate"); 
     DataTable tbBuildid = DatabaseService.getBuilidByDate(buildDate); 
     List<SelectListItem> list = new List<SelectListItem>(); 
     foreach (DataRow bd in tbBuildid.Rows as IEnumerable) 
     { 
      list.Add(new SelectListItem { Text = bd["buildid"].ToString(), Value = bd["buildid"].ToString() }); 
     } 
     ViewData["tbbuildid"] = list; 
     return View(); 
    } 

しかし、私はドロップダウンリストが変更さDataViewの[「tbbuildid」]と変化しなかったことがわかりましたか？どうして ？

私は完全なポストバックのような方法でこれをやろうとします：window.location = "/UTOverview/Index?builddate=" + builddate;これは動作します。 ViewData ["tbbuildid"]メソッドのインデックスに新しいbuilddateを投稿するたびに変更されました。しかし、どうすればAjaxの方法でこれを行うことができますか？

Answer 1

あなたのアクションメソッドでは、ビューを返していますが、これについてのビューはありますか？この場合、私は単にJsonをアクションメソッドから返すだけです。

あなたのアクションメソッドからちょうどJsonを返し、それを使ってドロップダウンを設定します。あなたはHTTP POSTを呼び出しを作っているので、それはあなたのHTTPPost対処方法

[HttpPost] 
public ActionResult Index() 
{ 
     string buildDate = Request.Params.Get("builddate"); 
     DataTable tbBuildid = DatabaseService.getBuilidByDate(buildDate); 
     List<SelectListItem> list = new List<SelectListItem>(); 
     foreach (DataRow bd in tbBuildid.Rows as IEnumerable) 
     { 
      list.Add(new SelectListItem { Text = bd["buildid"].ToString(), Value = bd["buildid"].ToString() }); 
     } 
     return Json(list); 
} 

そして、あなたのスクリプトでは、

$("#txtBuildId").change(function() { 
     var builddate = $("#txtBuildId").val(); 
     $.post("@Url.Action("Index","UTOverview")", {builddate:builddate},function(data){ 
      $.each(data, function() { 
       $("#select1").append($("<option />").val(this.Value).text(this.Text)); 
     }); 
     }); 
    }); 

をヒットするには、パスを取得するにはUrl.Action HTMLヘルパーを使用することは常に良い習慣ですMVCがアクションメソッドへの正しいパスを返すように処理するので、Actionメソッドに渡します。 ../の数を心配する必要はありません。

上記のコードはテスト済みで、正常に動作します。

Answer 2

あなたのcsコードをデバッグして、javascriptコードでアラートを追加しようとしましたか？

実際の問題に近づくようにしてください。これらの調査結果をあなたの質問に投稿してください。

Answer 3

jquery .post（）は、実際にはサーバーへの非同期呼び出しです。それはあなたが何かをする必要があるいくつかのデータを返します。

あなたは、単にフルポストバックを経由してあなたのページを更新したい場合は、

window.location = "/UTOverview/Index?builddate=" + builddate; 

を行うことができますが、ページの更新せずに、動的にドロップダウンの状態を変更したい場合は、合格する必要があります。返されたデータに基づいてドロップダウンボックスを更新する.post（）へのコールバック。この場合、インデックスアクションを呼び出さず、更新されたデータを取得するための特定のアクションを呼び出すことを望みます。

$.post("/UTOverview/BuildSelect?builddate=" + builddate, function(data) { 
    $('#buildDropDown').html(data); 
}); 

詳細については、jQuery.post()を参照してください。または、コントローラーアクションでHTMLを構築するのではなく、no-noのビットで、Jsonの結果を返し、ドロップダウンをバインドします。

両方の場合、onchangeイベントのリッスンは、テキストボックスのフォーカスが失われたときにのみ発生することに注意してください。