Chủ đề 5: HTML Helper -...
Transcript of Chủ đề 5: HTML Helper -...
![Page 1: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/1.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 1 HIENLTH
Chủ đề 5: HTML Helper
![Page 2: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/2.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 2 HIENLTH
Nội dung
1. Razor
2. MVC Helper
• HyperLink Helpers
• Form Helpers
• Model Helpers
3. Customer Helper
![Page 3: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/3.jpg)
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.
![Page 4: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/4.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 4 HIENLTH
Cú pháp Razor
![Page 5: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/5.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 5 HIENLTH
Cú pháp Razor
![Page 6: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/6.jpg)
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>
![Page 7: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/7.jpg)
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
![Page 8: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/8.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 8 HIENLTH
![Page 9: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/9.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 9 HIENLTH
2.1 Hyperlink Helper
![Page 10: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/10.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 10 HIENLTH
2.2 Form Field Helper
•Duy trì dữ liệu các trường form
![Page 11: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/11.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 11 HIENLTH
Ví dụ Form Helper
![Page 12: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/12.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 12 HIENLTH
2.3 DropDownList & ListBox
![Page 13: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/13.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 13 HIENLTH
Sinh mã HTML
![Page 14: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/14.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 14 HIENLTH
2.4 Sinh Form
![Page 15: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/15.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 15 HIENLTH
2.5 Helper định dạng
![Page 16: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/16.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 16 HIENLTH
Helper định dạng số
![Page 17: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/17.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 17 HIENLTH
Helper định dạng thời gian
![Page 18: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/18.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 18 HIENLTH
2.6 Mã hóa HTML
![Page 19: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/19.jpg)
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
![Page 20: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/20.jpg)
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
![Page 21: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/21.jpg)
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
![Page 22: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/22.jpg)
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
![Page 23: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/23.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 23 HIENLTH
3.4 Sinh giao diện ngầm định
![Page 24: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/24.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 24 HIENLTH
3.5 Kiểu Control
![Page 25: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/25.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 25 HIENLTH
3.6 Hiển thị Thông tin
![Page 26: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/26.jpg)
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
![Page 27: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/27.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 27 HIENLTH
4.1 Static Method
![Page 28: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/28.jpg)
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)
![Page 29: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/29.jpg)
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
![Page 30: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/30.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 30 HIENLTH
4.3 Mở rộng HTML Helper
![Page 31: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/31.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 31 HIENLTH
4.4 Sử dụng Helper
![Page 32: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/32.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 32 HIENLTH
4.5 Sử dụng @Helper
![Page 33: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/33.jpg)
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/
![Page 34: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/34.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 34 HIENLTH
Câu hỏi và thảo luận
![Page 35: Chủ đề 5: HTML Helper - comp1064.weebly.comcomp1064.weebly.com/uploads/1/6/9/3/16936172/session_5_-_html... · COMP1064 –NET Technology –MVC5 CH5 - 5 HIENLTH Cú pháp Razor.](https://reader030.fdocument.pub/reader030/viewer/2022021711/5b45a2b27f8b9a75778bcb4b/html5/thumbnails/35.jpg)
COMP1064 – NET Technology – MVC5 CH5 - 35 HIENLTH
Thank you!!!