動的カスタムパラメータを持つMVCドロップダウンリスト

Question

私は、オブジェクトのリストにEmployeeと言っていますが、従業員IDのカスタムパラメータを持つすべての従業員名のドロップダウンリストを取得しようとしています。

public class EmpViewModel 
{ 
    public int SelectedEmployee { get; set; } 

    public IEnumerable<Employee> EmployeeList { get; set; } 
} 

そして：

public class Emp 
{ 
    public string EmployeeName {get;set;} 
    public int employeeId {get;set;} 
} 

を次のようにモデルがある私は、私はあなたが別のクラス - EmpViewModelが必要だと思う

<select> 
<option employeeid="101"> Emp1 <option> 
<option employeeid="102"> Emp2 <option> 
<option employeeid="103"> Emp3 <option> 
</select> 

Answer 1

以下のようHTML.DropdownlistForでドロップダウンリストを作成するために探していますこのクラスのインスタンスをビューに渡し、次のようにドロップダウンリストを作成できます。

@Html.DropDownListFor(m => m.SelectedEmployee, new SelectList(Model.EmployeeList, "employeeId", "EmployeeName")); 

Answer 2

HTMLが無効です。<select>タグには、employeeidという属性がありません。

<select name="employeeid"> 
    <option value="101">Gary</option> 
    <option value="102">John</option> 
    <!-- etc --> 
</select> 

今、あなたの中にあなたのコントローラのアクションに：あなたははっきりとオプションの値に社員をバインドしようとしているので、あなたは次のように使用することができます古典的なnameとvalue属性を使用する必要がありますMVCプロジェクトでは、のemployeeidというパラメータを受け取ります。 モデルバインダー（ルックアップ）は、フォームを送信するときに 'employeeid' select入力要素で選択した値を自動的にバインドします。

Answer @ daniell89は、皆さんが選択したタグをpopulatingする良い方法を示しています。Razor template languageを使って、皆さんがc＃MVCプロジェクトに使用するほとんどの人が使用しています。 をviewで使用する方法は、送信するアクションに提出するViewModelと同じである必要はありませんので、ViewModelでは実際にはは必要ありません。ただし、 'employeeid'をあなたが提出するアクションのパラメータ。カスタム使用するためには

EDIT

あなたは種類のあなたが行いますポストはAJAXポストによって行われますので、離れて古典的なMVCから移動する必要があります属性。 jQueryライブラリをインポートする必要があります（実際には、バニラのjavascriptまたは任意のライブラリを使用できます。この種のものについてはjQueryが好ましい）。必要に応じてインポートする方法を調べます。

この問わず、あなたのコード内のViewModelを使用します（あなたはステートメントを使用していない限り、あなたのビューのコードの最初の行）

public class Employee { 
    public string Name { get; set; } 
    public string EmployeeId { get; set; } 
} 

その後のようなあなたのビューでこのモデルを使用します。

@model IEnumerable<Employee>

<select id="my-select-element"> 
@foreach(var employee in Model) { 
    <text> 
     <option employeeid="@employee.EmployeeId">@employee.Name</option> 
    </text> 
} 
</select> 

<button id="submit-employee">Send!</button> 

：あなたはあなたの選択ボタンは、このコードを作成したい場所に

次に、右側

これは、サーバーにデータを送信するために使用するボタンと共に、ビューモデルに入れたすべての従業員を含む選択タグを作成します。

次に、データを収集してサーバーに送信する、次のjQueryスクリプトをページに含めます。

サーバーコードに基づいて、コントローラで次に

<script> 
    $("#submit-employee").on("click", function(event) { 
     event.preventDefault(); //will prevent default behaviour done by clicking the button 
     var selecttag = $("#my-select-element"); 
     var id = $(selecttag).find("option").prop("selected").attr("employeeid"); 

     $.post("<your URL>", { employeeid: id }, function(result) { 
       console.log(result); 
     } 
    } 
</script> 

、に対応する行動をしていると、それはのようなint emplyeeidをパラメータ化している：

[HttpPost] 
public ActionResult SubmitEmployee (int employeeid) { 
    return new Json().Body(new { message = "I saw " + employeeid }) 
} 

すべてが右に行く場合は、お使いのブラウザでコンソールウィンドウがします送信前に従業員として101を選択した場合、 '私は101を見た'という値を持つ 'メッセージ'キーを持つ返されたオブジェクトを表示する必要があります。

私はstackoverflowエディタの中でこのコードをすべてタイプしていますので、構文エラーや型の間違いがありました（新しいJson（）を実行できるかどうかわかりません）Body私はあなたが確かに似た何かを行うことができます知っているのに。

、私はSelectListItem`にはない `` @HtmlDropDownListFor（） `メソッドを使用` IEnumerableを `。あなたがすることはできません