【问题标题】:MVC dropdownlist with dynamic custom parameter具有动态自定义参数的 MVC 下拉列表
【发布时间】:2017-03-08 10:59:38
【问题描述】:

我有一个对象列表,比如 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>

【问题讨论】:

  • 你不能。 @HtmlDropDownListFor() 方法使用 IEnumerable&lt;SelectListItem&gt;SelectListItem 没有 employeeid 的属性。为什么你需要它作为&lt;option&gt; 的属性? (还有许多其他方法可以处理这个问题)
  • 嗨 Draken,我有一个产品,其中包含基于自定义属性构建的脚本库,并且必须重新使用它们。我们通常会在语法中添加类属性和其他静态属性,我只是想知道我们是否可以使其成为动态的。

标签: c# asp.net-mvc model-view-controller


【解决方案1】:

您的 HTML 无效,&lt;select&gt; 标记没有名为employeeid 的属性。由于您显然是在尝试将employeeId 绑定到选项的,因此您应该使用经典的namevalue 属性,可按如下方式使用:

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

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

@daniell89 提供的答案向您展示了一种使用 Razor template language 填充您的选择标签的好方法,几乎​​每个人都在使用 c# MVC 项目。请注意,您在view 中使用的ViewModel 不必与您提交给您发布到的操作的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; }
}

然后在你的视图中使用这个模型(你视图的第一行代码,除非你有 using 语句):

@model IEnumerable&lt;Employee&gt;

然后在您想要选择按钮的地方创建此代码:

<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编辑器中输入了所有这些代码,所以我可能在调用类型的方式上犯了一些语法错误或错误(我不确定你是否可以只做 new Json().Body() 例如,虽然我知道你肯定可以做类似的事情。

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

【讨论】:

  • 感谢 Glubus。感谢您试图澄清应该使用的案例。但是我已经使用了该值,我需要使用自定义属性。
  • 我已经编辑了我的答案,以便您可以使用自定义属性,但您必须意识到这不符合 MVC 标准。实际上,当涉及到服务器和客户端之间的通信时,自定义属性本质上是不符合 MVC 的。
  • 感谢 Glubus,我已经使用自定义代码实现了这一点,只是想知道我是否缺少使用标准 HTML Helpers 实现它的东西。
【解决方案2】:

我认为您需要另一个类- 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"));

【讨论】:

  • 感谢 Daniel,但此下拉菜单没有任何自定义属性。它只是一个选择值/显示选项。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-12-21
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多