ASP.NET MVC DropDownList

Tạo DropDownList trên Razor View – ASP.NET MVC DropDownList

ASP.NET MVC DropDownList

Nhân tiện chào mừng luôn ngày mình mở thêm mục mới là C# ASP.NET 😀 (http://sethphat.com/sp-category/lap-trinh/asp-net)

Như các bạn đã biết, tại form, thì DropDownList aka Select Option (HTML) là một trong những control quan trọng.

Control này cho ta có thể tạo 1 list và để cho người dùng chọn.

Mình xin hướng dẫn 2 cách cơ bản để tạo ra 1 dropdownlist cho view của bạn nhé

1/ ASP.NET MVC DropDownList – Cách cơ bản

Với cách này, ta cũng làm như PHP, chỉ viết ra HTML tại Razor views và chạy loop để export data ra, cụ thể:

Tại views:

<select name="test">
	@foreach (var item in ViewBag.Item) {
		<option value="@item.ID">@item.NAME</option>
	}
</select>

Với ViewBag.Item là 1 mảng cấu trúc bạn truyền vào theo ý của bạn.

Đây là cách cơ bản nhất, còn nếu các bạn muốn check để cho cái option nào dc selected trước, bạn chỉ cần if ngay bên dưới foreach thôi 😀

2/ ASP.NET MVC DropDownList – Cách sử dụng SelectList

Đây là cách thứ 2 để mình có thể truyền data vào dropDownList, và có thể truyền vào giá trị selected luôn, khá ngon nhỉ 😀

Nhưng cũng vì cái ngon thì nó cũng fải hơi vất vả 1 chút so với cách trên

Nhưng cách này cũng là 1 cách hay để ta dễ quản lý, nâng trình, làm đẹp code

Tại Controller

Ta vẫn thực hiện get các dữ liệu từ database bình thường và sau đó tạo thôi.

// Lấy data
 // Lấy toàn bộ thể loại:
List<Category> cate = dbCate.Categories.ToList();

// Tạo SelectList
SelectList cateList = new SelectList(cate, "ID", "THELOAI_NAME");

// Set vào ViewBag
ViewBag.CategoryList = cateList;

SelectList sẽ có 2 dạng constructor như sau:

  1. SelectList(Enumerable, (string) column giá trị option, (string) column hiển thị)
  2. SelectList(Enumerable, (string) column giá trị option, (string) column hiển thị, (object) giá trị sẽ dc selected)

Tùy vào nhu cầu thì ta sẽ dùng 1 trong 2 nhé 😀

Tại View

Chỉ 1 dòng này là ta đã có thể tạo được dropDownList ra rồi

@Html.DropDownList("THELOAI", (IEnumerable<SelectListItem>) ViewBag.CategoryList, new { @class = "form-control" })

(Về các hàm Html, mình sẽ kể trong bài viết sau nhé)

Giải thích:

  1. THELOAI là tên của dropDownList (select name=…)
  2. IENumerable<SelectListItem> là ép lại kiểu(set lại kiểu) mà giá trị mình truyền vào. Bởi vì tất cả mọi thứ truyền vào ViewBag nó đều qua dạng dynamic, chúng ta cần fải ép kiểu để hàm này có thể hiểu.
  3. Cái cuối chỉ là thuộc tính html như class,… bổ sung thêm tùy các bạn.

Và chỉ vậy thôi, chúng ta đã tạo ra được 1 dropDownList theo 1 cách OOP-ly 😀

Cám ơn các bạn đã quan tâm theo dõi :D!

facebook
Seth Phát

Seth Phát

Mình là Phát - biệt danh Seth Phát. Hiện đang là một Sr. Full-Stack Engineer. Mình là một người yêu thích và đam mê lập trình và hiện tại đang theo về phần Web là chủ yếu. Mạnh Back-end và khá Front-end, vẫn đang theo đều cả 2 :v. Còn gì bằng khi được làm những thứ mà mình yêu thích, đam mê ;)

Bình luận qua Facebook