具有動態自定義參數的MVC下拉列表

Question

我有一個對象列表，稱爲Employee，並且我試圖通過自定義參數及其員工ID來獲取所有員工姓名的下拉列表。該模型如下

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

我期待創建HTML.DropdownlistFor一個下拉列表如下

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

Answer 1

我認爲你需要另一個講座EmpViewModel：

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

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

然後您可以將此類的實例傳遞給視圖並創建下拉列表，如下所示：

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

Answer 2

您的HTML無效，<select>標記沒有名爲employeeid的屬性。既然你顯然試圖向僱員到某個選項的的值綁定，您應該按如下方式使用可用於經典name和value屬性：

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

現在在你的控制你的行動MVC項目，您會收到一個名爲employeeid的參數，其類型爲int。在提交表單時，模型綁定器（查看它）將自動綁定您在'employeeid'選擇輸入元素中選擇的值。

answer @ daniell89提供的答案顯示了使用幾乎每個人都用於c＃MVC項目的Razor template language填充選擇標記的好方法。請注意，您在view中使用的ViewModel不一定與您提交給您發佈的操作的ViewModel相同，因此public int SelectedEmployee { get; set; }實際上在ViewModel中並不是必需的，只要您將'employeeid'作爲您提交給您的操作的參數。

編輯

爲了使用自定義屬性，你會有種要擺脫傳統的MVC了，因爲你會做的職位將通過AJAX後完成。您需要導入jQuery庫（實際上，您可以使用vanilla JavaScript或任何您選擇的庫，我更喜歡jQuery用於這種類型的東西），請查看如何在需要時導入。

使用視圖模型在你的代碼一樣的：

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> 

：

然後在你想有你的選擇按鈕創建這個碼的地方權

這將與您放入viewmodel的所有員工一起創建您的選擇標籤，以及用於將數據發送到服務器的按鈕。

然後在您的頁面上包含以下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'的'消息'鍵。我不知道是否可以只做一個新的Json（）。Body（）作爲例子，雖然我知道你能做肯定的類似的東西。

我希望這回答了你的問題。