视图页面上的硬编码下拉列表

Question

我有一个字符串输入类型，我希望它保持字符串。但我希望用户在输入信息时从选项列表中进行选择。所以我想添加一个下拉列表，但我不知道该怎么做。我不想在后端创建任何模型或任何列表...我只想在视图上执行此操作。

这是我的初始代码：

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

Answer 1

我不确定你为什么要在视图中填充数据，但你想使用：

@Html.DropDownList

所以你的代码应该是……

<div class="form-group">
        @Html.LabelFor(model => model.EmployeeType, "Employee Type", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("EmployeeType", new SelectList(new List<string> { ... }, "EmployeeType", "SelectListName"), htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.EmployeeType, "", new { @class = "text-danger" })
        </div>
    </div>

显然，您需要以某种方式实际将您的字符串放入该列表。我个人会在控制器中创建或获取列表并将其传递到 ViewBag 中。那么你可以...

@Html.DropDownList("EmployeeType", new SelectList(ViewBag.EmployeeTypes, "EmployeeType", "SelectListName"), htmlAttributes: new { @class = "form-control" })

Answer 2

如果您不想使用任何 viewmodels/Html 辅助方法来呈现下拉列表，您可以简单地使用纯 Html。只需保留表单元素的名称并将其用作 HttpPost 操作方法的参数。

@using(Html.Beginform())
{
  <input type="text" name="userName"/>
  <select name="state">
    <option value="MI">Michigan<option>
    <option value="OH">Ohio<option>
  </select>
}

您的 HttpPost 操作将是

[HttpPost]
public ActionResult Register (string userName,string state)
{
  //check the parameter values now
  // to do : Save and redirect.
}

如果您已经将 ViewModel 对象作为 HttpPost 操作方法的参数，您可以添加 SELECT 元素名称作为第二个参数，它仍然有效。

[HttpPost]
public ActionResult Register (CreateUserVM model,string state)
{
  //check the parameter values now
  // to do : Save and redirect.
}

我不太确定您的确切用例，如果您要发布的表单元素超过 1 个或 2 个，我建议使用视图模型并依赖 MVC 模型绑定。 将下拉数据添加到视图模型并不难。

public class CreateUserVM
{
  public string UserName {set;get;}

  public List<SelectListItem> EmployeeTypes {set;get;}
  public int SelectedType {set;get;}
}

然后在您的 GET 操作方法中，加载 EmployeeTypes 集合并将其发送到视图

public ActionResult Create()
{
  var vm= new CreateUserVM();
  vm.EmployeeTypes = GetEmployeeTypes();
  return View(vm);
}
public List<SelectListItem> GetEmployeeTypes()
{
    return new List<SelectListItem>()
    {
        new SelectListItem
        {
            Value = "1",
            Text = "PERM"
        },
        new SelectListItem
        {
                Value = "2",
                Text = "Temporary"
            }
    };
}

在您看来，

@model CreateUserVM
@using(Html.BeginForm())
{
  @Html.TextBoxFor(v=>v.UserName)
  @Html.DropdownListFor(s=>sSelectedType,Model.EmployeeTypes,"Select one")
}

并且在您的 HttpPost 操作中，读取 SelectedType 属性以获取所选项目的值。

[HttpPost]
public ActionResult Register (CreateUserVM model)
{
  //check the model.SelectedType
  // to do : Save and redirect.
}

如果您不想在服务器端代码中对员工类型进行硬编码，请创建一个数据库 table 并将其存储在那里并在您的 GET 操作方法中读取它。这将允许您在不接触代码的情况下向系统添加新的员工类型。

Answer 3

看看这个例子：http://www.asp.net/mvc/overview/older-versions/working-with-the-dropdownlist-box-and-jquery/using-the-dropdownlist-helper-with-aspnet-mvc

以下是在视图中创建下拉列表的一些基本代码：

@{    
    var listitems = new List<SelectListItem>();
    listitems.Add(new SelectListItem() { Text = "One", Value="1"});
    listitems.Add(new SelectListItem() { Text = "Two", Value="2"});
}

@Html.DropDownList("DropDownListValue", listitems)

视图页面上的硬编码下拉列表

Hard coding dropdown list on the view page

c#

asp.net-mvc

html-select