Làm thế nào để viết một Html.DropDownListFor () đơn giản?


133

Trong ASP.NET MVC 2, tôi muốn viết một danh sách thả xuống rất đơn giản cung cấp các tùy chọn tĩnh. Ví dụ: tôi muốn cung cấp các lựa chọn giữa "Đỏ", "Xanh lam" và "Xanh lục".

Câu trả lời:


188

Xem bài viết MSDN nàysử dụng ví dụ ở đây trên Stack Overflow .

Giả sử bạn có lớp Linq / POCO sau:

public class Color
{
    public int ColorId { get; set; }
    public string Name { get; set; }
}

Và hãy nói rằng bạn có mô hình sau:

public class PageModel 
{
   public int MyColorId { get; set; }
}

Và cuối cùng, hãy nói rằng bạn có danh sách các màu sau đây. Họ có thể đến từ một truy vấn Linq, từ một danh sách tĩnh, v.v.:

public static IEnumerable<Color> Colors = new List<Color> { 
    new Color {
        ColorId = 1,
        Name = "Red"
    },
    new Color {
        ColorId = 2,
        Name = "Blue"
    }
};

Theo quan điểm của bạn, bạn có thể tạo một danh sách thả xuống như vậy:

<%= Html.DropDownListFor(n => n.MyColorId, 
                         new SelectList(Colors, "ColorId", "Name")) %>

1
Điều đó thực sự rõ ràng. Tôi muốn biết tôi nên đặt IEnumerable <Color> ở đâu trong mã của mình? Tôi biết nó có vẻ ngu ngốc như câu hỏi nhưng tôi rất lạc lõng và mới mẻ trong đó: s
Rinesse

7
Đừng lo lắng, bạn ạ. Tôi biết cảm giác đó như thế nào. :) Như bạn đã đề xuất trong câu hỏi ban đầu của mình, đây có phải là danh sách tĩnh mà bạn sẽ tạo trong mã không, hoặc bạn sẽ lấy danh sách này từ cơ sở dữ liệu?
Evan Nagle

một danh sách tĩnh chứa 4 tùy chọn không phải là cơ sở dữ liệu
Rinesse

6
Tạo một lớp tĩnh gọi là "HtmlLists" hoặc một cái gì đó. Đặt lớp tĩnh trong không gian tên System.Web.Mvc. Trong lớp tĩnh của bạn, hãy thêm danh sách tĩnh của bạn về Màu sắc <Màu> IEnumerable. Sau đó, trên quan điểm của bạn, bạn có thể tham chiếu nó bằng cách gọi HtmlLists.Colors. Hy vọng rằng có ý nghĩa. Cho tôi biết. :)
Evan Nagle

2
Tôi không biết làm thế nào để làm điều đó: '(... Tôi không biết nên đặt Classe màu ở đâu và HtmlLists (trong thư mục mô hình có thể là gì?) Và làm thế nào để tham khảo trong chế độ xem. kết quả của danh sách trong một thuộc tính của viewModel..Tôi rất bối rối: /
Rinesse

61
<%: 
     Html.DropDownListFor(
           model => model.Color, 
           new SelectList(
                  new List<Object>{ 
                       new { value = 0 , text = "Red"  },
                       new { value = 1 , text = "Blue" },
                       new { value = 2 , text = "Green"}
                    },
                  "value",
                  "text",
                   Model.Color
           )
        )
%>

hoặc bạn có thể viết không có lớp, đặt một cái gì đó như thế này trực tiếp để xem.


2
Tôi nhận được lỗi dưới đây khi thử mã của bạn: "Tham chiếu đối tượng không được đặt thành phiên bản của đối tượng."
Bashar Abu Shamaa

12
ý tưởng tồi để thêm logic mô hình vào quan điểm của bạn
Daniël Tulp

34

Tránh nhiều ngón tay mập bằng cách bắt đầu với Từ điển trong Mô hình

namespace EzPL8.Models
{
    public class MyEggs
    {
        public Dictionary<int, string> Egg { get; set; }

        public MyEggs()
        {
            Egg = new Dictionary<int, string>()
            {
                { 0, "No Preference"},
                { 1, "I hate eggs"},
                { 2, "Over Easy"},
                { 3, "Sunny Side Up"},
                { 4, "Scrambled"},
                { 5, "Hard Boiled"},
                { 6, "Eggs Benedict"}
            };

    }


    }

Trong phần Xem, chuyển đổi nó thành một danh sách để hiển thị

@Html.DropDownListFor(m => m.Egg.Keys,
                         new SelectList(
                             Model.Egg, 
                             "Key", 
                             "Value"))

32

Xin chào, đây là cách tôi đã thực hiện trong một Dự án:

     @Html.DropDownListFor(model => model.MyOption,                
                  new List<SelectListItem> { 
                       new SelectListItem { Value = "0" , Text = "Option A" },
                       new SelectListItem { Value = "1" , Text = "Option B" },
                       new SelectListItem { Value = "2" , Text = "Option C" }
                    },
                  new { @class="myselect"})

Tôi hy vọng nó sẽ giúp được ai đó. Cảm ơn


12

Hoặc nếu đó là từ bối cảnh cơ sở dữ liệu bạn có thể sử dụng

@Html.DropDownListFor(model => model.MyOption, db.MyOptions.Select(x => new SelectListItem { Text = x.Name, Value = x.Id.ToString() }))

22
Xin đừng khuyến khích loại vô nghĩa này. Nếu bạn muốn tham khảo bối cảnh db của bạn trong các chế độ xem Dao cạo của bạn nhưng đối với những người trong chúng tôi thích xây dựng phần mềm theo cách chính xác thì đây là một ý tưởng tồi. Liên kết chế độ xem Dao cạo của bạn với lớp mô hình chế độ xem, mọi dữ liệu cần thiết cho chế độ xem được lưu trữ trong một phiên bản của mô hình chế độ xem được tạo bởi bộ điều khiển. Đây là một phần lý do khiến tôi rời xa .Net, quá nhiều nhà phát triển khủng khiếp làm những điều khủng khiếp với mã của họ gây đau đầu cho mọi người khác. Tôi cá là bạn đặt tất cả logic kinh doanh của bạn vào bộ điều khiển của bạn!
JBeckton

7
Đầu tiên, xin lỗi vì bất kỳ lỗi ngữ pháp nào vì tiếng Anh không phải là ngôn ngữ đầu tiên của tôi. Thật tuyệt khi thấy ai đó đưa ra một nhận xét xuyên suốt như vậy, tôi hoan nghênh bạn rằng bạn đã dành thời gian để đóng góp. Điều đó cũng luôn trấn an rằng nghề nghiệp của các nhà phát triển nằm trong tay những người giỏi như bạn, vì tôi sẽ không làm. Thích của bình luận không biết gì của bạn là lý do tại sao tôi không bao giờ đăng ở đây nữa. Tôi có thể thông báo cho bạn rằng khi tôi viết bài này, tôi đã học được 8 tháng và chưa bao giờ chạm vào Phát triển Web trước đó. Tôi muốn chia sẻ một lời khuyên khác với những kiến ​​thức nhỏ mà tôi có.
Joel Wahlund

7
8 tháng trong? Vậy thì tại sao phải cố gắng giải quyết vấn đề khi bạn không thể biết làm thế nào? Nhận xét của tôi là xa không biết gì, tôi thấy công cụ này ngày này qua ngày khác. Bạn phải bắt đầu xem xét số lượng công việc thủ công bạn có nghĩa vụ với các đồng nghiệp của bạn. hãy tưởng tượng bạn có một ứng dụng doanh nghiệp với hàng trăm lượt xem và CTO của bạn muốn chuyển sang Oracle DB. Hãy tưởng tượng chi phí theo nghĩa đen của việc tái cấu trúc tất cả các khung nhìn và bộ điều khiển sử dụng danh sách thả xuống chỉ vì một dòng mã của bạn! Tôi không cố gắng xúc phạm bạn, chỉ cố gắng giải thích cho bạn làm thế nào một lời khuyên tồi tệ có thể có tác dụng rất lớn.
JBeckton

2
Không khác gì cần phải cấu trúc lại các giải pháp dựa trên enum tĩnh. Ít nhất đó không phải là một thay đổi mã mỗi khi doanh nghiệp muốn thêm màu vào danh sách. Nếu nhiều người nghĩ về việc thực sự sử dụng cơ sở dữ liệu, thế giới sẽ là một nơi tốt hơn.
m12lrpv

3
Vâng, chủ đề này mang lại một nụ cười trên khuôn mặt của tôi khi tôi ghé thăm nó một lần trong một thời gian. Tôi hiểu điểm @SeanT tốt hơn một chút. Tôi đoán tôi chỉ cảm thấy bị tấn công nói chung khi tôi đang cố gắng giúp đỡ. Tôi thích bản thân mình ngày nay để giữ mọi thứ cách nhau bởi các lớp và không để bất cứ thứ gì chạm vào chế độ xem trừ khi nó được phân tách thành ViewModels. Nó chỉ là cách tôi thích làm bản thân mình. Tôi bảo vệ m12lrpv đưa tôi vào phòng thủ :-)
Joel Wahlund

7

Với "Vui lòng chọn một mục"

@Html.DropDownListFor(model => model.ContentManagement_Send_Section,
  new List<SelectListItem> { new SelectListItem { Value = "0", Text = "Plese Select one Item" } }
    .Concat(db.NameOfPaperSections.Select(x => new SelectListItem { Text = x.NameOfPaperSection, Value = x.PaperSectionID.ToString() })),
  new { @class = "myselect" })  

Bắt nguồn từ các mã: Lập trình viên chính && Joel Wahlund ;
Tham khảo về vua: https://stackoverflow.com/a/1528193/1395101 JaredPar ;

Cảm ơn Lập trình viên chính && Joel Wahlund && JaredPar ;

Chúc các bạn may mắn.


1
@using (Html.BeginForm()) {
    <p>Do you like pizza?
        @Html.DropDownListFor(x => x.likesPizza, new[] {
            new SelectListItem() {Text = "Yes", Value = bool.TrueString},
            new SelectListItem() {Text = "No", Value = bool.FalseString}
        }, "Choose an option") 
    </p>
    <input type = "submit" value = "Submit my answer" />
} 

Tôi nghĩ rằng câu trả lời này tương tự như của Berat, ở chỗ bạn đặt tất cả mã cho DropDownList của bạn trực tiếp trong chế độ xem. Nhưng tôi nghĩ rằng đây là một cách hiệu quả để tạo danh sách thả xuống ay / n (boolean), vì vậy tôi muốn chia sẻ nó.

Một số lưu ý cho người mới bắt đầu:

  • Đừng lo lắng về cái gọi là 'x' - lần đầu tiên nó được tạo ở đây và không liên kết với bất kỳ nơi nào khác trong ứng dụng MVC, vì vậy bạn có thể gọi nó là những gì bạn muốn - 'x', 'mô hình', 'm', v.v.
  • Trình giữ chỗ mà người dùng sẽ thấy trong danh sách thả xuống là "Chọn tùy chọn", vì vậy bạn có thể thay đổi tùy chọn này nếu muốn.
  • Có một chút văn bản trước phần thả xuống có nội dung "Bạn có thích pizza không?"
  • Đây phải là văn bản hoàn chỉnh cho một biểu mẫu, bao gồm cả nút gửi, tôi nghĩ

Hy vọng điều này sẽ giúp ai đó,

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.