DropDownList dalam MVC 4 dengan Razor


142

Saya mencoba membuat tampilan DropDownListpada pisau cukur.

Akankah seseorang membantu saya dengan ini?

Kode HTML5 normal:

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

Saya mencoba ini:

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

7
Anda var listItems = ...harus berada di controller Anda bukan View Anda.
Liam

1
ini adalah MVC3 tetapi sintaksinya sama dengan MVC4: stackoverflow.com/questions/5070762/…
Liam

2
@Liam: Ini mungkin milik model tampilan, bukan di controller. Pengontrol seharusnya tidak memiliki ketergantungan ListItemkarena ini adalah konsep UI-terikat. Seharusnya tidak benar - benar dalam model tampilan, hanya dalam tampilan. Pengontrol harus membangun model tampilan, model tampilan harus berisi data, tampilan harus membangun elemen UI (seperti ListItem) untuk data itu.
David

2
Apa nilai menggunakan Razor dibandingkan HTML asli; Apakah itu kinerja atau fungsionalitas? Karena tidak ada data yang ditarik dari controller.
Barry MSIH

1
Seseorang tolong beri tahu saya apa yang mewakili properti model.tipo, dalam arti umum.

Jawaban:


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

2
Jika Anda menetapkan Daftar di pengontrol, Maka Anda perlu di Tampilan untuk menampilkannya, seperti ini: @ Html.DropDownListFor (model => model.model_year, ViewBag. Tahun sebagai Daftar <SelectListItem>, "- Pilih Tahun -")
Bashar Abu Shamaa

4
Di baris terakhir - Bagaimana Anda tahu model apa yang harus dihubungi? Dari mana "tipo" berasal?
Andre

2
@Andre Ini adalah nama model properti. Dia membacanya dari pertanyaan. Nilai mengikat ke bidang itu.
Hrvoje T

Anda harus berhati-hati karena tidak ada solusi yang diposting melakukan segala jenis validasi sisi server. Berikut adalah solusi elegan yang melakukan validasi sisi klien dan sisi server untuk memastikan data yang valid diposting ke model. 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"))

Agar contoh ini berfungsi, saya menambahkan ini menggunakan di atas segmen kode ini. @menggunakan System.Web.UI.WebControls;
Badar

42

Anda bisa menggunakan ini:

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

1
Apa itu "tipo"?
Andre

1
@Andre. Tipo properti pada model. Lihat posting pertama.
Gabriel Simas

1
terima kasih, saya masih tidak tahu dari mana dia mendapatkannya
Andre

22

// ViewModel

public class RegisterViewModel
{

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

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

    public string StudentGrade { get; set; }

  }

// Kelas Enum:

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

// Aksi Pengendali

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

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

11

Inilah jawaban termudah:

dalam pandangan Anda cukup tambahkan:

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

ATAU di controller Anda tambahkan:

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

dan pandangan Anda cukup tambahkan:

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

Saya belajar ini dengan Jess Chadwick


8

Percayalah, saya telah mencoba banyak opsi untuk melakukan itu dan saya punya jawaban di sini

tapi saya selalu mencari praktik terbaik dan cara terbaik yang saya tahu sejauh ini untuk pengembang front-end dan back-end for loop (ya saya tidak bercanda)

Karena ketika front-end memberi Anda Halaman UI dengan data dummy ia juga menambahkan kelas dan beberapa gaya inline pada opsi pilih tertentu sehingga hard to dealdengan menggunakanHtmlHelper

Lihatlah ini:

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

ini dari pengembang front-end jadi solusi terbaik adalah menggunakan for for

fristly createatau get your listdata dari (...) di Action Controller dan letakkan di ViewModel, ViewBag atau apa pun

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

Kedua dalam tampilan lakukan ini sederhana untuk loop untuk mengisi daftar dropdown

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

dengan cara ini Anda tidak akan merusak Desain UI, dan itu sederhana, mudah dan lebih mudah dibaca

Semoga ini bisa membantu Anda bahkan jika Anda tidak menggunakan pisau cukur


7

Menggunakan array akan sedikit lebih efisien daripada membuat daftar.

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

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

Refer: - Buat daftar drop down dalam contoh pisau cukur MVC 4


4

cukup gunakan ini

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

dan di Lihat gunakan berikut.

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

jika Anda ingin mendapatkan data dari Dataset dan mengisi data ini dalam kotak daftar kemudian gunakan kode berikut.

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

dan dalam pandangan tulis kode berikut.

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

3

Jika Anda menggunakan ASP.net 5 (MVC 6) atau lebih baru, Anda dapat menggunakan Tag Helper baru untuk sintaks yang sangat bagus:

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

Bisakah Anda memberikan contoh di mana barang-barang itu dinamis? Untuk daftar statis, tidak ada gunanya menggunakan tag helpers. Dan buat salah satu opsi yang dipilih.
user3285954

Intinya adalah data terikat. Secara otomatis memilih opsi variabel diatur dan menetapkan variabel ketika formulir dikirimkan. Untuk membuat item menjadi dinamis, lakukan saja pisau cukur terlebih dahulu.
Bryan Legend

1

Ini juga bisa dilakukan seperti

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


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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.