Embed Size (px)
Citation preview
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!!!
