Khoanglang89
Bạn hãy đăng nhập hoặc đăng ký
Khoanglang89
Bạn hãy đăng nhập hoặc đăng ký
Khoanglang89

NHẬN THIẾT KẾ WEBSITE/ SOFTWARE - LÀM ĐỒ ÁN TỐT NGHIỆP, ĐỒ ÁN CHUYÊN MÔN NGÀNH CÔNG NGHỆ THÔNG TIN


You are not connected. Please login or register

Khoanglang89 » Học tập » Lập trình » Asp/ Asp.Net » Mô hình ASP.Net MVC » ASP.NET MVC 3 – Tạo Declarative Html Helper (Razor Engine)

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

Admin

Admin

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

ASP.NET MVC 3 – Tạo Declarative Html Helper (Razor Engine) Asp-net-razor-engine-logo1Trong 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):
1
2
3
4
5
6
7
8
9
10
Code:
@helper DataList(string name, IEnumerable<
Code:
System.Web.Mvc.SelectListItem
Code:
> selectList)
Code:
{
    
Code:
<
Code:
input

Code:
list
Code:
=
Code:
"@name"

Code:
/>
 
    
Code:
<
Code:
datalist

Code:
id
Code:
=
Code:
"@name"
Code:
>
    
Code:
@foreach (var item in selectList){
        
Code:
<
Code:
option

Code:
value
Code:
=
Code:
"@item.Text"

Code:
>@item.Value</
Code:
option
Code:
>
        
Code:
}
    
Code:
</
Code:
datalist
Code:
>
Code:
}
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):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Code:
public
Code:
class

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

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

Code:
model =
Code:
new

Code:
List<SelectListItem>();
        
Code:
for

Code:
(int i = 0; i < list.Length; i++)
        
Code:
{
            
Code:
model.Add(
Code:
new

Code:
SelectListItem
            
Code:
{
                
Code:
Text = list[i],
                
Code:
Value = i.ToString()
            
Code:
});
        
Code:
}
 
        
Code:
return

Code:
View(model);
    
Code:
}
Code:
}
Đ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 – Tạo Declarative Html Helper (Razor Engine) Asp-net-mvc-3-razor-declarative-html-helper-datalist-html5
Code html sinh ra khi chạy trên trình duyệt:
1
2
3
4
5
6
7
8
9
10
Code:
<
Code:
input

Code:
list
Code:
=
Code:
"cartoons"
Code:
>
Code:
<
Code:
datalist

Code:
id
Code:
=
Code:
"cartoons"
Code:
>
    
Code:
<
Code:
option

Code:
value
Code:
=
Code:
"Ice Age"
Code:
>0</
Code:
option
Code:
>
    
Code:
<
Code:
option

Code:
value
Code:
=
Code:
"The Lion King"
Code:
>1</
Code:
option
Code:
>
    
Code:
<
Code:
option

Code:
value
Code:
=
Code:
"The Incredibles"
Code:
>2</
Code:
option
Code:
>
    
Code:
<
Code:
option

Code:
value
Code:
=
Code:
"Toy Story"
Code:
>3</
Code:
option
Code:
>
    
Code:
<
Code:
option

Code:
value
Code:
=
Code:
"Finding Nemo"
Code:
>4</
Code:
option
Code:
>
    
Code:
<
Code:
option

Code:
value
Code:
=
Code:
"Megamind"
Code:
>5</
Code:
option
Code:
>
    
Code:
<
Code:
option

Code:
value
Code:
=
Code:
"Wall-E"
Code:
>6</
Code:
option
Code:
>
Code:
</
Code:
datalist
Code:
>
YinYangIt’s Blog

https://khoanglang89.forumvi.com

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Khoanglang89 » Học tập » Lập trình » Asp/ Asp.Net » Mô hình ASP.Net MVC » ASP.NET MVC 3 – Tạo Declarative Html Helper (Razor Engine)

Bài viết mới cùng chuyên mục

    Bài viết liên quan vớiASP.NET MVC 3 – Tạo Declarative Html Helper (Razor Engine)

      Permissions in this forum:
      Bạn không có quyền trả lời bài viết