DropDownList ใน MVC 4 ที่มีมีดโกน


142

ฉันพยายามที่จะสร้าง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 --"
)

7
คุณvar listItems = ...ควรอยู่ในคอนโทรลเลอร์ของคุณไม่ใช่มุมมองของคุณ
เลียม

1
นี่คือ MVC3 แต่เป็นไวยากรณ์เดียวกับ MVC4: stackoverflow.com/questions/5070762/…
Liam

2
@ เลียม: มันอาจจะเป็นในรูปแบบมุมมองไม่ใช่ในตัวควบคุม คอนโทรลเลอร์ไม่ควรพึ่งพาListItemเนื่องจากเป็นแนวคิดที่ผูกกับ UI มันไม่ควรแม้มันจะอยู่ในรูปแบบมุมมองเพียงในมุมมอง คอนโทรลเลอร์ควรสร้างรูปแบบมุมมองรูปแบบมุมมองควรมีข้อมูลมุมมองควรสร้างองค์ประกอบ UI (เช่นListItem) กับข้อมูลนั้น
David

2
มูลค่าของการใช้มีดโกนบน HTML ดั้งเดิมคืออะไร มันคือประสิทธิภาพหรือฟังก์ชั่น? เนื่องจากไม่มีการดึงข้อมูลจากคอนโทรลเลอร์
Barry MSIH

1
มีคนโปรดบอกฉันว่าสิ่งที่คุณสมบัติ model.tipo แสดงถึงในความหมายทั่วไป

คำตอบ:


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
หากคุณกำหนด List ในคอนโทรลเลอร์คุณต้องใช้ View เพื่อส่งมันเช่นนี้: @ Html.DropDownListFor (model => model.model_year, ViewBag.Years เป็นรายการ <SelectListItem>, "- เลือก Year -")
Bashar Abu Shamaa

4
ในบรรทัดสุดท้าย - คุณจะรู้รูปแบบการโทรได้อย่างไร? "tipo" มาจากไหน
อังเดร

2
@Andre มันเป็นชื่อของทรัพย์สินรูปแบบ เขาอ่านจากคำถาม ค่าจะผูกกับฟิลด์นั้น
Hrvoje T

คุณต้องระมัดระวังเนื่องจากไม่มีวิธีการโพสต์ใดทำการตรวจสอบฝั่งเซิร์ฟเวอร์ใด ๆ ต่อไปนี้เป็นโซลูชันที่สวยงามที่ดำเนินการตรวจสอบทั้งฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์เพื่อให้แน่ใจว่ามีการผ่านรายการข้อมูลที่ถูกต้องไปยังโมเดล 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"))

เพื่อให้ตัวอย่างนี้ใช้งานได้ฉันได้เพิ่มสิ่งนี้โดยใช้ด้านบนส่วนรหัสนี้ @ ใช้ System.Web.UI.WebControls;
Badar

42

คุณสามารถใช้สิ่งนี้:

@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
"tipo" คืออะไร?
Andre

1
@Andre สถานที่ให้บริการ Tipo ในรูปแบบ ดูโพสต์แรก
Gabriel Simas

1
ขอบคุณฉันยังไม่มีความคิดว่าเขาได้รับจากที่ไหน
อังเดร

22

// ViewModel

public class RegisterViewModel
{

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

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

    public string StudentGrade { get; set; }

  }

// ชั้น Enum:

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>

11

นี่คือคำตอบที่ง่ายที่สุด:

ในมุมมองของคุณเพียงเพิ่ม:

@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


8

เชื่อฉันฉันได้ลองตัวเลือกมากมายในการทำเช่นนั้น และฉันมีคำตอบที่นี่

แต่ฉันมักจะมองหาแนวปฏิบัติที่ดีที่สุดและวิธีที่ดีที่สุดที่ฉันรู้จนถึงตอนนี้สำหรับนักพัฒนาส่วนหน้าและส่วนหลังคือfor loop(ใช่ฉันไม่ได้ล้อเล่น)

เพราะเมื่อ front-end ให้คุณหน้า UI ที่มีข้อมูลดัมมี่เขายังได้เพิ่มคลาสและรูปแบบอินไลน์บางส่วนในตัวเลือกการเลือกที่เฉพาะเจาะจงเพื่อที่จะ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>

นี้จากนักพัฒนา front-end ดังนั้นทางออกที่ดีที่สุดคือการใช้สำหรับวง

อย่างแรงcreateหรือget your listข้อมูลจาก (... ) ใน Controller Action และใส่ไว้ใน ViewModel, ViewBag หรืออะไรก็ตาม

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

ประการที่สองในมุมมองทำแบบนี้ง่ายสำหรับการวนรอบเพื่อเติมรายการแบบเลื่อนลง

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

ด้วยวิธีนี้คุณจะไม่หยุดการออกแบบ UI และง่ายเรียบง่ายและอ่านง่ายขึ้น

หวังว่านี่จะช่วยคุณได้แม้ว่าคุณจะไม่ได้ใช้มีดโกนก็ตาม


7

การใช้อาร์เรย์จะมีประสิทธิภาพมากกว่าการสร้างรายการเล็กน้อย

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

อ้างอิง: - สร้างรายการดรอปดาวน์ในตัวอย่างมีดโกน MVC 4


4

เพียงแค่ใช้สิ่งนี้

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

3

หากคุณใช้ ASP.net 5 (MVC 6) หรือใหม่กว่าคุณสามารถใช้เครื่องช่วยแท็กใหม่สำหรับไวยากรณ์ที่ดีมาก:

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

คุณสามารถให้ตัวอย่างที่รายการเป็นแบบไดนามิกได้หรือไม่ สำหรับรายการคงไม่มีจุดที่จะใช้ตัวช่วยแท็ก และเลือกหนึ่งในตัวเลือก
user3285954

ประเด็นก็คือว่ามันเป็นข้อมูลที่ถูกผูกไว้ มันจะเลือกตัวเลือกที่ตัวแปรถูกตั้งค่าโดยอัตโนมัติและจะตั้งค่าตัวแปรเมื่อมีการส่งแบบฟอร์ม หากต้องการทำให้ไอเท็มมีชีวิตชีวาให้ทำมีดโกนใบหน้า
Bryan Legend


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

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.