使用Razor的MVC 4中的DropDownList

Question

使用Razor的MVC 4中的DropDownList

150

我正在尝试在 Razor 视图上创建一个 DropDownList。

有人能帮忙吗？

普通的 HTML5 代码：

<select id="dropdowntipo">
    <option value="Exemplo1">Exemplo1</option>
    <option value="Exemplo2">Exemplo2</option>
    <option value="Exemplo3">Exemplo3</option>
</select>

我尝试了这个：

@{
    var listItems = new List<ListItem> { 
        new ListItem { Text = "Exemplo1", Value = "Exemplo1" }, 
        new ListItem { Text = "Exemplo2", Value = "Exemplo2" }, 
        new ListItem { Text = "Exemplo3", Value = "Exemplo3" } 
    };
}

@Html.DropDownListFor(model => 
    model.tipo, 
    new SelectList(listItems), 
    "-- Select Status --"
)

- user2232273

7

你的var listItems = ...应该在控制器中而不是视图中。 - Liam

1

这是MVC3，但与MVC4相同的语法：https://dev59.com/Z2445IYBdhLWcg3wBl6J - Liam

2

@Liam：它可能属于视图模型，而不是控制器。控制器不应该依赖于ListItem，因为它是一个面向UI的概念。它甚至不应该真正地出现在视图模型中，只应该出现在视图中。控制器应该构建视图模型，视图模型应该包含数据，视图应该根据该数据构建UI元素（如ListItem）。 - David

2

使用Razor相比原生HTML的价值在于什么？是性能还是功能？因为没有从控制器中提取任何数据。 - Barry MSIH

1

有人能告诉我model.tipo属性在通用意义下代表什么吗？ - user4234032

显示剩余5条评论

13个回答

74

@{var listItems = new List<ListItem>
    {
          new ListItem { Text = "Exemplo1", Value="Exemplo1" },
          new ListItem { Text = "Exemplo2", Value="Exemplo2" },
          new ListItem { Text = "Exemplo3", Value="Exemplo3" }
    };
    }
        @Html.DropDownList("Exemplo",new SelectList(listItems,"Value","Text"))

- john Peralta

1

为了使这个示例工作，我在这段代码上面添加了以下内容。@using System.Web.UI.WebControls; - Badar

43

你可以使用这个：

@Html.DropDownListFor(x => x.Tipo, new List<SelectListItem>
    {
                        new SelectListItem() {Text = "Exemplo1", Value="Exemplo1"},
                        new SelectListItem() {Text = "Exemplo2", Value="Exemplo2"},
                        new SelectListItem() {Text = "Exemplo3", Value="Exemplo3"}
    })

- Gabriel Simas

2

"tipo"是什么？ - Andre

1

@Andre。模型上的属性Tipo。请查看第一篇帖子。 - Gabriel Simas

2

谢谢，不过我仍然不知道他从哪里得到那个。 - Andre

"Tipo" 在西班牙语中的意思是 "Type"。 - carloswm85

1

经过4年，终于有人回答了那个问题。很好。 - Jenna Leaf

22

//视图模型

public class RegisterViewModel
{

    public RegisterViewModel()
    {
        ActionsList = new List<SelectListItem>();
    }

    public IEnumerable<SelectListItem> ActionsList { get; set; }

    public string StudentGrade { get; set; }

  }

//枚举类：

public enum GradeTypes
{
    A,
    B,
    C,
    D,
    E,
    F,
    G,
    H
}

//控制器操作

 public ActionResult Student()
    {
RegisterViewModel vm = new RegisterViewModel();
IEnumerable<GradeTypes> actionTypes = Enum.GetValues(typeof(GradeTypes))
                                             .Cast<GradeTypes>();
        vm.ActionsList = from action in actionTypes
                         select new SelectListItem
                         {
                             Text = action.ToString(),
                             Value = action.ToString()
                         };
        return View(vm);
    }

//查看行动

 <div class="form-group">
                                <label class="col-lg-2 control-label" for="hobies">Student Grade:</label>
                                <div class="col-lg-10">
                                   @Html.DropDownListFor(model => model.StudentGrade, Model.ActionsList, new { @class = "form-control" })
                                </div>

- shuvo sarker

11

以下是最简单的答案：

在你的观点中只需要添加：

@Html.DropDownListFor(model => model.tipo, new SelectList(new[]{"Exemplo1",
"Exemplo2", "Exemplo3"}))

或者在您的控制器中添加：

var exemploList= new SelectList(new[] { "Exemplo1:", "Exemplo2", "Exemplo3" });
        ViewBag.ExemploList = exemploList;

并且你的观点只需要添加：

@Html.DropDownListFor(model => model.tipo, (SelectList)ViewBag.ExemploList )

我和Jess Chadwick一起学习了这个

- Ayman

10

相信我，我已经尝试了很多方法来完成这件事情，而我在这里找到了答案

但是我总是寻求最佳实践和我目前所知道的最佳方式，无论是前端还是后端开发人员都是使用for循环（是的，我没有开玩笑）

因为当前端提供带有虚拟数据的UI页面时，他还会在特定选择选项上添加类和一些内联样式，所以使用HtmlHelper处理起来非常困难。

看这个例子：

<select class="input-lg" style="">
    <option value="0" style="color:#ccc !important;">
        Please select the membership name to be searched for
    </option>
    <option value="1">11</option>
    <option value="2">22</option>
    <option value="3">33</option>
    <option value="4">44</option>
</select>

这是来自前端开发者的建议，最佳解决方案是使用 for 循环。

首先，在控制器操作中 创建 或 获取您的数据列表，并将其放入 ViewModel、ViewBag 或其他位置。

//This returns object that contain Items and TotalCount
ViewBag.MembershipList = await _membershipAppService.GetAllMemberships();

其次，在视图中使用简单的for循环来填充下拉列表。

<select class="input-lg" name="PrerequisiteMembershipId" id="PrerequisiteMembershipId">
    <option value="" style="color:#ccc !important;">
        Please select the membership name to be searched for
    </option>
    @foreach (var item in ViewBag.MembershipList.Items)
    {
        <option value="@item.Id" @(Model.PrerequisiteMembershipId == item.Id ? "selected" : "")>
            @item.Name
        </option>
    }
</select>

以这种方式，您将不会破坏UI设计，而且它简单、易懂、更易读

希望这可以帮助到您，即使您没有使用razor

- Basheer AL-MOMANI

谢谢兄弟，微软文档说你可以使用asp-items="[yourListHere]"，但我发现当我尝试时它根本没有显示任何内容。当我使用For Each循环时，所有内容都正确显示了。 - SendETHToThisAddress

8

使用数组比创建列表更高效一些。

@Html.DropDownListFor(x => x.Tipo, new SelectListItem[]{
                new SelectListItem() {Text = "Exemplo1", Value="Exemplo1"},
                new SelectListItem() {Text = "Exemplo2", Value="Exemplo2"},
                new SelectListItem() {Text = "Exemplo3", Value="Exemplo3"}})

- Bryan Legend

8

@{
List<SelectListItem> listItems= new List<SelectListItem>();
listItems.Add(new SelectListItem
    {
      Text = "One",
      Value = "1"
    });
listItems.Add(new SelectListItem
    {
        Text = "Two",
        Value = "2",
    });
listItems.Add(new SelectListItem
    {
        Text = "Three",
        Value = "3"
    });
listItems.Add(new SelectListItem
{
   Text = "Four",
   Value = "4"
});
listItems.Add(new SelectListItem
{
   Text = "Five",
   Value = "5"
});
}
@Html.DropDownList("DDlDemo",new SelectList(listItems,"Value","Text"))

参考：- 在MVC 4 Razor示例中创建下拉列表

- Rameshbl

4

如果您使用的是 ASP.net 5 (MVC 6) 或更高版本，则可以使用新标签助手来获得非常好的语法：

<select asp-for="tipo">
    <option value="Exemplo1">Exemplo1</option>
    <option value="Exemplo2">Exemplo2</option>
    <option value="Exemplo3">Exemplo3</option>
</select>

- Bryan Legend

1

你能提供一个项目动态的例子吗？对于静态列表，没有使用标签助手的必要。并且使其中一个选项被选中。 - user3285954

重点是它是数据绑定的。它会自动选择变量设置的选项，并在提交表单时设置变量。要使项目动态化，只需使用 Razor foreach。 - Bryan Legend

4

只需使用这个

public ActionResult LoadCountries()
{
     List<SelectListItem> li = new List<SelectListItem>();
     li.Add(new SelectListItem { Text = "Select", Value = "0" });
     li.Add(new SelectListItem { Text = "India", Value = "1" });
     li.Add(new SelectListItem { Text = "Srilanka", Value = "2" });
     li.Add(new SelectListItem { Text = "China", Value = "3" });
     li.Add(new SelectListItem { Text = "Austrila", Value = "4" });
     li.Add(new SelectListItem { Text = "USA", Value = "5" });
     li.Add(new SelectListItem { Text = "UK", Value = "6" });
     ViewData["country"] = li;
     return View();
}

在视图中使用以下内容。

 @Html.DropDownList("Country", ViewData["country"] as List<SelectListItem>)

如果你想从数据集中获取数据并将这些数据填充到列表框中，那么请使用以下代码。

List<SelectListItem> li= new List<SelectListItem>();
for (int rows = 0; rows <= ds.Tables[0].Rows.Count - 1; rows++)
{
    li.Add(new SelectListItem { Text = ds.Tables[0].Rows[rows][1].ToString(), Value = ds.Tables[0].Rows[rows][0].ToString() });
}
ViewData["FeedBack"] = li;
return View();

在视图中编写以下代码。

@Html.DropDownList("FeedBack", ViewData["FeedBack"] as List<SelectListItem>)

- Jeetendra Negi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- chridam · Accepted Answer

@{
   List<SelectListItem> listItems= new List<SelectListItem>();
   listItems.Add(new SelectListItem
        {
          Text = "Exemplo1",
          Value = "Exemplo1"
        });
   listItems.Add(new SelectListItem
        {
            Text = "Exemplo2",
            Value = "Exemplo2",
            Selected = true
        });
   listItems.Add(new SelectListItem
        {
            Text = "Exemplo3",
            Value = "Exemplo3"
        });
}

@Html.DropDownListFor(model => model.tipo, listItems, "-- Select Status --")