使用Razor的MVC 4中的DropDownList

142

我正在尝试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 --"
)
c#  asp.net-mvc  razor 
— 用户名
source
7
你var listItems = ...应该在你的控制器而不是你的视图中。
— 利亚姆
1
这是MVC3，但与MVC4的语法相同：stackoverflow.com/questions/5070762/…–
— Liam
2
@Liam：它可能属于视图模型，而不属于控制器。控制器不应该依赖于ListItemUI绑定的概念。它甚至不应该真正存在于视图模型中，而应该仅仅存在于视图中。控制器应构建视图模型，视图模型应包含数据，视图应为该数据构建UI元素（如ListItem）。
— David
2
在本地HTML上使用Razor有什么价值？是性能还是功能？由于没有数据从控制器中提取。
— 巴里MSIH，2014年
1
在一般意义上，请告诉我model.tipo属性代表什么。

Answers:

249 
@{
   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 --")
— 克列丹
source
2
如果在控制器中定义了列表，则需要在视图中对其进行转换，如下所示：@ Html.DropDownListFor（model => model.model_year，ViewBag.Years as List <SelectListItem>，“-Select Year-”）
— Bashar Abu Shamaa '16
4
最后一行-您如何知道要调用的模型？“ tipo”来自哪里？
— 安德烈'18
2
@Andre是模型属性的名称。他从问题中读到了它。该值绑定到该字段。
— 赫尔沃耶T
您必须小心，因为没有发布的解决方案执行任何类型的服务器端验证。这是一个优雅的解决方案，可同时执行客户端和服务器端验证，以确保将有效数据发布到模型中。stackoverflow.com/a/56185910/3960200
— 艾蒂安·查兰
73 
@{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"))
— 约翰·佩拉尔塔
source
为了使本示例正常工作，我在此代码段上方添加了此代码。@using System.Web.UI.WebControls;
— Badar
42

您可以使用此：

@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）
source
1
什么是“ tipo”？
— 安德烈
1
@安德烈 模型上的属性Tipo。看第一篇文章。
— 加布里埃尔·西马斯
1
谢谢，我仍然不知道他从哪里得到的
— 安德烈（Andre）
22

// ViewModel

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>
— 舒沃·萨克
source
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）一起学习的

— 艾曼
source
8

相信我，我已经尝试了很多选择来做到这一点 ，我在这里回答了

但我一直在寻找迄今为止对前端和后端开发人员都了解的最佳实践和最佳方式， for loop（是，我不是在开玩笑）

因为当前端为您提供带有伪数据的UI页面时，他还为特定的选择选项添加了类和某些内联样式，因此hard to deal使用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循环

首先create或get your list将Controller Action中的（...）中的数据放入ViewModel，ViewBag或任何其他内容中

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

其次，在视图中执行以下简单的for循环以填充dropdownlist

<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设计及其简单，易用和可读性

希望这对您有帮助，即使您没有使用剃刀

— Basheer AL-MOMANI
source
7

使用数组比创建列表更有效率。

@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"}})
— 布赖恩传奇
source
6 
@{
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剃刀示例中创建下拉列表

— 拉梅什布尔
source
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();
}

并在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）
source
3

如果您使用的是ASP.net 5（MVC 6）或更高版本，则可以使用新的Tag Helpers获得非常好的语法：

<select asp-for="tipo">
    <option value="Exemplo1">Exemplo1</option>
    <option value="Exemplo2">Exemplo2</option>
    <option value="Exemplo3">Exemplo3</option>
</select>
— 布赖恩传奇
source
您能否提供一个动态项目的示例？对于静态列表，没有必要使用标签助手。并选择一个选项。
— 2015年
关键是它是数据绑定的。它自动选择将变量设置为的选项，并在提交表单时设置变量。要使项目动态，只需执行剃刀foreach。
— 布赖恩·传奇
1

这也可以像 

@model IEnumerable<ItemList>

<select id="dropdowntipo">
    <option value="0">Select Item</option>
    
    @{
      foreach(var item in Model)
      {
        <option value= "@item.Value">@item.DisplayText</option>
      }
    }

</select>
展开摘要

— mut tony
source
0 

List<tblstatu> status = new List<tblstatu>();
            status = psobj.getstatus();
            model.statuslist = status;
            model.statusid = status.Select(x => new SelectListItem
            {
                Value = x.StatusId.ToString(),
                Text = x.StatusName
            });


  @Html.DropDownListFor(m => m.status_id, Model.statusid, "Select", new { @class = "form-control input-xlarge required", @type = "text", @autocomplete = "off" })
展开摘要

— 穆哈菲尔·赛义德
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.