DropDownList trong MVC 4 với Dao cạo

Tôi đang cố gắng tạo ra một DropDownListcái nhìn dao cạo.

Ai đó sẽ giúp tôi với điều này?

Mã HTML5 thông thường:

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

Tôi đã thử điều 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 --"
)

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

Bạn có thể sử dụng điều 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"}
    })  

// ViewModel

public class RegisterViewModel
{

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

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

    public string StudentGrade { get; set; }

  }

// Lớp Enum:

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

// Bộ đ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 hành động

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

Đây là câu trả lời dễ nhất:

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

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

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

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

và quan điểm của 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

Hãy tin tôi, tôi đã thử rất nhiều lựa chọn để làm điều đó và tôi đã trả lời ở đây

nhưng tôi luôn tìm kiếm cách thực hành tốt nhất và cách tốt nhất mà tôi biết cho đến nay đối với cả nhà phát triển front-end và back-end là for loop(vâng tôi không đùa)

Bởi vì khi giao diện người dùng cung cấp cho bạn Trang UI với dữ liệu giả, anh ta cũng đã thêm các lớp và một số kiểu nội tuyến vào tùy chọn chọn cụ thể để hard to dealsử dụngHtmlHelper

Hãy nhìn vào điều 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>

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

thẳng thắn createhoặc get your listdữ liệu từ (...) trong Bộ điều khiển hành động và đặt nó vào ViewModel, ViewBag hoặc bất cứ thứ gì

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

Thứ hai trong khung nhìn, hãy thực hiện vòng lặp đơn giản này để điền vào danh sách thả xuống

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

bằng 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ễ đọc và dễ đọc hơn

Hy vọng điều này sẽ giúp bạn ngay cả khi bạn không sử dụng dao cạo

Sử dụng một mảng sẽ hiệu quả hơn một chút so với việc tạo một 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"}})

@{
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: - Tạo danh sách thả xuống trong ví dụ dao cạo MVC 4

chỉ sử dụng cái 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 Xem sử dụng sau đây.

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

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

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 xem viết mã sau đây.

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

Nếu bạn đang sử dụng ASP.net 5 (MVC 6) trở lên thì bạn có thể sử dụng Trình trợ giúp thẻ mới cho một cú pháp rất hay:

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

Điều này cũng có thể được thực hiện như

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