RSSAsp.net MVC

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.

ASP.NET Razor Engine logoTrong 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ẻ (textbox) và 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 selectList)
{
    

    
    @foreach (var item in selectList){
	    
        }
    
}

 

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 listid 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();
        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ả:

ASP.NET MVC 3  Razor- Declarative Html Helper - Datalist Html5

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

 

 

	
	
	
	
	
	
	

 

YinYangIt’s Blog

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu