DropDownList w MVC 4 z Razor

142

Próbuję stworzyć DropDownListwidok brzytwy.

Czy ktoś mógłby mi w tym pomóc?

Normalny kod HTML5:

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

Próbowałem tego:

@{
    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
źródło
7
Twój var listItems = ...powinien być w nie kontrolera widoku.
Liam
1
to jest MVC3, ale ma taką samą składnię jak MVC4: stackoverflow.com/questions/5070762/ ...
Liam
2
@Liam: Prawdopodobnie należy to do modelu widoku, a nie do kontrolera. Kontroler nie powinien mieć zależności od, ListItemponieważ jest to koncepcja związana z interfejsem użytkownika. Nie powinno to być nawet w modelu widoku, tylko w widoku. Kontroler powinien budować model widoku, model widoku powinien zawierać dane, widok powinien budować elementy UI (podobne ListItem) do tych danych.
David
2
Jaka jest wartość używania Razor zamiast natywnego HTML; Czy to wydajność czy funkcjonalność? Ponieważ żadne dane nie są pobierane z kontrolera.
Barry MSIH
1
Niech ktoś mi powie, co reprezentuje właściwość model.tipo w ogólnym sensie.

Odpowiedzi:

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 --")
chridam
źródło
2
Jeśli zdefiniowałeś Listę w kontrolerze, musisz ją rzucić w widoku, na przykład: @ Html.DropDownListFor (model => model.model_year, ViewBag.Years as List <SelectListItem>, "- Select Year -")
Bashar Abu Shamaa
4
W ostatniej linii - skąd wiesz, jaki model nazwać? Skąd się wzięło „tipo”?
Andre
2
@Andre To nazwa właściwości modelu. Przeczytał to z pytania. Wartość jest powiązana z tym polem.
Hrvoje T
Musisz uważać, ponieważ żadne z opublikowanych rozwiązań nie przeprowadza żadnego rodzaju weryfikacji po stronie serwera. Oto eleganckie rozwiązanie, które przeprowadza walidację zarówno po stronie klienta, jak i po stronie serwera, aby upewnić się, że prawidłowe dane są wysyłane do modelu. stackoverflow.com/a/56185910/3960200
Etienne Charland
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"))
john Peralta
źródło
Aby ten przykład działał, dodałem to, używając powyżej tego segmentu kodu. @using System.Web.UI.WebControls;
Badar
42

Możesz użyć tego:

@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
źródło
1
Co to jest „tipo”?
Andre
1
@Andre. Nieruchomość Tipo na modelu. Spójrz na pierwszy post.
Gabriel Simas,
1
dzięki, wciąż nie mam pojęcia, skąd to wziął
Andre,
22

// ViewModel

public class RegisterViewModel
{

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

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

    public string StudentGrade { get; set; }

  }

// Klasa wyliczeniowa:

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

// Akcja kontrolera

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

// wyświetl 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>
shuvo sarker
źródło
11

Oto najłatwiejsza odpowiedź:

Twoim zdaniem wystarczy dodać:

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

LUB w kontrolerze dodaj:

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

a Twój widok po prostu dodaj:

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

Nauczyłem się tego z Jess Chadwick

Ayman
źródło
8

Uwierz mi, wypróbowałem wiele opcji, aby to zrobić i mam tutaj odpowiedź

ale zawsze szukam najlepszych praktyk, a najlepszy sposób, jaki znam, zarówno dla programistów front-end, jak i back-end to for loop(tak, nie żartuję)

Ponieważ kiedy front-end daje ci strony interfejsu użytkownika z fikcyjnymi danymi, dodał także klasy i niektóre style wbudowane w określonej opcji wyboru, więc hard to dealużywającHtmlHelper

Spójrz na to:

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

to od programisty front-end, więc najlepszym rozwiązaniem jest użycie pętli for

fristly createlub get your listdanych z (...) w akcji kontrolera i umieścić je w ViewModel, ViewBag lub czymkolwiek

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

Po drugie w widoku wykonaj prostą pętlę for, aby zapełnić listę rozwijaną

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

w ten sposób nie zepsujesz UI Design, a jest on prosty, łatwy i bardziej czytelny

mam nadzieję, że to pomoże ci, nawet jeśli nie używałeś brzytwy

Basheer AL-MOMANI
źródło
7

Korzystanie z tablicy byłoby nieco bardziej wydajne niż tworzenie listy.

@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
źródło
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"))

Zobacz: - Utwórz listę rozwijaną w przykładzie maszynki do golenia MVC 4

Rameshbl
źródło
4

po prostu użyj tego

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

aw widoku użyj następujących.

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

jeśli chcesz pobrać dane z zestawu danych i wypełnić te dane w polu listy, użyj następującego kodu.

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

iw widoku napisz następujący kod.

@Html.DropDownList("FeedBack", ViewData["FeedBack"] as List<SelectListItem>)
Jeetendra Negi
źródło
3

Jeśli używasz ASP.net 5 (MVC 6) lub nowszego, możesz użyć nowych pomocników tagów, aby uzyskać bardzo ładną składnię:

<select asp-for="tipo">
    <option value="Exemplo1">Exemplo1</option>
    <option value="Exemplo2">Exemplo2</option>
    <option value="Exemplo3">Exemplo3</option>
</select>
Bryan Legend
źródło
Czy możesz podać przykład, w którym przedmioty są dynamiczne? W przypadku listy statycznej nie ma sensu używać pomocników tagów. I wybierz jedną z wybranych opcji.
user3285954
Chodzi o to, że jest powiązany z danymi. Automatycznie wybiera opcję, na którą ustawiono zmienną, i ustawia zmienną, gdy formularz jest przesyłany. Aby elementy były dynamiczne, po prostu zrób raz brzytwę.
Bryan Legend
1

Można to również zrobić jak

@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
źródło
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" })

Muhafil Saiyed
źródło