ASP.NET MVC 3 – Tạo Declarative Html Helper (Razor Engine)

Trong bài trước tôi đã giới thiệu về loại Html Helper sử dụng thuần code server-side (C#, VB). Nhược điểm của loại helper này là việc tạo ra các mã html sẽ khó khăn và không trực quan. Trong phần này, ta tiếp tục tìm hiểu về loại helper khác cho phép sử dụng trực tiếp html kết hợp với Razor Engine. Loại helper này được gọi là Declarative Html Helper.

Loại helper này được tạo bằng cách sử dụng cú pháp khai báo @helper trong tập tin .cshtml (hoặc .vbhtml). Tương tự như bạn thiết kế một trang view với Razor Engine. Cách thức tạo một helper cũng tương tự như việc tạo một phương thức, bao gồm tên phương thức, tham số và thân phương thức.

Bắt đầu thực hiện, bạn tạo thư mục App_Code và thêm vào một tập tin MVC 3 Partial Page (Razor) với tên Helpers.cshtml.
Trong tập tin này, bạn gõ đoạn code bên dưới. Đoạn code này sẽ tạo ra một thẻ <input> (textbox) và <datalist> của html5 để làm dữ liệu cho chức năng autocomplete.
Khi người dùng nhập dữ liệu vào textbox, một danh sách các dữ liệu tương ứng sẽ hiển thị bên dưới textbox đó và cho phép người dùng chọn.
Helper có tên DataList này sẽ nhận hai tham số là name (id của datalist) và selectList (dữ liệu của datalist):

@helper DataList(string name, IEnumerable<System.Web.Mvc.SelectListItem> selectList)
{
    <input list="@name" />

    <datalist id="@name">
    @foreach (var item in selectList){
	    <option value="@item.Text" >@item.Value</option>
        }
    </datalist>
}

Trong đoạn mã trên, ta thấy sự hiệu quả của cú pháp Razor khi trộn lẫn code C# và html. Nó cho phép truy xuất các biến C# trực tiếp tại bất kì đâu trong mã html bằng cách dùng kí tự @. Đoạn mã trên sẽ tạo ra một datalist có các thẻ option bên trong tương tự như một dropdownlist.
Ta xác định dữ liệu sẽ sử dụng cho chức năng autocomplete của thẻ input bằng cách đặt giá trị của thuộc tính list là id của datalist.

Bây giờ, tại controller, ta sẽ tạo model để gán vào cho datalist. Trong controller Home và action Index (HomeController.cs):

public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.Message = "Welcome to ASP.NET MVC!";

        var list = new[]{   "Ice Age", "The Lion King", "The Incredibles",
                            "Toy Story", "Finding Nemo",
                            "Megamind", "Wall-E"
                        };

        var model = new List<SelectListItem>();
        for (int i = 0; i < list.Length; i++)
		{
            model.Add(new SelectListItem
            {
                Text = list[i],
                Value = i.ToString()
            });
		}

        return View(model);
    }
}

Đoạn mã trên sẽ tạo ra một đối tượng model có kiểu List để làm model cho trang view. Như vậy, trong trang Views/Home/Index.cshtml, ta chỉ cần gõ:

@Helpers.DataList(“cartoons”,Model)

Kết quả:

Code html sinh ra khi chạy trên trình duyệt:

 <input list="cartoons">
<datalist id="cartoons">
	<option value="Ice Age">0</option>
	<option value="The Lion King">1</option>
	<option value="The Incredibles">2</option>
	<option value="Toy Story">3</option>
	<option value="Finding Nemo">4</option>
	<option value="Megamind">5</option>
	<option value="Wall-E">6</option>
</datalist>

YinYangIt’s Blog