TH03 - Lab3-Kỹ thuật sinh giao diện trong MVC (3t) - 2

RKING HARD & SMART TODAY FOR A BETTER TOMORROW Web kinh doanh 2
KỸ THUẬT SINH GIAO DIỆN

TRONG MVC
Trần Duy Thanh-thanhtd@uel.edu.vn Trang 1

Mục tiêu bài học

 Kiến thứ c:
 Trình bà y đượ c cá c kỹ thuậ t sinh giao diện trong MVC
 Hiểu đượ c cá ch vậ n hà nh củ a Razor, Helper, Model, Custom Helper
 Kỹ nă ng:
 Á p dụ ng đượ c cá c kỹ thuậ t để Sinh giao diện trong MVC

Nội dung bài học

1. Razor
2. MVC Helper
3. Custom Helper

1. Razor
 1.1. Định nghĩa
 1.2. Cá c cú phá p trong Razor

1.1. Định nghĩa

 Razor là ngô n ngữ ngắ n gọ n, rõ rà ng và hữ u ích cho phép tạ o ra cá c
giao diện ứ ng dụ ng ASP .NET MVC
 Trong khố i lệnh @{…} là mã C# hoặ c VB.NET trộ n HTML

1.2. Các Cú pháp trong Razor

 Cú phá p dạ ng Khố i mã :
@{
string rule1 = "Gấu luôn luôn đúng!";
string rule2 = "Gấu sai";
if (rule2 == "Gấu sai")
{ Bắ t buộ c phả i có {}, khô ng có sẽ bá o lỗ i:
rule2 = rule1; if (rule2 == "Gấu sai")
} rule2 = rule1;
string yourlife = rule2;
Response.Write(yourlife);
}


 Cú phá p dạ ng Biểu thứ c (đã mã hó a HTML):
@{
string message = "<font color='red'><b>Mr Đẹp Trai</b></font>";
}
<p>@message</p>


 Cú phá p dạ ng Biểu thứ c (chưa mã hó a HTML):
@{
string message = "<font color='red'><b>Mr Đẹp Trai</b></font>";
}
<p>@Html.Raw(message)</p>


 Cú phá p dạ ng Kết hợ p Text và HTML:


 Cú phá p dạ ng Trộ n Code và Text:


 Cú phá p dạ ng Khố i using:


 Cú phá p dạ ng Địa chỉ Email:
Hi thanhtd@uel.edu.vn


 Cú phá p dạ ng Biểu thứ c (tườ ng minh):
Your Age 47


 Cú phá p dạ ng Mã hó a ký hiệu @:


 Cú phá p dạ ng Chú thích phía Server:
Chạy lên trên Trình duyệt sẽ khô ng thấy khố i ghi chú này (view Coding),
nó khá c vớ i  vẫ n nhìn thấy ghi chú khi view coding

2. MVC Helper
2.1. Helper là gì?
2.2. HyperLink Helpers
2.3. Form Field Helpers
2.4. DropDownList & ListBox
2.5. Helper định dạ ng

2.1. Helper là gì?

 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 thà nh mộ t số nhó m
 Liên kết
 Form
 Sinh giao diện từ Model
 Kiểm lỗ i


 @Html.ActionLink() đượ c sử dụ ng để sinh liên kết, thườ ng lú c ta tạ o
View cho mộ t Action name nà o đó , MVC sẽ tự độ ng tạ o cá c ActionLink
để xem chi tiết, sử a, xó a, tạ o mớ i.
 Ví dụ :
 @Html.ActionLink("Create New", "Create")
 @Html.ActionLink("Edit", "Edit", new { id=item.Id })
 @Html.ActionLink("Details", "Details", new { id=item.Id })
 @Html.ActionLink("Delete", "Delete", new { id=item.Id })


 @Html.ActionLink() nhậ n mộ t số tham số :
 linkText: Nhã n củ a liên kết
 Actionname: Tên Action
 routeValues: Tậ p cá c giá trị truyền cho Action
 controllerName: Tên Controller
 htmlAttributes: Tậ p thuộ c tính HTML củ a thẻ <a>


Tạ o và duy trì dữ liệu cá c trườ ng Form:
Helper HTML
@Html.BeginForm() Tạ o thẻ mở <form>
@Html.EndForm() Tạ o thẻ đó ng </form>
@Html.CheckBox() Tạ o thẻ <input tye=“checkbox”>
@Html.TextBox() Tạ o thẻ <input tye=“text”>
@Html.Password() Tạ o thẻ <input tye=“password”>
@Html.Hidden() Tạ o thẻ <input tye=“hidden”>
@Html.RadioButton() Tạ o thẻ <input tye=“radio”>


Tạ o và duy trì dữ liệu cá c trườ ng Form:
Helper HTML
@Html.TextArea() Tạ o thẻ <textarea>
@Html.DropDownlist() Tạ o thẻ <select>
@Html.ListBox() Tạ o thẻ <select multiple>
@Html.Label() Tạ o thẻ <label>


 Ví dụ :


Nếu View đượ c tạ o tự độ ng từ Controller + Model Class(thườ ng dù ng):


Helper HTML
@Html.LabelFor() Tạ o Label binding thuộ c tính
@Html.EditorFor() Tạ o Textbox binding thuộ c tính
@Html.ValidationMessageFor() Tạ o cả nh bá o validation


<div class="form-group">
@Html.LabelFor(model => model.Ma, htmlAttributes: new { @class =
"control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Ma, new { htmlAttributes = new
{ @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Ma, "", new
{ @class = "text-danger" })
</div>
</div>


<div class="form-group">
@Html.LabelFor(model => model.Gender, htmlAttributes: new
{ @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
@Html.EditorFor(model => model.Gender)
@Html.ValidationMessageFor(model => model.Gender, "", new {
@class = "text-danger" })
</div>
</div>
</div>


Ngoà i ra ta cũ ng có thể
yêu cầ u View tạ o cá c
Control theo mong
muố n từ việc lự a chọ n
kiểu DataType trong
Model:


Chạy lên ta đượ c:
Nếu khô ng ra File control, ta
thêm @type =“file”:
@Html.EditorFor(model => model.Picture,
new { htmlAttributes = new {
@class = "form-control",
@type = "file" } })


Bả ng sau giả i thích cá ch dù ng DataType:
DataType Mô tả
DataType.CreditCard Chi cho phép nhậ p số thẻ tin dụ ng
DataType.Currency Hiển thị và tiếp nhậ n dạ ng tiền tệ
theo địa phương đượ c chọ n
DataType.Date Hiển thị và tiếp nhậ n dạ ng ngày
theo địa phương đượ c chọ n
DataType.DateTime Hiển thị và tiếp nhậ n dạ ng ngày và
giờ theo địa phương đượ c chọ n
DataType.Duration Sinh Slider trên thiết bị di độ ng
DataType.EmailAddress Chỉ cho phép nhậ p email


DataType Mô tả
DataType.Html Cho phép nhậ p mã HTML
DataType.ImageUrl Chỉ cho phép nhậ p địa chỉ ả nh
DataType.MultilineText Sinh ô nhậ p nhiều dò ng
DataType.Password Sinh ô nhậ p mậ t khẩ u
DataType.PhoneNumber Sinh phầ n tử nhậ p số điện thoạ i
trên thiết bị di độ ng
DataType.PostalCode Chỉ nhậ dạ ng postal code


DataType Mô tả
DataType.Text Nhậ p vă n bả n thô ng thườ ng
DataType.Time Ô nhậ p thờ i gian
DataType.Upload Ô nhậ p upload file
DataType.Url Chỉ chấ p nhậ n đị chỉ tà i nguyên


Ta có thể dù ng SelectList để lưu danh sá ch cho DropDownlist và ListBox:
Thuộ c tính là m Text
Thuộ c tính là m Value


Mã HTML đượ c tự độ ng sinh ra như sau:
<label for="dropListPerson">Chọn Nhân viên:</label>
<select id="dropListPerson" name="dropListPerson">
<option value="p1">An</option>
<option value="p2">Lành</option>
<option value="p3">Hạnh</option>
<option value="p4">Phúc</option>
</select>
<hr/>
<label for="listBoxPerson">Danh sách nhân viên:</label>
<select id="listBoxPerson" multiple="multiple" name="listBoxPerson">
<option value="p1">An</option>
<option value="p2">Lành</option>
<option value="p3">Hạnh</option>
<option value="p4">Phúc</option>
</select>

2.5. Helper định dạng

MVC cung cấ p mộ t số cá ch thứ c để định dạ ng dữ liệu.
Helper MÔ TẢ
@Html.FormatValue(value,format) Định dạ ng mộ t giá trị số , choỗ i hoặ c
thờ i gian
@Html.Format(format, value1, Định dạ ng nhiều giá trị hỗ n hợ p
value2…)
@Html.Raw(html) Giả i mã chuỗ i đã má hó a HTML


Cá c hà m Format trong MVC dự a và o cá c ký hiệu để định dạ ng dữ liệu:
Ký hiệu MÔ TẢ
{0:C} Currency – tiền tệ theo ngô n ngữ
{0:P} Percent- số phầ n tram
{0:#,###.##0) Number – số phâ n nhó m và 3 số lẻ
{0:D} Date- theo ngô n ngữ đượ c chọ n
{0:MMMM-dd-yyyy hh:mm:ss tt} Định dạ ng ngày thá ng nă m…
Google để tìm thêm


 Mộ t số ví dụ định dạ ng dữ liệu:
@{
double a = 123456.7890;
double b = 0.85;
}
<ul>
<li>Số bình thường: @a</li>
<li>Phân nhóm: @Html.FormatValue(a,"{0:#,###.##0}")</li>
<li>Tiền tệ: @Html.FormatValue(a,"{0:C}")</li>
<li>Tỉ lệ %: @Html.FormatValue(b,"0:P}")</li>
</ul>


 Mộ t số ví dụ định dạ ng dữ liệu:

3. Custom Helper
 Bên cạ nh cá c helper dự ng sẵ n, ta có thể tạ o 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

3.1. Static Method

 Trong Model tạ o 1 lớ p Utility có phương thứ c tĩnh ToUpper

3.2. Extention Method

 Là khả nă ng cà i cắ m cá c phương thứ c và o mộ t lớ p có sẵ n mà khô ng cầ n
chỉnh sử a hay kế thừ a lạ i lớ p cũ . Đây là mộ t trong nhữ ng tính nă ng tuyệt
vờ i củ a .Net
 Ví dụ :
 Cà i đặ t hà m NoiChuoi và o string
 Cà i đặ t hà m TimUocSo và o kiểu int
 Cà i hà m Submit và o HtmlHelper


 Cà i hà m ChuThuong
và o lớ p string
 Cà i hà m submit và o
HtmlHelper


 Cá ch sử dụ ng Extention method

3.3. Razor @Helper

 Ta có thể dù ng @Helper như dướ i đây để khai bá o cá c phương thứ c mở
rộ ng mộ t cá ch dễ dà ng:

Hey!
Coding
is easy!
END

TH03 - Lab3-Kỹ thuật sinh giao diện trong MVC (3t) - 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TH03 - Lab3-Kỹ thuật sinh giao diện trong MVC (3t) - 2

Uploaded by

Copyright:

Available Formats

RKING HARD & SMART TODAY FOR A BETTER TOMORROW Web kinh doanh 2

KỸ THUẬT SINH GIAO DIỆN

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 1

Mục tiêu bài học

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 2

Nội dung bài học

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 3

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 4

1.1. Định nghĩa

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 5

1.2. Các Cú pháp trong Razor

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 6

1.2. Các Cú pháp trong Razor

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 7

1.2. Các Cú pháp trong Razor

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 8

1.2. Các Cú pháp trong Razor

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 9

1.2. Các Cú pháp trong Razor

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 10

1.2. Các Cú pháp trong Razor

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 11

1.2. Các Cú pháp trong Razor

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 12

1.2. Các Cú pháp trong Razor

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 13

1.2. Các Cú pháp trong Razor

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 14

1.2. Các Cú pháp trong Razor

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 15

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 16

2.1. Helper là gì?

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 17

2.2. HyperLink Helpers

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 18

2.2. HyperLink Helpers

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 19

2.3. Form Field Helpers

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 20

2.3. Form Field Helpers

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 21

2.3. Form Field Helpers

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 22

2.3. Form Field Helpers

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 23

2.3. Form Field Helpers

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 24

2.3. Form Field Helpers

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 25

2.3. Form Field Helpers

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 26

2.3. Form Field Helpers

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 27

2.3. Form Field Helpers

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 28

2.3. Form Field Helpers

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 29

2.3. Form Field Helpers

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 30

2.3. Form Field Helpers

Trần Duy Thanh-thanhtd@uel.edu.vn Trang 31

2.4. DropDownList & ListBox

Thuộ c tính là m Text