DropDownList trong MVC 4 với Razor

Question

Tôi đang cố gắng tạo một DropDownList trên chế độ xem dao cạo.

Ai đó có thể giúp tôi với điều này không? đang

Bình thường HTML5:

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

Tôi cố gắng này:

@{ 
    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 --" 
) 

Answer 1

@{ 
    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 --") 

Answer 2

@{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")) 

Answer 3

Bạn có thể sử dụng này:

@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"} 
    }) 

Answer 4

Sử dụng một mảng sẽ hiệu quả hơn một chút so với việc tạo danh sách.

@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"}}) 

Answer 5

Nếu bạn đang sử dụng ASP.net 5 (MVC 6) hay muộn thì bạn có thể sử dụng new Tag Helpers cho một cú pháp rất đẹp:

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

Answer 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")) 

Tham khảo: - Create drop down list in MVC 4 razor example

Answer 7

// ViewModel

public class RegisterViewModel 
{ 

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

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

    public string StudentGrade { get; set; } 

    } 

// Enum Class:

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

// điều khiển hành động

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); 
    } 

// xem Action

<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> 

Answer 8

Dưới đây là câu trả lời đơn giản nhất:

theo quan điểm của bạn chỉ mới thêm:

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

HOẶC trong điều khiển của bạn thêm:

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

và xem bạn chỉ cần thêm:

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

Tôi học được điều này với Jess Chadwick

Answer 9

chỉ cần sử dụng này

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(); 
} 

và trong Chế độ xem sử dụng sau.

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

nếu bạn muốn lấy dữ liệu từ Tập dữ liệu và điền dữ liệu này vào hộp danh sách, hãy sử dụng mã sau.

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(); 

và trong chế độ xem viết mã sau.

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

Answer 10

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" })

Answer 11

Hãy tin tôi tôi đã cố gắng rất nhiều tùy chọn để làm điều đó and I have answer here

nhưng tôi luôn tìm kiếm những thực hành tốt nhất

và cách tốt nhất tôi biết cho đến nay cho cả nhà phát triển giao diện người dùng và chương trình phụ trợ là for loop (vâng tôi không đùa)

vì khi front-end cung cấp cho bạn các trang với dữ liệu giả UI ông cũng nói thêm lớp học và một số phong cách nội tuyến trên sự lựa chọn, cụ thể để hard to deal với rằng việc sử dụng HtmlHelper

mất cái nhìn lúc này

<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> 

này từ nhà phát triển front-end giải pháp vì vậy tốt nhất là sử dụng vòng lặp for

fristly create hoặc get your list dữ liệu fr om (...) trong điều khiển hành động và đặt nó trong ViewModel, ViewBag hoặc bất cứ điều gì

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

Thứ hai trong giao diện làm điều này đơn giản cho vòng lặp để cư trú trong 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> 

theo cách này bạn sẽ không phá vỡ thiết kế giao diện người dùng, và đơn giản, dễ dàng và dễ đọc hơn

hy vọng nó này giúp bạn ngay cả khi bạn không sử dụng dao cạo