使用Razor在MVC 4中的DropDownList
我试图在剃刀视图上创build一个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 --")
@{ 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 --")
@{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"))
你可以使用这个：
@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"} })
//视图模型
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>
这是最简单的答案：
在你看来只是添加：
@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学到了这一点
使用数组比创build列表更有效率。
@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"}})
@{ 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 4razor示例中创build下拉列表
相信我，我尝试了很多select来做到这一点，我在这里回答
但我一直在寻找最佳的做法
到目前为止我所知道的前端和后端开发人员的最佳方式是for loop （是的，我不是在开玩笑）
因为当前端给你带有虚拟数据的UI页面时，他还在特定select选项上添加了类和一些内联样式，所以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>
这从前端开发者如此最好的解决scheme是使用for循环
首先create或从控制器行动中获取（…）的数据get your list ，并将其放入ViewModel，ViewBag或任何
ViewBag.MembershipList = await _membershipAppService.GetAllMemberships();// this returns object that contain Items and TotolCount
其次在视图中做这个简单的循环来填充下拉列表
<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>
这样你就不会破坏UIdevise，而且它的简单，容易和更具可读性
希望这可以帮助你，即使你没有使用razor
如果您使用的是ASP.net 5（MVC 6）或更高版本，那么您可以使用新的Tag Helper来获得一个非常好的语法：
<select asp-for="tipo"> <option value="Exemplo1">Exemplo1</option> <option value="Exemplo2">Exemplo2</option> <option value="Exemplo3">Exemplo3</option> </select>
只是使用这个
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>)
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" })
