c# - 具有动态自定义参数的 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

您的 HTML 无效，<select>标记没有名为 employeeid 的属性。由于您显然是在尝试将 employeeId 绑定(bind)到选项的值，因此您应该使用经典的 name和 value可以按如下方式使用的属性:

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

现在，在 MVC 项目的 Controller 操作中，您收到一个名为 employeeid 的参数，其类型为 int .当您提交表单时，模型绑定(bind)器(查找)将自动绑定(bind)您在“employeeid”选择输入元素中选择的值。

@daniell89 提供的答案向您展示了使用 Razor template language 填充选择标签的好方法。几乎每个人都将其用于 C# MVC 项目。注意 ViewModel 如何你在你的 view 中使用不必与 ViewModel 相同您提交给您发布的操作，所以 public int SelectedEmployee { get; set; }在 ViewModel 中实际上没有必要，只要您将“employeeid”作为您提交的操作的参数。

编辑

为了使用自定义属性，您将不得不放弃传统的 MVC，因为您将要发布的帖子将由 AJAX 帖子完成。您将需要导入 jQuery 库(实际上您可以使用 vanilla javascript 或您选择的任何库，我更喜欢 jQuery 用于此类内容)，如果需要，请查看如何导入它。

像这样在代码中使用 ViewModel:

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

然后在您的 View 中使用此模型( View 的第一行代码，除非您有 using 语句):

@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>

这将创建您的选择标签，其中包含您放入 View 模型中的所有员工，以及一个用于将数据发送到服务器的按钮。

然后在您的页面上包含以下 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>

然后在服务器代码上的 Controller 中，有一个对应的操作并用 int emplyeeid 对其进行参数化因此:

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

如果一切顺利，如果您在发送之前选择 101 作为员工，您浏览器中的控制台窗口将向您显示一个返回的对象，该对象具有一个值为“我看到 101”的“消息”键。

我在 stackoverflow 编辑器中输入了所有这些代码，所以我可能在调用类型时犯了一些语法错误或错误(我不确定你是否可以只做 new Json().Body() 例如，尽管我知道您肯定可以做类似的事情。

我希望这能回答您的问题。