带有下拉列表和文本框的 MVC EditorFor答案

【问题标题】：MVC EditorFor with Dropdownlist and Textbox带有下拉列表和文本框的 MVC EditorFor
【发布时间】：2015-01-15 23:58:37
【问题描述】：

我还是 MVC 的新手，我不太明白 EditorFor 在 MVC 5 中的工作原理。

我正在基于现有数据库构建项目，因此对 EF 使用 Database First 方法是有意义的。我创建模型和初始模板没有问题，但我的数据库中有一列如下所示：

Plant ID    Leaf Color
1           Green
2           Yellow
3           Green
4           Red
5           Green
6           Purple

由于绿色和黄色是植物叶子更常见的颜色，

问题的第一部分：我想创建一个带有选项的 DropDownList：Green, Yellow and Other。（也就是说，如果颜色是红色，它应该指向 DropDownList 中的“其他”）
问题的第二部分：发生这种情况，或者选择“其他”时，将出现新的 TextBox将显示用户手动输入颜色。

因此，它还会弄乱模型绑定和 MVC 验证。

在 MVC 5 中，当使用 MVC Controller with read/write actions and views, using Entity Framework 创建模板时，EditorFor 将自动为该字段创建 TextBox。 Index.cshtml 和Delete.cshtml 没有问题，因为它们不涉及EditorFor。但是，问题出现在Edit.cshtml和Create.cshtml。

我将如何实现我所需要的？

附加信息：我非常熟悉 jQuery，在做 ASP.NET WebForm 时，我知道如何使用 jQuery 隐藏/显示文本框，但我似乎不明白如何将其应用于 EditorFor 和标签为

【问题讨论】：

为下拉菜单和文本框创建一个具有单独属性的视图模型

标签： c# asp.net asp.net-mvc razor

【解决方案1】：

您可以使用 jquery 将值从两个可见控件（在回发时被忽略）复制到一个不可见的控件（在回发时用作颜色）。像这样的东西；在更改事件上使用 jquery 以保持控件同步。

<div class="visible-controls">
<select>
    <option>select</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Other</option>
</select>
<input type="text" placeholder="other" />
</div>
<div class="invisible-controls">
<input type="text" name="colour" />
</div>

我想主要的一点是 Editorfor 默认不会产生这样的东西。对于复杂的控件，您将不得不更接近原始 html，而不是使用 HtmlHelper

【讨论】：

【解决方案2】：

你可以这样做：

html 位于 ViewBag 下方的 html 页面中

@using (Html.BeginForm())
{
<p>
   Colour: @Html.DropDownList("Colour", "Select")

   @Html.TextBox


</p>
}

在控制器中创建一个新方法并将其添加进去。它使用您想要的三个项目创建一个新的下拉列表

 public ActionResult Index(string Colour)
        {
           //Create a Dropdown list
            var SearchOptionList = new List<string>();
            SearchOptionList.Add("Green");
            SearchOptionList.Add("Yellow");
            SearchOptionList.Add("Other");

 var mylist = from m in "your database table name goes in here" select m;

//Clears dropdown list
 ModelState.Remove("Colour")

return View(mylist.ToList());

}

你会比我有更好的 JQuery 经验，你说你知道让文本框出现，所以你应该适应它。

【讨论】：