ASP.NET Razor 页面下拉列表答案

【问题标题】：ASP.NET Razor page dropdown listASP.NET Razor 页面下拉列表
【发布时间】：2016-04-01 15:24:15
【问题描述】：

 <div class="form-group">
            @Html.LabelFor(model => model.CountyId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CountyId, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CountyId, "", new { @class = "text-danger" })
            </div>
        </div>

所以我的网站上有以下代码。我想要做的不是在文本字段中输入countyID，而是在县名称下拉列表中，用户可以在其中按名称选择它，并且它仍会注册为数字。（例如，他不会写“1”，而是从我制作的列表中单击并选择 County1）

编辑：好的，现在我有这个代码

@Html.DropDownList("Counties", new List<SelectListItem>
                   {
                       new SelectListItem {Text = "Alba", Value = "1", Selected = true },
                       new SelectListItem {Text = "Arad", Value = "2" },
                       new SelectListItem {Text = "Arges", Value = "3" },
                       new SelectListItem {Text = "Bacau", Value = "4" },
                   }, "Select County")
                @Html.EditorFor(model => model.CountyId, new { htmlAttributes = new { @class = "form-control" } })

如何编写它以将 @Html.EditorFor(model => model.CountyId 替换为 DropDownList 选择？

Edit2：我如何使用@Html.DropDownListFor ？

【问题讨论】：

标签： c# asp.net razor

【解决方案1】：

布达，请在下面试试

 <div class="form-group">
            @Html.LabelFor(model => model.CountyId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
               @Html.DropDownListFor(model => model.CountyId, new List<SelectListItem>
                       {
                           new SelectListItem {Text = "Alba", Value = "1", Selected = true },
                           new SelectListItem {Text = "Arad", Value = "2" },
                           new SelectListItem {Text = "Arges", Value = "3" },
                           new SelectListItem {Text = "Bacau", Value = "4" },
                       }, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.CountyId, "", new { @class = "text-danger" })
            </div>
        </div>

【讨论】：

【解决方案2】：

您可以使用Html.DropDownListFor 辅助方法

向您的视图模型添加一个新属性以存储下拉选项。此属性应为 List 类型

public class CreateUser
{
  public int CountryId {set;get;}
  public List<SelectListItem> Countries {set;get;}
}

现在在您的 GET 操作中，在此视图模型对象上填充国家集合属性值。

public ActionResult Create()
{
  var vm = new CreateUser();
  vm.Countries = new List<SelectListItem> {
          new SelectListItem { Value="1", Text="USA" },
          new SelectListItem { Value="2", Text="Canada" },
          new SelectListItem { Value="3", Text="Mexico" }
        };
 return View(Vm);
}

在你看来

@model CreateUser
@using(Html.BeginForm())
{
  <label>Select country</label>
  @Html.DropDownListFor(s=>s.CountryId,Model.Countries,"Select one")
  <input type="submit" />      
}

【讨论】：

【解决方案3】：

布达，

您可能需要使用 DropDownListFor html 助手。

请检查以下答案，看看它是否澄清了您的问题

ASP.NET MVC + Populate dropdownlist

【讨论】：

【解决方案4】：

有很多方法可以做到这一点，你可以使用这个：

<div class="form-group col-4">
                                <label for="issueinput6">category</label>
                                <select id="issueinput6" class="form-control" data-toggle="tooltip" data-trigger="hover" data-placement="top"
                                        data-title="Status">
                                    @foreach (var item in ViewData["Categoryes"] as IList<AirPortModel.Models.Category>)
                                    {

                                        <option value="@item.Id">@item.CategoryName</option>
                                    }

                                </select>
                            </div>

这样一来，您就可以将所需的所有信息作为下拉菜单。这些代码来自我的项目，但您可以更改名称以供您自己使用。此外，您可以使用此代码来解决您的问题。

<select data-val="true" data-val-required="The Category field is required." id="category" name="1">
<option value="">Pick one</option>
<option selected="selected" value="0">blabla</option>
<option value="1">blabla</option>
<option value="2">blabla</option>
<option value="3">blabla</option>
<option value="4">blabla</option>
<option value="5">blabla</option>
<option value="6">blabla</option>

【讨论】：