HtmlHelper DropDownListの選択した値に基づいてページのコンテンツを変更するにはどうすればよいですか？

Question

私はASP.NET MVCを使用しており、選択した値HtmlHelper.DropDownListに基づいてページのコンテンツを更新したいとします。私はある学期の雇用された従業員のリストを他のコントローラにリダイレクトせずに表示したい管理ページを持っています。おそらくテーブルを生成するか、これらのユーザーでListBoxを埋め込むことができます。

私のデータベースには、学期の一覧、ユーザーの一覧を含む表、および各学期とそれに雇われたすべてのユーザーをリンクする2つのFK関連フィールドを持つ別の表があります。

アイデア？

Answer 1

ディスプレイ上のマークを含むPartialViewResultを返すアクションがあります。ドロップダウンリストには学期がテキストとして表示され、関連するデータベースキーが値として表示されます。ドロップハンドラをドロップダウンリストに追加して、AJAXが部分ビューをレンダリングするアクションを取得し、semesterキー値をurlの一部としてメソッドに渡します。パーシャルビューを保持するコンテナをAJAXクエリの結果で置き換えます。

ビュー

$(function() { 
    $('#SemesterSelect').change(function() { 
     $.get('<%= Url.Action('ListEmployees') %>/' + $(this).val(), function(data) { 
     $('#EmployeeList').html(data); 
     }, 
     'html'); 
    }); 
}); 


<%= Html.DropDownList("SemesterSelect", 
         (IEnumerable<SelectListItem>)ViewData["Semesters"]) %> 

<div id="EmployeeList"></div> 

PartialView（サンプル - タイプのIEnumerableの）

<ul> 
<% foreach (var employee in Model) 
    { %> 
     <li> <%= employee.Name %> </li> 
<% } %> 
</ul> 

コントローラ

public ActionResult ListEmployees(int semesterID) 
{ 
    var employees = db.... // query to get employees 
    return PartialView("EmployeeList", employees) 
}