COMP1064 – NET Technology – MVC5 CH5 - 1 HIENLTH

Chủ đề 5: HTML Helper

COMP1064 – NET Technology – MVC5 CH5 - 2 HIENLTH

Nội dung

1. Razor

2. MVC Helper

• HyperLink Helpers

• Form Helpers

• Model Helpers

3. Customer Helper

COMP1064 – NET Technology – MVC5 CH5 - 3 HIENLTH

1. Razor•Razor là ngôn ngữ ngắn gọn, rõ ràng và

hữu ích cho phép tạo ra giao diện ứng dụng

ASP.NET MVC

•Trong khối lệnh @{…} là mã C# trộn với HTML.

COMP1064 – NET Technology – MVC5 CH5 - 4 HIENLTH

Cú pháp Razor

COMP1064 – NET Technology – MVC5 CH5 - 5 HIENLTH

Cú pháp Razor

COMP1064 – NET Technology – MVC5 CH5 - 6 HIENLTH

Model

•Sử dụng @model để sử dụng đối tượng model

bất cứ nơi nào trong view.

@model Student<h2>Student Detail:</h2><ul>

<li>Student Id: @Model.StudentId</li><li>Student Name: @Model.StudentName</li><li>Age: @Model.Age</li>

</ul>

COMP1064 – NET Technology – MVC5 CH5 - 7 HIENLTH

2. HTML Helper là gì?

•HTML Helper là các thành phần sinh giao diện

web phù hợp buộc dữ liệu với model để duy trì

thông tin trên các thành phần đó.

•Đơn giản việc viết mã sinh giao diện

•Helper được chia làm 1 số nhóm

Liên kết

Form

Sinh giao diện từ model

Kiểm lỗi

COMP1064 – NET Technology – MVC5 CH5 - 8 HIENLTH

COMP1064 – NET Technology – MVC5 CH5 - 9 HIENLTH

2.1 Hyperlink Helper

COMP1064 – NET Technology – MVC5 CH5 - 10 HIENLTH

2.2 Form Field Helper

•Duy trì dữ liệu các trường form

COMP1064 – NET Technology – MVC5 CH5 - 11 HIENLTH

Ví dụ Form Helper

COMP1064 – NET Technology – MVC5 CH5 - 12 HIENLTH

2.3 DropDownList & ListBox

COMP1064 – NET Technology – MVC5 CH5 - 13 HIENLTH

Sinh mã HTML

COMP1064 – NET Technology – MVC5 CH5 - 14 HIENLTH

2.4 Sinh Form

COMP1064 – NET Technology – MVC5 CH5 - 15 HIENLTH

2.5 Helper định dạng

COMP1064 – NET Technology – MVC5 CH5 - 16 HIENLTH

Helper định dạng số

COMP1064 – NET Technology – MVC5 CH5 - 17 HIENLTH

Helper định dạng thời gian

COMP1064 – NET Technology – MVC5 CH5 - 18 HIENLTH

2.6 Mã hóa HTML

COMP1064 – NET Technology – MVC5 CH5 - 19 HIENLTH

3. Sinh giao diện theo Model

3.1 Sinh giao diện động

•Dựa vào các đặc điểm của thuộc tính trong lớp

model để sinh ra giao diện người dùng.

• Sinh các control tường minh

• Sinh các control ngầm định

COMP1064 – NET Technology – MVC5 CH5 - 20 HIENLTH

3.2 Sinh giao diện tường minh

•Chỉ định loại control đối với các thuộc tính

COMP1064 – NET Technology – MVC5 CH5 - 21 HIENLTH

3.3 View

Sinh <input type=“text” name=“Id”id=“Id”> từ thuộc tính Id của Model

Sinh <label for=“Id”>Mã sinh viên</label>

Kiểu của Model

COMP1064 – NET Technology – MVC5 CH5 - 22 HIENLTH

3.4 Sinh giao diện ngầm định

•Tự sinh loại control phù hợp với đặc điểm của

thuộc tính của lớp model.

Helper Mô tả

Html.EditorFor(m=>m.Property) Sinh 1 control cho 1 thuộc tính.

Html.EditorForModel() Sinh toàn form theo các thuộc tính của Model

Html.Editor(object) Sinh toàn form theo các thuộc tính của Objectđặt trong ViewBag

COMP1064 – NET Technology – MVC5 CH5 - 23 HIENLTH

3.4 Sinh giao diện ngầm định

COMP1064 – NET Technology – MVC5 CH5 - 24 HIENLTH

3.5 Kiểu Control

COMP1064 – NET Technology – MVC5 CH5 - 25 HIENLTH

3.6 Hiển thị Thông tin

COMP1064 – NET Technology – MVC5 CH5 - 26 HIENLTH

4. Custom Helper

•Bên cạnh các helper dựng sẵn, bạn có thể tạo

cho mình các helper có mục đích cho riêng

mình.

•Trong MVC có 3 phương pháp tạo helper tùy

biến.

Custom Helper

Static Method

Extension Method

Razor @Helper

COMP1064 – NET Technology – MVC5 CH5 - 27 HIENLTH

4.1 Static Method

COMP1064 – NET Technology – MVC5 CH5 - 28 HIENLTH

4.2 Tạo HTML Helper tùy biến

•Phương thức tĩnh• Sử dụng: @String.Format("{0:F}", Model.Price)

•Phương thức mở rộng của HtmlHelper• Sử dụng: @Html.Submit(String label)

•Chỉ thị @helper để định nghĩa trực tiếp View

• Sử dụng: @Truncate(title, 20)

COMP1064 – NET Technology – MVC5 CH5 - 29 HIENLTH

4.3 Mở rộng HTML HelperQui ước Lớp được mở rộng

Sử dụng helpermới định nghĩa

Control sinh ra

COMP1064 – NET Technology – MVC5 CH5 - 30 HIENLTH

4.3 Mở rộng HTML Helper

COMP1064 – NET Technology – MVC5 CH5 - 31 HIENLTH

4.4 Sử dụng Helper

COMP1064 – NET Technology – MVC5 CH5 - 32 HIENLTH

4.5 Sử dụng @Helper

COMP1064 – NET Technology – MVC5 CH5 - 33 HIENLTH

Tham khảo

•Slide bài giảng MVC5, ThS. Nguyễn Nghiệm,

Nhất Nghệ.

•http://www.c-sharpcorner.com/article/html-

helpers-in-asp-net-mvc/

COMP1064 – NET Technology – MVC5 CH5 - 34 HIENLTH

Câu hỏi và thảo luận

COMP1064 – NET Technology – MVC5 CH5 - 35 HIENLTH

Thank you!!!