Lập trình web asp.net MVC

Tìm hiểu công nghệ ASP.NET MVC
Mục lục
Phần I.
1. Lịch sử phát triển Web
2. Lý do ra đời của ASP.NET MVC
2.1 Giới thiệu ASP.NET truyền thống
2.2 Nhược điểm ASP.NET truyền thống
2.3 Giới thiệu ASP.NET MVC (model-view-controller)
2.3.1 Nguồn gốc ASP.NET MVC
2.3.2 Các thành phần cấu thành ASP.NET MVC
2.3.3 Cấu trúc mặc định của một dự án ASP.NET MVC
2.4 So sánh giữa ASP.NET và ASP.NET MVC
2.5 MVC2
3. Tìm hiểu các thành phần bên trong ASP.NET MVC
3.1 Controllers và Actions
3.1.1 Controllers là gì ?
3.1.2 Controller Actions là gì ?
3.2 Views
3.2.1 Views là gì ?
3.2.2 Tạo Views như thế nào ?
3.2.2 Sử dụng Views như thế nào ?
3.3 Models
3.3.1 Models là gì ?
3.3.2 Tạo Database
Trang 1

3.3.3 Tạo Data Model với Microsoft Entity Framework
3.3.4 Sử dụng Linq to Sql trong ASP.NET MVC
1.5 URLs và Routing
1.6 View Master Page và User Control Page
1.a.1 View Master Page
1.a.2 User Control Page
3.7 HTML Helpers
1.a.1 HTML Helpers là gì ?
1.a.2 Các phương thức có sẵn trong HTML Helpers
1.a.3 Bổ sung các phương thức động trong HTML Helpers
3.8 Validation Form Data
1.a.1 Model State là gì ?
1.a.2 Validation Helpers
1.a.3 Validating with the IDataErrorInfo Interface
1.a.4 Style Validation Message
3.9 Model Binders và Action Filters
1.a.1 Model Binders
1.a.2 Action Filters
1.10 Chứng thực Users
1.11 Sử dụng Unit Test trong ASP.NET MVC
5. Triển khai ứng dụng ASP.NET MVC
6. Tích hợp Ajax vào ASP.NET MVC
7. Sử dụng jQuery trong ASP.NET MVC
8. Kết hợp giữa MVC và WebForms Phần II:
Xây dựng module website thực nghiệm: NHANLUCQUOCTE.EDU.VN

Trang 2

1. Con đường phát triển Web
Thời gian

Công nghệ

Sức mạnh

Yếu điểm

Jurassis

CGI

Đơn giản (lựa chọn duy
nhất vào thời điểm này)

Chạy bên ngoài web
server

Bronze age

IDC (Microsoft Internet
database connector)

Chạy bên trong server

Chì là đóng gói những
câu truy vấn SQL và
template cho các kết
quả có định dạng.

1996

ASP (Active Server
Page)

Mục đích chung

Thông dịch thời gian
thực

2002/ 2003

ASP.NET 1.0/1.1

-

-

2005

ASP.NET 2.0

Giao diện có
trạng thái

2007

ASP.NET Ajax

Đã được biên

-

2008

ASP.NET 3.5

dịch

Chiếm nhiều
bandwidth.
HTML khó nhìn

Không khả
năng test.

khuyến khích
lập trình hướng đối
tượng.

-

Cấu trúc file lớn
* CGI là một chuẩn có ý nghĩa là kết nối một web server với một chương trình có khả năng thực
thi độc lập, và nó trả về kết quả động.
2. Lý do ra đời của ASP.NET MVC
2.1

Giới thiệu ASP.NET truyền thống:

- Dựa trên nền .NET hỗ trợ đa ngôn ngữ như C#, VB.NET,…
- Microsoft hướng đến việc giấu đi giao thức HTTP (ẩn đi bản chất bên trong) và
code HTML bằng việc đưa ra mô hình UI (user interface) như là các đối tượng control phía
server (mỗi control có trạng thái của riêng mình, tự động sinh mã HTML khi cần, và tự động kết
nối với các sự kiện phía client).
- Các nhà phát triển Web không còn phải làm việc với các request và response
trong từng HTTP độc lập. Thay thế nó chính là thuật ngữ StateFull UI (tạm dịch là trạng thái giao
diện người dùng). Các nhà phát triển Web chỉ cần kéo-thả, và tưởng tượng ra điều gì sẽ xảy ra
trên server khi thiết kế giao diện Web.

Trang 3

2.2
Nhược điểm ASP.NET truyền thống: khi ứng dụng Webforms (dùng công
nghệ ASP.NET) được sử dụng trong thực tế đã sinh ra những nhược điểm sau:
-ViewState: là cơ chế chính để duy trì trạng thái qua mỗi lần request, điều này dẫn
đến một khối lượng dữ liệu lớn được truyền đi giữa client-server.
- Chu kì sống của 1 trang web: là cơ chế kết nối giữa trình điều khiển sự kiện
client và server, điều này có thể trở nên phức tạp, và dễ phá vỡ.
- Các control bị giới hạn trên mã HTML: vài control server sinh mã HTML,
nhưng đó không phải là mã HTML mà ta mong muốn. Ví dụ vài control servers sinh ra giá trị ID
phức tạp, và khó truy xuất bởi JavaScript.
- Cảm nhận sai trong việc phân tách code ra khỏi mã HTML bằng cách tạo codebehind bên dưới trang: Trong thực tế thì các nhà phát triển Web đã khuyến khích nên trộn việc
trình bày code (ví dụ: việc quản lý control phía server) với tính logic trong ứng dụng của họ (ví
dụ: thao tác cơ sở dữ liệu) với nhau. Tốt hơn hết là không nên tách riêng chúng ra vì kết quả
thường là khó hiểu và dễ vỡ.
- Không thể kiểm thử: Khi lần đầu tiên các nhà thiết kế ASP.NET đưa ra nền thiết
kế của họ, họ không thể lường trước việc kiểm thử sẽ trở thành xu hướng phát triển phần mềm
hiện nay. Và kiến trúc họ đã xây dựng thì hoàn toàn không phù hợp cho việc kiểm thử tự động.
* Và phiên bản ASP.NET 2.0 đã thêm vào một số components chuẩn nhằm giảm
sinh ra số lượng code bạn không mong muốn (bạn cần viết chúng). Và năm 2007, Microsoft cho
ra đời Web 2.0/Ajax, hỗ trợ nhiều hơn trong việc tương tác với client. Và phiên bản mới nhất cùa
ASP.NET là phiên bản 3.5 với một số tính năng mới được thêm vào như tích hợp một số controls
mới, ASP.NET dynamic data giúp việc tạo ra database tự động đơn giản hơn như (liệt kê, sửa, …
các mẫu tin trong database). Xa hơn nữa trong Visual Studio 2010 ASP.NET 4.0 sẽ cho các nhà
phát triển web tùy chọn các thành phần ID của HTML, nhằm giảm rắc rối về các giá trị ID phức
tạp và khó dự đoán trước.
2.3
Giới thiệu ASP.NET MVC : ASP.NET MVC là nền tảng công nghệ mới
nhất của Microsoft hiện nay là ASP.NET MVC, nó được thiết kế từ suy nghĩ là làm thế
nào để xây dựng một phần mềm tốt (phần mềm tốt là phần mềm bạn muốn tạo ra và nó
dễ dàng được thay đổi - Stephen Walther). ASP.NET MVC được thiết kế để làm sao có
thể bổ sung các nguyên lý và các patterns phát triển phần mềm khi xây dựng các ứng
dụng web. Bên cạnh đó, nó được thiết kế để hổ trợ trong việc kiểm thử.
2.3.1 Nguồn gốc ASP.NET MVC:
* ASP.NET MVC 1.0
Công nghệ ASP.NET MVC là mới, tuy nhiên nó có lịch sử
lâu đời. Nền tảng MVC được phát minh bởi Trygve Renskaug, ông đã viết
trang giấy đầu tiên nói về MVC vào năm 1978. Ban đầu nó được gọi là

Trang 4

Thing Model View Editor pattern, nhưng sau đó nó được đặt tên lại là
Model View Controller pattern.
ASP.NET MVC lần đầu tiên xuất hiện đó là trong dự án mã
nguồn mở MonoRail
Và nguồn gốc thật sự để cho ra đời công nghệ Microsoft
ASP.NET MVC là do Scott Guthrie (một trong những nhà sáng tạo ra
ASP.NET) trên chuyến bay đến Austin, Texas để nói về hội thảo Alt.NET
vào tháng 10-2007.
Cuối cùng thì đầu năm 2009 phiên bản ASP.NET MVC 1.0
(released) được ra đời.
-

Điều kiện cần để xây dựng ứng dụng ASP.NET MVC:

+ Microsoft.Net Framework 3.5 SP 1
+ Microsoft ASP.NET MVC
+ Visual Studio 2008 SP 1
2.3.2 Các thành phần cấu thành ASP.NET MVC: ứng dụng MVC (là từ viết tắt
của Model – View – Controler) được chia ra làm 3 phần:
- Model: Model của MVC chứa tất cả các logic của ứng dụng (ví dụ: xử
lý
cơ sở dữ liệu,…), không chứa trong view hay controller. Model chứa gồm các logic ứng dụng,
các logic nghiệp vụ, và logic truy xuất cơ sở dữ liệu. Model của MVC chứa mô hình các lớp (
mô hình đối tượng trong miền ứng dụng ).
- View: View của MVC chứa các thẻ HTML và view logic
- Controller: Controller của MVC chứa tính logic trong lưu đồ điều khiển
(control-flow).

Trang 5

Hình 2.1: Mô hình MVC (kí hiệu:

tương tác với) *

Lợi ích của ứng dụng web dựa trên mô hình MVC:
- Có tính mở rộng do có thể thay thế từng thành phần một cách dễ dàng
- Không sử dụng viewstate, điều này làm các nhà phát triển dễ dàng điều
khiển ứng dụng của mình.
- Hệ thống định tuyến mới mạnh mẽ
- Hỗ trợ tốt hơn cho test-driven development (TDD) cài đặt các unit tests
tự động, xác định và kiểm tra lại các yêu cầu trước khi bắt tay vào viết
code.
- Hỗ trợ kết hợp rất tốt giữa người lập trình và người thiết kế giao diện.
- Sử dụng các tính năng tốt nhất đã có của ASP.NET.
* Nhược điểm của ASP.NET MVC
Không hướng đến sự kiện làm cho các nhà phát triển
ASP.NET webform khó khăn.
-

Yêu cầu hiểu biết về HTTP, HTML, CSS và JavaScript.

-

Thư viện của nhà phân phối thứ ba không mạnh bằng.

2.3.3 Cấu trúc mặc định của một dự án ASP.NET MVC: các bước tạo 1 project
mặc định bằng ASP.NET MVC như sau:
Khởi động visual studio 2008, chọn File -> New -> Project ->
ASP.NET MVC
Web Application

Hình 2.2: Tạo mới dự án ASP.NET MVC

Hình 2.3: Tạo bộ test dự án
Sau khi dự án khởi tạo xong, ta có cấu trúc mặc định được tạo sẵn
bởi trình Visual như sau:

Trang 7

Hình 2.4: Cấu trúc mặc định 1 project ASP.NET MVC
* Ý nghĩa từng thư mục ứng dụng của ASP.NET MVC
App_Data: chứa các file dữ liệu, thư mục App_Data có thể
chứa một cơ sở dữ liệu cục bộ.
-

Content: chứa nội dung tĩnh như hình ảnh và các file css.

-

Controllers: chứa các lớp controller của ASP.NET MVC

-

Models: chứa các lớp model của ASP.NET MVC

Scripts: chứa các file javascript bao gồm thư viện ASP.NET
Ajax và jQuery.
sau :

Views: chứa các views của ASP.NET MVC
Sau khi chạy thử chương trình (ctrl+F5) sẽ cho kết quả như

Hình 2.5: Ứng dụng mặc định do visual tạo ra
2.4 So sánh giữa ASP.NET webform và ASP.NET MVC

Hình 2.5: Khung nền ASP.NET
.Net Framework: hỗ trợ các loại ứng dụng như desktop, web và các ứng dụng
console.
ASP.NET framework là một phần của .NET framework, được xây dựng nhằm hỗ
trợ các ứng dụng Web (caching, authentication và authorization).
Trong đó, Microsoft có 2 hướng phát triển web trên nền ASP.NET là ASP.NET
Webforms và ASP.NET MVC. Và ASP.NET MVC chỉ là sự thay đổi về mặt tư duy, nó
không hoàn toàn thay thế cho có ứng dụng ASP.NET Web Forms, và việc chọn hướng
nào để xây dựng một website là tùy thuộc vào các nhà phát triển.
Trang 9

* Sự khác biệt của ASP.NET MVC với ASP.NET 2.0
Tính năng

ASP.NET 2.0

ASP.NET MVC

Kiến trúc chương trình

Kiến trúc mô hình WebForm
è Business è Database.

Kiến trúc sử dụng việc phân
chia chương trình thành
Controllers, Models, Views

Cú pháp chương trình

Sử dụng cú pháp của
webform, tất các sự kiện và
controls do server quản lý.

Các sự kiện được điều khiển
bởi controllers, các controls
không do server quản lý.

Truy cập dữ liệu

Sử dụng hầu hết các công
nghệ truy cập dữ liệu trong
ứng dụng.

Phần lớn dùng LINQ to SQL
class để tạo mô hình truy cập
đối tượng.

Debug

Debug chương trình phải thực
hiện tất cả bao gồm các lớp
truy cập dữ liệu, sự hiển thị,
điều khiển các controls/

Debug có thể sử dụng các
unit test kiểm tra các phương
thức trong controller.

Tốc độ phân tải.

Tốc độ phân tải chậm khi
trong trang có quá nhiều
các controls vì ViewState
quá lớn.

Phân tải nhanh hơn do không
phải quản lý ViewState để
quản lý các control trong
trang.

Tương tác với
javascript.

Khó khăn

Dễ dàng

URL Address

Cấu trúc địa chỉ URL có
dạng

Cấu trúc địa chỉ rành
mạch theo dạng
Controllers/Action/Id

<filename>.aspx?&<các tham
số>

2.5 ASP.NET MVC 2

Trang 10

ASP.NET MVC 2 chỉ có thể chạy trên nền asp.net 3.5 sp1 và
asp.net 4. Chúng ta chỉ có thể triển khai asp.net mvc 2 trên visual studio 2010
hoặc visual studio 2008 sp1.
Được hổ trợ bởi các hệ điều hành như: Windows 7; Windows Server 2003; Windows
Server 2008; Windows Vista
-

Các đặc tính mới trong asp.net MVC 2:

+ New Strongly Typed HTML Helpers: Hỗ trợ diễn đạt lambda (lambda
expression) tham chiếu đến một mảng hay tập hợp nào đó.

Ví dụ:
Trang 11

Ngoài ra, ASP.NET MVC2 còn hỗ trợ thêm một số strongly-typed HTML như bên
dưới:

+ Overriding the HTTP Method Verb: HTTP verbs cho phép ta quyết định
liệu action (GET, POST, PUT, DELETE) nào sẽ được thực thi .

+ Enhanced Model Validation support both server and client thông qua bộ
Trang 12

thư viện javascript được tích hợp sẵn trong ASP.NET MVC 2
+ Auto-Scaffold UI Helpers with template customization: You can ensure
more maintainability as you modify your applications using strongly-typed helpers such
as Html.TexBoxFor. The new templated helpers let you easily associate HTML elements
for edit and display with data types improving productivity.
+ Asynchronous Controllers support
+ Support for rendering sub-sections of a page/site using
Html.RederAction

+ Lots of new helper functions, utilities, and API enhancements

+ Improved Visual Studio tooling support
+ Areas Support: cho phép chúng ta dễ dàng phân vùng, và gom nhóm các
chức năng thông qua ứng dụng MVC.

Trang 13

+ DataAnnotation Validation Support: kể từ phiên bản ASP.NET MVC 2,
microsoft đã xây dựng sẵn các DataAnnotation Validation nhằm quản lý các lỗi (rules)
trong các lớp model và viewmodel bên trong ứng dụng với 4 luật ( validation rules) đã
được xây dựng sẵn như: [Required], [StringLength], [Range], và [RegularExpression].
+ Bước 1: Khai báo lớp Person kèo theo các validation rules

Trang 14

+ Bước 2: Tạo action Create()

+ Bước 3: Tạo trang View

Trang 15

+ Bước 4: Chạy và kiểm tra kết quả

Tuy nhiên, validation rules ở trên mới chỉ thực hiện ở phía server, khi đó, để bắt
được validation rules thì đòi hỏi người dùng phải nhấn nút submit. Nhưng ASP.NET
MVC 2 đã xây dựng kiến trúc validation rules rất tuyệt vời bao gồm cả việc hỗ trợ
validation rules cả phía server lẫn client. Tất cả những gì chúng ta cần làm là thêm hai
tham chiếu javascrip là

Chạy thử và thu kết quả

Trang 16

Ngoài ra, ASP.NET MVC còn cho phép ta tự tạo các thuộc tính Validation, ví dụ,
chúng ta muốn xây dựng validation rule cho thuộc tính Email, đơn giản, ta chỉ cần kế
thừa từ lớp RegularExpressionAttribute

Và cách sử dụng thì giống như ví dụ đã làm trước đó
Nói tóm lại, ASP.NET MVC 2 đã bổ sung rất nhiều đặc tính mới, nếu có nhu cầu
tìm hiểu thêm, chúng ta có thể tham khảo tại website:
http://www.asp.net/learn/whitepapers/what-is-new-in-aspnet-mvc.
2.6 ASP.NET MVC 3
- ASP.Net MVC 3 chỉ có thể chạy trên nền asp.net 4, chúng ta chỉ có thể triển khai
asp.net mvc 3 trên visual studio 2010. Để tìm hiểu thêm về kế hoạch ra đời ASP.NET
MVC 3 cùng các đặc tính mới mà nó có thể hổ trợ, chúng ta có thể tham khảo tại website:
http://aspnet.codeplex.com/wikipage?title=Road %20Map&referringTitle=MVC.
3. Tìm hiểu các thành phần bên trong ASP.NET MVC
3.1 Controllers và Actions
3.1.1 Controllers là gì ?
- Controllers đảm nhận việc xử lý logic ở phía ứng dụng bao gồm việc
nhận giá trị đầu vào của ứng dụng, phát sinh các lệnh thực thi, nhận dữ liệu từ miền model, và
đưa người dùng đi đến những UIs khác nhau.

Trang 17

Hình 3.1: HomeController được tạo ra bởi Visual
* Từ hình 3.1 ta rút ra nhận xét rằng: khi user request vào trang index.aspx
thì controller sẽ xử lý yêu cầu của user bởi action “Index()”, khi user request muốn xem thông tin
website thì cotroller sẽ đáp ứng bằng việc gọi action “About()”

Hình 3.2: Controller đáp ứng request từ user
3.1.2 Controller Actions là gì ?
- Sau khi controller xác định và gọi action nào thì action đó có nhiệm vụ
trả kết quả về cho trình duyệt. Một controller có thể trả về một view, một file, hoặc đưa chúng ta
đến một action khác
* Controller action luôn trả về một ActionResult. Bộ khung ASP.NET
MVC bao gồm các kiểu trả về như sau:
Trang 18

Phương thức

Kiểu trả về

View()

ViewResult: miêu tả một view của ASP.NET MVC.

PartialView()

PartialViewResult: miêu tả một phần(fragment) của ASP.NET MVC view.

Redirect()

RedirectResult: Miêu tả chuyển hướng đến controller action hoặc URL khác

Content()

ContentResult: gửi nội dung thô về cho trình duyệt.

File()

FileResult: miêu tả một file đã được tải xong

RedirectToRoute()

RedirectToRouteResult: miêu tả chuyển hướng hoạt động đến controller action
hoặc URL sử dụng cùng giá trị định tuyến (route )

RedirectToAction()

Trả về một RedirectToRouteResult

Một số ví dụ:
a. Trả về một ViewResult

Hình 3.3: code trả về một ViewResult
b. Trả về một Redirect Result

Hình 3.4: code trả về một RedirectResult
c. Trả về một ContentResult

Trang 19

Hình 3.5: code trả về một ContentResult
d. Trả về một fileResult

Hình 3.6: code trả về một ContentResult

Hình 3.7: Kết quả chạy thử code ContentResult * Như vậy, qua cách
ví dụ trên ta biết được cách hoạt động của controller nhưng

Trang 20

làm thế nào cotroller nhận biết hai hàm cùng tên, gọi action nào hoạt động khi thao tác form dữ
liệu, hoặc yêu cầu các phương thức đặc biệt khi một nhận request từ Ajax
a. sử dụng AcceptVerbs: Thuộc tính AcceptVerbs ngăn chặn một action
được yêu cầu mà không có thao tác HTTP Post hoặc Get. Ví dụ

Hình 3.8
Ngoài ra, giao thức HTTP còn hỗ trợ một số thao tác HTTP khác nữa như:
options, head, put, delete, trace, connect. Chúng ta có thể thực thi các thao tác HTTP trên
khi thực thi request Ajax như sau:

Hình 3.9
b. sử dụng ActionName: ActionName được dùng để triển khai một action
với tên khác hơn là tên phương thức của nó. ActionName là hữu ích khi:
- Khi controller cần ghi đè phương thức cùng tên
- Khi một controller có các phương thức khác nhau nhưng chúng ta muốn
những phương thức này hoạt động như một phương thức cùng tên.

Trang 21

Ví dụ:

Hình 3.10
c. sử dụng ActionMethodSelector: đôi khi chúng ta muốn xây dựng các
thuộc tính của riêng mình và controller có thể gửi một action đến thuộc tính của chúng ta. Đơn
giản chúng ta chỉ cần xây dựng thuộc tính kế thừa lớp ActionMethodSelectorAttribute.
Ví dụ: đầu tiên ta xây dựng một lớp đơn giản được đặt tên là AjaxMethod,
lớp này ghi đè phương thức IsValidForRequest(). Nếu kết quả trả về là false thì phương thức
action sẽ không được yêu cầu

Hình 3.11

Trang 22

Hình
3.13

Hình 3.12

*Ngoại lệ điều khiển các action không tồn tại (handling unknown action):
Khi
một

action nào đó được khai báo trong controller, trong khi đó action này không thực thi được khi đó
nó phát sinh lỗi 404 Resource Not Found HTTP. Tuy nhiên, chúng ta có thể xử lý
lỗi này bằng cách ghi đè phương thức HandleUnknownAction()

Hình 3.14
Hình 3.15
3.2 Views
3.2.1 Views là gì ? View trong ứng dụng ASP.NET MVC được xem là giao diện
của ứng dụng, View có tác dụng trả về cho trình duyệt trang HTML khi người dùng ghé thăm
website của chúng ta. Views chứa các tag tương tự như HTML, chúng ta có thể đặt mọi thứ vào
trong view như hình ảnh, iframes, java applets, flash và silverlight.
3.2.2 Tạo Views như thế nào ? Cách tạo view dễ nhất là nhấp chuột phải vào
Trang 23

action nào đó trong controller chọn Add View

Hình 3.16 Thêm một view mơi tứ controller action

Hình 3.17 Sử dụng hợp thoại View (View Dialog)

Hình 3.18 Nội dung cơ bản của một view
- Trong view frmDangKi.aspx chúng ta vừa tạo chứa 2 tag <asp:content>,

Trang 24

tag <asp:content> đầu tiên sẽ xuất hiện trong tag <title> của văn bản HTML, tag <asp:content>
thứ hai sẽ xuất hiện trong tag <body> của văn bản HTML.
* Lưu ý: chúng ta có thể tích hợp các scrip vào trong view thông qua <%
%>

Hình 3.19 Cách chèn scripts vào trong view
3.2.2 Sử dụng Views như thế nào ?
- Đôi lúc chúng ta muốn truyền thông tin qua lại giữa View và Controller,
đơn giản chúng ta sử dụng cơ chế ViewData được hỗ trợ bởi ASP.NET MVC . Trong đó,
ViewData có thể miêu tả bất kỳ loại thông tin nào như strings, objects và các mẫu tin cơ sở dữ
liệu
-ViewData giống như kiểu từ điển, nó bao gồm cặp thuộc tính khóa và giá
trị, trong đó, khóa phải là chuỗi, còn giá trị có thể là bất kỳ kiểu dữ liệu gì.
- Khi sử dụng ViewData, chúng ta chú ý cần ép kiểu về kiểu dữ liệu mong
muốn, vì nó có thể chứa bất kỳ kiểu dữ liệu nào nên khi gán dữ liệu cho ViewData, ViewData tự
dộng gán về kiểu objects
- Ví dụ :

Trang 25

Hình 3.20 Cách tạo ViewData trong controller

Hình 3.21 Cách dùng ViewData trong View

Hình 3.22 Kết quả thu được
Nếu như chúng ta không muốn sử dụng view bằng cách ép kiểu, chúng ta có thể tạo một strongly
typed view, khi đó từ điển viewdata triển khai một thuộc tính được đặt tên là Model

Trang 26

Hình 3.23 Cách tạo strongly typed view

Hình 3.24 Bổ sung strongly typed view vào trong view

Hình 3.25 Cách sử dụng strongly typed data trong view
3.3 Models
3.3.1 Models là gì ?
- Models chứa tất cả các xử lý mang tính nghiệp vụ, tính logic trong truy
xuất cơ sở dữ liệu, cũng như tính hợp lệ trong ứng dụng. Nói cách khác, model chứa tất cả các
logic ứng dụng, ngoại trừ logic view và controller.
3.3.2 Tạo Database: để minh họa cách tạo DataModel, trước hết chúng ta cần biết
cách tạo cơ sở dữ liệu bao gồm các bước sau:
- Nhấp phải chuột vào thư mục App_Data, chọn Add, chọn NewItem

Trang 27

Hình 3.26
- Chọn Item Sql Server Database, và gõ Products.mdf vào textbox Name,
chọn Add

Hình 3.27
- Sau khi thêm mới cơ sở dữ liệu, nó sẽ nằm trong thư mục App_Data,
trong cửa sổ Server Explorer, nhấp phải chuột vào thư mục Tables, chọn Add New Table, Table
gồm 4 cột. Cột đầu tiên là Id là khóa chính và mang giá trị tự động tăng

Hình 3.28
3.3.3 Tạo Data Model với Microsoft Entity Framework
- Nhấp phải chuột vào thư mục Model trong cửa sổ Solution Explorer,
chọn Add, New Item.
- Trong hợp thoại Add New Item, trong Categories nhấp vào mục Data,
trong Templates nhấp chọn ADO.NET Entity Data Model, trong mục name gõ
DataModelProducts.edmx

Trang 28

Hình 3.29
- Trong bước choose model contents chọn item Generate From
Database,
nhấp Next

Hình 3.30
- Trong bước Choose your data connection, nhấp products.mdf cho data
connection, và gõ ProductsDBEntities cho việc thiết lập tên kết nối.

Trang 29

Hình 3.31
- Trong bước Your Database Object, chọn table Products và nhập tên
namespace là ProductsModel.

Hình 3.31
- Sau khi nhấn nút finish, kết quả là

Hình 3.32

Trang 30

Hình 3.33
* Giới thiệu các thao tác trên cơ sở dữ liệu sử dụng ProductsDBEntities và
class Product

Hình 3.34 Khai báo đối tượng thao tác trên CSDL
a. Hiển thị tất cả mẫu tin có trong cơ sở dữ liệu:
- Nhấp phải vào action Index trong controller Home chọn Add
View

Trang 31

- Tạo strongly-typed view và trong View Content chọn List, nhấn
Add

Hình 3.36
- Kết quả

Hình 3.37
b. Hiển thị một mẫu tin duy nhất
- Nhấp phải chọn add view cho action Details trong controller

Hình 3.38
Trang 33

Details

Hình 3.39
- Kết quả

Hình 3.40
c. Tạo mới mẫu tin
- Nhấp phải chọn add view cho action Create trong controller

Hình 3.41
Trang 34

Create

Hình 3.42
- Điền thông tin sản phẩm mới

Hình 3.43
-Kết quả

Hình 3.44
d. Chỉnh sửa mẫu tin
Trang 35

- Nhấp phải chọn add view cho action Edit trong controller

Hình 3.45
Edit

Hình 3.46
- Kết quả trước khi chỉnh sửa

Hình 3.47
- Chỉnh sửa thông tin sản phẩm

Trang 36

Hình 3.48
- Kết quả sau khi chỉnh sửa

Hình 3.49
e. Xóa mẫu tin
- Nhấp phải chọn add view cho action Delete trong controller

Hình 3.50
Delete

Hình 3.51
Trang 37

- Kết quả trước khi xóa

Hình 3.52

- Xem thông tin mẫu tin trước khi xóa

Hình 3.53
- Kết quả sau khi xóa

Hình 3.54
3.3.4 Sử dụng Linq to Sql trong ASP.NET MVC
Linq to sql được Microsoft giới thiệu năm
2007 như là một phần của .NET 3.5, nó được thiết kế để giúp chúng ta
giảm tải một số lượng lớn đoạn code cần viết khi thao tác truy xuất cơ sở
dữ liệu, và giúp chúng ta thoát khỏi gánh nặng trong việc tạo và duy trì
stored procedure cho mỗi loại query chúng ta cần thực thi. Nó là một công
cụ ORM(Objectrelational mapping), nó chưa tốt bằng Nhibernate, nhưng
đôi khi nó dễ dàng sử dụng.

Trang 38

Cách sử dụng Linq to Sql rất đơn giản, từ
trong môi trường Visual Studio, chúng ta kéo và thả các tables và stored
procedures vào trong tấm bạc(cửa sổ do visual tạo ra khi thao tác kéo thả
cơ sở dữ liệu), sau đó, chúng ta sử dụng các câu lệnh truy vấn Linq bên
trong code C#, và nhận lấy các thực thể này từ data context (nó chuyển
câu truy vấn từ Linq sang Sql lúc thực thi), thay đổi chúng bên trong C#,
sau đó gọi SubmitChanges() để viết những thay đổi này ngược trở lại cơ
sở dữ liệu.
-

Ví dụ :

a. Tạo cơ sở dữ liệu (dùng công cụ Sqlserver Express 2005). Sau khi tạo
xong cơ sở dữ liệu tạo có được như sau:

b. Xây dựng lớp newProduct có các thuộc tính tương ứng với cac column
trong bảng Products. Trong cửa sổ Solution Explorer, nhấp phải thư mục Models chọn Add,
Class, đặt tên class là newProduct.

Trang 39

c. Tạo một interface có phương thức được gọi là IproductRepository,
được
dùng để tạo ra một view hướng đối tượng lưu trữ ngầm định các giá trị của newProduct.

d. Để tránh viết các câu truy vấn Sql hoặc stored procedure, chúng ta cần
cài đặt và sử dụng Linq to Sql. Do chúng ta đã định nghĩa thực thể như là một lớp C# (Product),
bây giờ chúng ta có thể ánh xạ nó đến các bảng tương ứng trong cơ sở dữ liệu bằng cách thêm
một số thuộc tính mới như sau:
- Tham chiếu đến thư viện System.Data.Linq

- Update lớp Product như sau :

Trang 40

e. Tạo lớp SqlProductsRepository, đây là lớp dùng để kết nối đến cơ sở dữ
liệu thật sự của chúng ta.

f. Liệt kê các sản phẩm có trong cơ sở dữ liệu

Trang 41

g. Chạy thử ta được kết quả

* Bổ sung các thao tác CRUD (Create, Read, Update, Delete) cho
Controller

Bước 1: khởi tạo đối tượng kết nối cơ sở dữ liệu

Bước 2: thực hiện các thao tác CRUD
a. Liệt kê dữ liệu có sẵn (thao tác Read): thao tác này không có
gì
khác so với thao tác liệt kê dữ liệu có sẵn khi sử dụng kỹ thuật Microsoft Entity Framework khi
thao tác cơ sở dữ liệu
Trang 42

b. Cập nhật dữ liệu (thao tác Update): thao tác này khác với thao
tác trong Microsoft Entity Framework như sau:
- Chúng ta bổ sung phương thức SaveProduct(newProduct product)
trong lớp SqlProductRepository như sau:

- Khi thực hiện thao tác update cơ sỡ dữ liệu ta thực hiện như sau:

- Kết quả

c. Thêm mới sản phẩm
- Khai báo action Create() trong controller CRUD

Trang 43

- Trong trường hợp chúng ta muốn form luôn post đến action Edit
ta bổ sung thêm tham số như hình bên dưới

- Kết quả đạt được sau khi thêm mới là:

d. Xóa bớt sản phẩm
- Chúng ta bổ sung phương thức DeleteProduct(newProduct
product) trong lớp SqlProductRepository như sau:

- Khai báo sử dụng trong action Delete của controller CRUD

Trang 44

- Kết quả khi chạy chương trình

3.5 URLs và Routing
Khi chúng ta request một trang từ ứng dụng ASP.NET
MVC, thì request đó sẽ
được chuyển tiếp đến một controller nào đó trong ứng dụng. Và để thực hiện điều này chúng ta
cần đến tính năng gọi là Routing trong ứng dụng ASP.NET MVC
-

- Khi tạo mới một ứng dụng ASP.NET MVC, ta có file Global.asax như sau :

Tập tin Global.asax chứa hai phương thức chính được đặt
tên là
Application_Start() và RegisterRoutes(). Trong đó, phương thức Application_Start() chỉ được gọi
một lần duy nhất khi ứng dụng ASP.NET lần đầu tiên chạy, và công việc của nó đơn giản là gọi
phương thức RegisterRoutes()
-

Phương thức RegisterRoutes() thì được sử dụng để cấu
hình tất cả các routes
trong ứng dụng, và nó có route mặc định là:
-

Trang 45

-

Chúng ta cấu hình route mới bằng việc gọi phương thức
MapRoute(), phương

thức này chấp nhận các tham số sau:
+ Name: tên của route
+ URL: mẫu(pattern) url dành cho route
+ Defaults: giá trị mặc định cho các tham số route
+ Constraints: tập các ràng buộc nhằm giới hạn các request nhằm tìm ra
route phù hợp nhất.
+ Namespaces: tập các namespace nhằm giới hạn các lớp nhằm tim ra
route phù hợp nhất.
Phương thức MapRoute() có thể được ghi đè, chúng ta có
thể gọi phương thức MapRoute() mà không cần sự hỗ trợ của các tham số
Defaults, Contraints, hoặc namespace.
Tham số URL dành cho route Default có mẫu(pattern)
như sau {controller}/ { action}/{id}. Do đó, route mặc định dành cho URL có
những dạng như sau :
+ /Product/Insert/ 23
+ /Home/Index/ 1
+ /Do/Something/Useful
-

Và nó không so khớp với URL sau:
/Product/Insert/Another/Item. (Vì mẫu url

mặc định có 3 phần, trong khi ta request url 4 phần).
Mẫu URL {controller}/{action}/{id}, với tham số
controller, action là đặc biệt. ASP.NET MVC framework dùng tham số
controller để quyết định loại controller MVC nào được sử dụng để điều khiển
request từ client. Trong khi đó, tham số action miêu tả action nào được
controller sử dụng để response lại request do client yêu cầu.

Trang 46

Nếu chúng ta thêm vào các tham số không được đặt tên
controller hoặc action,
thì chúng được sử dụng như những tham số được truyền đến các controller action.
-

Theo mặc định, tham số controller có giá trị mặc định là
Home, tham số action
có giá trị là Index, và tham số id có giá trị là “” (chuỗi rỗng).
Ví dụ: với website http://www.mysite.com/product, các
tham số có giá trị tương
ứng là Controller = Product, Action = Index, Id = “”, và các giá trị này cũng áp dụng cho url:
http://www.mysite.com, hoặc ta có url sau: ~/Archive/12-25-1966, khi đó route có các giá trị
tham số như sau:
-

Sử dụng ràng buộc HttpMethod: đôi khi chúng ta muốn
ngăn cản URL đặc biệt
nào đó khỏi việc truy xuât khi thực thi một HTTP Get, không phải là thực thi HTTP Post.
-

Ngoài ra, ASP.NET MVC còn hỗ trợ một số ràng buộc (constraint) khác như:
Authenticated, NotEqual, Catch-ALL contrainst.
*Lưu ý: nếu trong fiel global.axas có nhiều route entry, thì hệ thống không hướng
đến việc tìm route nào phù hợp nhất, thuật toán của nó đơn giản là bắt đầu từ trên xuống, và
kiểm tra từng route, và dừng khi có route đầu tiên phù hợp.

Bởi vì, /DailySpecials/March-31 phù hợp với route đầu tiên nên route đầu tiên sẽ
được thực hiện.
Trang 47

3.6 View Master Page và User Control Page :
3.6.1 View Master Page: Mục đích chính của View Master Page là duy trì bố cục
trang trên toàn bộ website.
a. Tạo một view master page: Thông thường, master page phù hợp cho tất
cả các view, chúng ta tạo master page trong thư mục ViewsShared, nhấp phải chuột chọn Add,
New Item. Trong danh mục web chọn MVC View Master Page, sau đó nhấn nút Add

- Kết quả ta có được nội dung trang master page như sau:

b. Tạo view content page: sau khi tạo xong view master page, chúng ta có
thể tạo một hay nhiều view content pages dựa trên master page như sau:
Từ một action controller nào đó trong
controller, nhấn phải chuột chọn Add View.

Trang 48

-

Chọn master page, cái mà được áp dụng cho

view

- Kết quả thu được là:

c. Thiết lập master page từ Controller: Sự thuận lợi của phương thức này
Trang 49

là chúng ta có thể lựa chọn trang master động tại thời gian chạy
Ví dụ, giả sử ta có 2 trang master page là MP1 và MP2, ví dụ sau minh
họa bằng cách nào, chúng ta có thể lựa chọn trang master vào thời gian chạy.
- Bước 1: Khai báo thêm thuộc tính trong view

- Bước 2: Chạy thử và thu được kết quả sau

d. Các trang master page lồng nhau:

Trang 50

- Bước 1: Tạo master page 1

- Bước 2: Tạo trang master page 2, import master page 1

- Bước 3: tạo view sử dụng master page 2

Trang 51

- Bước 4: chạy thử và thu được kết quả

e. Truyền dữ liệu đến master page
- Bước 1: Tạo lớp cơ sở cho tất cả các controllers (Application
controller
chẳng hạn), khi đó, ta chỉ cần thay đổi view data chỉ trong lớp controller (việc xây dựng này
nhằm tránh nguyên lý DRY (Don’t Repeat Yourself): làm cho code của chúng ta dễ dàng duy trì).

Trang 52

- Bước 2: Tạo controller kế thừa từ controller ở trên

- Bước 3: Lấy dữ liệu trong view

Trang 53

- Bước 4: Kết quả thu được

3.6.2 User Control Page
a. Tạo view user control
- View user control miêu tả một phần của view. Mặt khác, user
control cho
phép chúng ta đóng gói nội dung trực quan (visual content) để mà cùng một nội dung có thể
được hiển thị trong nhiều view khác nhau. Một user control có thể chứa (X)HTML và script.
- Nhấn phải chuột vào thư mục ViewsShared (vì chúng ta muốn
sử dụng
user control trên nhiều views khác nhau), chọn Add, View

Trang 54

- Giả sử view user control này chứa danh sách các items mới như sau:

- Sau khi tạo xong một user control, chúng ta có thể sử dụng nó
trong view
bằng cách gọi phương thức Html.RenderPartial(). Lưu ý, vì Html.RenderPartial() không trả về
chuỗi, do đó ta dùng script <% %> thay vì sử dụng script <%= %>

Trang 55

- Và kết quả thu được là

b. Truyền dữ liệu từ controller đến ViewUserControl
- Bước 1: Thay đổi nội dung trang user view control như bên dưới

Trang 56

- Bước 2: Kết quả thu được

c. sử dụng View User Control như một template
- Bước 1: Tạo một controller mới (Lấy về một danh sách các mẫu tin trong
cơ sỡ dữ liệu)

- Bước 2: Tạo một View, dùng để hiển thị thông tin

Trang 57

Bước 3: Tạo một view user control dùng để trả về một hàng trong table

- Bước 4: kết quả thu được

Trang 58

3.7 HTML Helpers
3.7.1 HTML Helpers là gì ?
- HTML Helpers trong view, nó hoàn trả lại nội dung HTML, phần lớn nó
chỉ là phương thức trả về một chuỗi. Chúng ta có thể xây dựng ứng dụng ASP.NET MVC mà
không cần HTML Helpers, tuy nhiên, HTML Helpers giúp cho các nhà phát triển Web dễ dàng
thao tác hơn trong việc code HTML.
3.7.2 Các phương thức có sẵn trong HTML Helpers
- HTML.ActionLink(), nó không liên kết đến một view, thay vào đó nó
liên kết đến một action controller.

HTML.ActionLink() helpers có vài phương thức ghi đè với các
tham số như
+ linkText: tên link
+ actionName: là tên action controller mà link cần hướng đến
+ routeValues: tập các giá trị được truyền đến action
+ controllerName: là tên controller mà link cần hướng đến
Trang 59

+ htmlAttributes: tập các thuộc tính HTML được thêm vào link
+ protocol: giao thức dành cho link (ví dụ: HTTPs )
+ hostname: hostname dành cho link
+ fragment: fragment dành cho link. (ví dụ: để link tới một thẻ div
trong view với id là news, ta sẽ chỉ định news cho fragment

- Url.Action() helpers: dùng để tạo ra link dựa trên hình ảnh Ví dụ:

- Ngoài ra còn có các HTML Helpers khác như: BeginForm(),
CheckBox(), DropDownList(), EndForm(), Hidden(), ListBox(), Password(), RadioButton(),
TextArea(), TextBox().

Trang 60

- Html.BeginForm(): hoàn trả một form ở dạng HTML cho view.

Theo mặc định, Html.BeginForm() sẽ trả về một form ở dạng post
back tới cùng action controller. Nếu muốn post đến action khác, ta chỉ việc thay đổi các giá trị
tham số của phương thức BeginForm() như sau:
+ routeValues: tập các giá trị được truyền tới action
+ actionName: tên action mà form muốn post tới
+ controllerName: tên controller mà form muốn post tới.
+ Method: phương thức HTTP mà form post tới (các giá trị có thể
có của nó là POST hoặc GET, bạn không thể sử dụng các phương thức HTTP khác bên trong
HTML, chúng ta phải dùng Javascrip)
+ htmlAttributes: tập các thuộc tính HTML để thêm vào form
-Html.DropDownList() helper: hoàn trả một tập các mẫu tin trong cơ sở
dữ liệu về dạng tag <select> của HTML.
Ví dụ:
+ Bước 1: Xây dựng một danh sách các phần tử cho dropdownlist

+ Bước 2: khai báo sử dụng trong View

Trang 61

+ Bước 3: Kết quả

3.7.3 Bổ sung các phương thức động trong HTML Helpers
- ASP.NET MVC chỉ hỗ trợ một số HTML Helpers, đôi lúc chúng ta cần bổ sung
thêm một số helper mới. Thật may, ASP.NET MVC có hỗ trợ tính năng thêm mới helpers, giả
định ta xây dựng nút submit, các bước làm như sau:
1. Xây dựng phương thức nutSubmit() tĩnh thuộc lớp Helpers tĩnh như sau:

2. Để các view có thể nhìn thấy các phương thức helper bạn vừa mới tạo,
có 2 cách thực hiện
+ cách 1: khai báo namespace trong file web.config

+ cách 2: import trực tiếp vào trong view cần sử dụng helper bạn vừa mới
tạo
Trang 62

Giả sử ta gõ: <%= Html.nutSubmit("MyHelpers") %> Ta
được kết quả là:

* Ngoài ra ta có thể xây dựng một số helpers hữu ích như
1. TagBuilder: đây là lớp rất hữu ích trong ASP.NET MVC, chúng ta có thể sử
dụng chúng khi xây dựng HTML helpers, nó có các phương thức sau:
+ AddCssClass(): Cho phép chúng ta thêm một lớp mới đến 1 tag
+ GenerateId()- cho phép chúng ta thêm thuộc tính Id đến 1 tag
+ MergeAttribute()- cho phép chúng ta thêm thuộc tính đến tag, và có
nhiều phương thức ghi đè phương thức này.
+ SetInnerText()- Cho phép chúng ta thiết lập inner text của tag, chúng ta
có thể chỉ định rằng chúng ta sẽ tạo tag bình thường, tag bắt đầu, tag kết thúc, hoặc là tag tự đóng
cho chính nó.
Và lớp TagBuilder có 4 thuộc tính quan trọng sau:
+ Attributes: miêu tả tất cả các thuộc tính của tag
+ IdAttributesDotReplacement: miêu tả đặc điểm được sử dụng bởi
phương thức GenerateId()
+ InnerHTML: miêu tả nội dung bên trong của tag, việc gán 1 chuỗi đến
Trang 63

thuộc tính này không mã hóa chuỗi HTML.
+ TagName: miêu tả tên của tag
Ví dụ:
+ bước 1: Xây dựng một phương thức helper tự tạo được đặ tên là
PageLinks(…)

+ bước 2: khai báo sử dụng trong View

+ bước 3: kết quả đạt được

2. Sử dụng lớp HtmlTextWriter: HtmlTextWriter được xem như là sự thay thế
Trang 64

cho lớp TagBuilder mà ta đã xây dựng ở trên, dưới đây là một số phương thức đặc biệt dành cho
việc xây dựng chuỗi HTML.
+ AddAtrribute(): Thêm thuộc tính HTML, khi phương thức
RenderBeginTag() được gọi, thuộc tính này được thêm vào tag.
+ AddStyleAttribute(): Thêm thuộc tính style, khi phương thức
RenderBeginTag() được gọi, thuộc tính này được thêm vào tag.
+ RenderBeginTag(): hoàn trả việc mở tag HTML
+ RenderEndTag(): đóng tag cuối cùng được mở với RenderBeginTag ().
+ Write(): viết text đến luồng xuất dữ liệu(output stream).
+ WriteLine(): viết một dòng mới đến luồng xuất dữ liệu.
Ví dụ:
+ Bước 1: Xây dựng phương thức helper BulletedList(…)

+ Bước 2: Khởi tạo dữ liệu

+ Bước 3: khai báo sử dụng trong View

Trang 65

+ Bước 4: Kết quả

Nói tóm tắt, với khả năng cho phép tự tạo các HTML Helpers, chúng ta có thể tạo
ra vô số helpers hữu ích tùy vào từng trường hợp cụ thể.
3.8 Validation Form Data: Validation form data cho phép chúng ta kiểm tra xem liệu
người dùng đã nhập đúng dữ liệu được yêu cầu hay chưa. Và trong ASP.NET MVC, chúng ta
miêu tả lỗi hợp lệ (validation errors) của form bởi thuật ngữ model state dictionary.
3.8.1 Model State là gì ?Model state, bản thân nó giống như một cuốn từ điển,
chứa một tập các trạng thái mẫu (Model state), nhằm biểu diễn trạng thái của các thuộc tính đặc
biệt. Chúng ta truyền lỗi hợp lệ từ action controller đến view và ngược lại, bằng việc truyền
thông qua từ điển miêu tả trạng thái mẫu (model state dictionary). Cả hai lớp controller và view
đều chứa thuộc tính được đặt tên là ModelSate, thuộc tính này triển khai từ điển trạng thái mẫu
(exposes the model state dictionary).
3.8.2 Validation Helpers: là một trong số các cách bạn có thể sử dụng để phát
hiện tính không hợp lệ do người dùng nhập sai. Ví dụ
+ Bước 1: khai báo kiểm tra lỗi trong action testModelState trong
controller Home.

Trang 66

+ Bước 2: Khai báo form nhập liệu.

+ Bước 3: nhập thử dữ liệu là kiểm tra kết quả

Trang 67

Như ví dụ trên ta thấy rằng, lỗi hợp lệ được thêm vào model state với
phương thức AddModelError(), phương thức này chấp nhận 2 tham số: khóa và chuỗi thông báo
lỗi. Nếu bất kỳ lỗi nào được thêm vào model state, thuộc tính ModelState.IsValid trả về false,
ngược lại là true.
3.8.3 Validating with the IDataErrorInfo Interface: IdataErrorInfo interface là
cách thứ hai do ASP.NET MVC hỗ trợ trong việc giúp các nhà phát triển Web kiểm tra tính hợp
lệ, và Interface IdataErrorInfo có cấu trúc như sau:
public interface IDataErrorInfo
{
// Properties string
Error { get; }
string this[string columnName] { get; }
}

+ Bước 1: kế thừa interface IdataErrorInfo

Trang 68

+ Bước 2: Khai báo sử dụng trong action testModelState trong home
controller

+ Bước 3: Chạy thử và được kết quả như sau:

* Styling validation Error message: ASP.NET MVC còn hỗ trợ cho chúng ta một
số style css nhằm thay đổi màu sắc các textbox, listbox,… giúp người dùng dễ dàng quan sát vị
trí dữ liệu không hợp lệ như sau:

Trong đó,

Trang 69

+ field-validatioin-error: được áp dụng cho các tin nhắn lỗi được hoàn trả bởi
Html.ValidationMessage()
+ input-validation-error: được áp dụng cho các field của form được hoàn trả bởi
Html.TextBox() hoặc Html.TextArea().
+ validation-summary-errors: được áp dụng cho cả tag <span> và <ul>, nó được
hoàn trả bởi Html.ValidationSummary().
3.9 Model Binders và Action Filters
3.9.1 Model Binders: Một model binder có tác dụng ánh xạ một request từ
browser vào trong một đối tượng.
- Ví dụ: ta có một view chứa đựng một form HTML đơn giản cho việc
tạo
mới một sản phẩm sau:

- Khi chúng ta submit form, điều đó có nghĩa là chúng ta submit form
đến
action controller Create(newProduct product) trong controller Home như bên dưới:

Trang 70

- Như ví dụ trên ta thấy, action controller chấp nhận tham số Product.
Model binder ở đây là model binder mặc định, tương đương như việc tạo đối tượng mới cho lớp
Product. Model binder cũng điều khiển việc gán các giá trị của các field trong form HTML đến
các thuộc tính của lớp Product
- ASP.NET MVC cung cấp cho chúng ta 3 loại model binder khác nhau
như sau:
+ Model binder mặc định (default model binder )
+ Form collection model binder
+ HTTP posted file dựa trên model binder (HTTP posted file base
model binder)
a. Sử dụng Model Binder default: model binder mặc định đủ tốt để có thể
tạo ra các loại đối tượng khác nhau từ một request của browser, bao gồm các loại như:
+ Các kiểu thông dụng như: string, decimal, hoặc datetime.
+ Các class như Product hoặc Customer (những class tự xây dựng
)
+ Mảng như Product, string
+ Tập hợp như Ienumerable<T>, Icollection<T>, Ilist<T>, T[],
Collection<T>, và List<T>.
+ Từ điển như Idictinary<Tkey, Tvalue> và Dictionary<Tkey,
Tvalue>
*Sử dụng các thuộc tính của Bind
- Chúng ta co thể sử dụng các thuộc tính của Bind đối với các control,
nhằm báo cho model binder bằng cách nào chuyển một request vào trong một đối tượng, nó có
các thuộc tính sau:
+ Exclude: Cho phép chúng ta loại bỏ danh sách các thuộc tính
được phân cách bởi dấu phẩy ra khỏi binding.
+ Include: cho phép chúng ta thêm danh sách các thuộc tính được
phân cách bởi các dấu phẩy trong binding.
+ Prefix: cho phép chúng ta kết giao một tham số với một tiền tố
của 1 field trong form.
* Thông thường chúng ta hay sử dụng thuộc tính Exclude, ví dụ khi ta
thao tác cơ sở dữ liệu, trường ID là thuộc tính tự tăng, nên chúng ta không muốn bind một trường
Trang 71

trên form đối với thuộc tính này ví dụ như:

- Nếu như chúng ta không muốn exclude ProductID từ phương thức,
chúng ta có thể exclude ProductID ngay trong lớp Product như sau:

- Và khi xây dựng action controller Create, chúng ta không cần bổ sung
thuộc tính exclude nữa

b. sử dụng Form Collection Model Binder: như một sự thay thế cho model
binder mặc định, chúng ta có thể sử dụng form collection model binder để truyền các tham số từ
view đến action controller. Trong đó, form collection model binder miêu tả một tập các trường
của form không xác định kiểu.
Ví dụ: Trong action Create() chấp nhận tham số là một form collection.

Trang 72

Trong action này, chúng ta sẽ kết hợp các field của form với đối tượng của class Product

Trong ví dụ trên, phương thức UpdateModel() có tác dụng gán các trường
form tới đối tượng myProduct của lớp Product. Phương thức UpdateModel() hỗ trợ một số tham
số sau:
+ model: đối tượng hướng đến việc binding
+ prefix: chỉ các field của form với tiền tố này mới có thể được
bound với model
+ includeProperties: một mảng các thuộc tính được thêm vào khi
binding
+ excludeProperties: một mảng các thuộc tính được loại trừ khi
binding.
+ valueProvider: nguồn thông tin được sử dụng trong suốt quá
trình binding.
Và thật ra, chúng ta không cần truyền tham số form collection đến phương
thức UpdateModel(), mặc dù action Create không cần truyền tham số mà phương thức
UpdateModel() vẫn làm việc.

c. Sử dụng HTTP Posted file dựa trên Model Binder: Model binder này

Trang 73

cho phép ta truyền file đã được upload đến một controller action.

3.9.2 Action Filters
- Một action filter cho phép chúng ta thực thi code trong một số tình
huống sau:
+ Ngay trước khi một controller action được thực thi
+ Ngay sau khi một controller action được thực thi +
Ngay trước khi một kết quả action result được thực thi +
Ngay sau khi một kết quả action result được thực thi.
- Một action filter là một thuộc tính, chúng ta có thể áp dụng cho một
controller action hoặc toàn bộ controller. Ví dụ các thuộc tính như OutputCache, HandleError và
Authorize đều sử dụng action filters.
- Ví dụ, chúng ta xây dựng một action filters theo dõi các sự kiện action,
sau đó xuất ra của sổ output của Visual Studio.
+ Bước 1: Xây dựng lớp LogAttribute kế thừa từ lớp ActionFilterAttribute
và lần lượt ghi đè các phương thức như: OnActionExecuting, OnActionExecuted,

Trang 74

OnResultExecuted, OnResultExecuting

+ Bước 2: Khai báo sử dụng trong Controller

+ Bước 3: Chạy chế độ debug, ta có kết quả như sau:

3.10 Chứng thực Users
a. Tạo users
- Chứng thực users được sử dụng khi chúng ta chỉ cho phép các user hợp
Trang 75

lệ mới có thể truy cập vào website được. Chúng ta có 2 cách là, thứ nhất dùng website
administration tool, thứ hai là dùng Account controller.
+ Cách 1: Từ cửa sổ Visual Studio, chọn chọn Asp.net
configuration từ mục project. Sau khi website Administration tool khởi động xong, chúng ta có
thể tạo mới users cùng các quy tắc cho các users. (Lưu ý: hãy chắc chắn là ứng dụng của chúng
ta đã được biên dịch ít nhất 1 lần, nếu không sẽ xuất hiện lỗi “Could Not Load Type
‘ten_ung_dung’” khi chúng ta clik vào tab security)

+ Cách 2: sử dụng Account Controller: Nếu chúng ta cần tạo users
(không bao gồm các vai trò), chúng ta có thể sử dụng Account controller, cái này được thêm mặc
định vào ASP.NET MVC khi lần đầu tiên tạo ứng dụng MVC.
+ Tạo ứng dụng MVC mới, chạy nó
+ Nhấn vào link [Log On ]
+ Nhấn vào link Register

Trang 76

+ Hoàn thành form đăng kí để tạo user mới.
b. Chứng thực users: Nếu chúng ta chỉ muốn những user nào có vai trò cụ thể nào
đó mới có quyền truy cập vào các action controller, chúng ta sử dụng thuộc tính Authorize được
hỗ trợ sẵn trong ứng dụng MVC (Chúng ta có thể chứng thực trên từng action controller hoặc
trên toàn controller)

* Trong ví dụ trên, ta thực hiện chứng thực trên tất cả các user, nếu chúng ta chỉ
muốn chứng thực chỉ đối với một số user nào đó ta dùng như sau:

Như ví dụ trên ta thấy, chỉ có user “abc” là được quyền Delete Sản phẩm. Nếu
muốn cho phép nhiều users có khả năng dùng action Delete, ta chỉ cần thêm dấu phẩy ngăn cách
các users chẳng hạn như: [ Authorize(Users=”Jack,Jill” )]
c. Chứng thực user bằng vai trò của users: Để giới hạn một nhóm users nào đó
Trang 77

mới có khả năng sử dụng action controller nào đó, ta có thể sử dụng tính năng này. Ví dụ

* Như vậy cho đến bây giờ, ta vẫn không biết những user account chúng ta tạo ra
đang nằm ở đâu. Theo mặc định, username và password được lưu vào trong csdl SQL Express
được đặt trong file ASPNETDB.mdf, được đặt trong thư mục App_Data. Và file
ASPNETDB.mdf là file ẩn, để hiển thị ta làm như sau:

3.11 Sử dụng Unit Test trong ASP.NET MVC
- Khi tạo ứng dụng ASP.NET MVC mới, Visual nhắc nhở chúng ta thêm dự án
test vào cùng thời điểm tạo ứng dụng, và khung test mặc định là Visual Studio Unit Test.

Trang 78

- Có 2 cách để chúng ta có thể tạo 1 khối test mới
+ Cách 1:
1. Nhấp phải chuột vào thư mục Controller, chọn Add, New Test.
2. Trong hợp thoại Add New Test chon UnitTest.
3. Nhập tên khối Test của chúng ta, nếu chúng ta đang test cho
controller Product, ta đặt tên là ProductControllerTests.

4. Chọn nút OK
- Kết quả sau khi tạo khối test mới

+ Cách 2:
1. Nhấp phải chuột vào thư mục controller, chọn add, class.
2. Trong hợp thoại Add New Item, đặt tên lớp là MyClass_Test, và
chọn nút Add
Trang 79

3. Thay đổi class để class trở thành public
4. Thêm thuộc tính TestClass vào lớp mới tạo

* Hiểu các thuộc tính của Test
1. TestClass: đánh dấu một lớp như là một lớp chứa các phương thức test
2. TestMethod: đánh dấu một phương thức như là phương thức test
3. TestInitialize: đánh dấu một phương thức, được chạy ngay lập tức
trước mỗi phương thức test.
Thông thường thì một khối test đều kết thúc với một
assertion. Khung test do Visual Studio Unit Test tạo ra bao gồm ba loại lớp mà
bạn có thể sử dụng để thực hiện assertions là
+ Assert: lớp chính cho việc thực thi assertions
+ CollectionAssert: lớp này chứa đựng các phương thức assertion đặc biệt
cho tập các đối tượng.
Trang 80

+ StringAssert: lớp này chứa đựng các phương thức assertion cho chuỗi
Trong phần lớn các trường hợp, chúng ta sử dụng lớp
Assert, ví dụ Assert.AreEqual() để xác nhận các giá trị thật sự có bằng giá trị
mong đợi không. Sử dụng
Assert.IsInstanceOfType() để xác nhận một đối tượng đặc biệt có kiểu cụ thể nào đó không?
-

Nếu chúng ta làm việc với collection, chúng ta có thể sử

dụng lớp
CollectionAssert, ví dụ CollectionAssert.AreEqual() cho phép chúng ta kiểm tra xem hai tập hợp
có cùng các items theo cùng trình tự hay không. Còn CollectionAssert.AreEquivalent() kiểm tra
xem hai tập hợp có cùng items không, nhưng không cần thiết giống trình tự.
Cuối cùng, StringAssert cho phép chúng ta thẩm định về
chuỗi. Ví dụ, StringAssert.Contains() cho phép chúng ta kiểm tra xem một chuỗi
có chứa chuỗi con đặc biệt nào đó hay không, còn StringAssert.Matches() cho
phép chúng ta kiểm tra xem một chuỗi có phù hợp với mẫu biễu đạt qui tắc cụ thể
hay không?
chạy test như sau :

Visual Studio cung cấp cho chúng ta 4 tùy chọn cho việc

+ Chạy test ở chế độ ngữ cảnh hiện tại
+ Chạy tất cả các test trong Solution
+ Debug test ở chế độ ngữ cảnh hiện tại
+ Debug tất cả các test trong Solution
Ngữ cảnh được được xác định bằng vị trí con trỏ chuột. Ví
dụ, nếu chúng ta
nhấp vào phương thức myMethod() và lựa chọn test bằng current context, khi đó chỉ có phương
thức myThod() là chạy test.
lập điểm nhấn cho

Chạy test ở chế độ debug là hữu ích khi chúng ta cần thiết

việc test.

Ví dụ:
Tạo unit test đối với Controller và action: Giả sử một controller có 2 action là
Index() và ViewMaps(), nếu chúng ta gọi action ViewMaps() mà không truyền tham số id, khi đó
chúng ta nên quay về action Index()
Trang 81

Với mục đích trên, ta xây dựng khối test như sau:

Trang 82

5. Triển khai ứng dụng ASP.NET MVC
- Triển khai ứng dụng web đó là việc cài đặt ứng dụng web lên web server để nó có thể
được truy xuất bởi người dùng.
- Các yếu tố cần thiết cho việc triển khai ASP.NET MVC là
+ IIS phiên bản 5.1 trở lên
+ .Net framework phiên bản 3.5
5.1 Cài đặt IIS 7.0 trên window 7
- Vào control panel, chọn category Programs (Unistall a program) (Chế độ ViewBy là
Category), xuất hiện màn hình như sau:

- Xuất hiện hộp thoại

Trang 83

- Chọn các checkbox giống như hình trên, nhấn ok.
- Sau khi chọn xong, vào control panel, đổi chế độ viewby là Large icons, chọn mục
Administrative Tools

- Nhấn vào mục IIS ta thấy xuất hiện trình quản ly IIS như bên dưới

Trang 84

- Sau khi cài xong IIS, mở browser, gõ “localhost” vào thanh address ta được kết quả sau:

5.2 Ánh xạ ứng dụng web asp.net MVC
Có 2 cách:
a. Triển khai web mvc lên localhost bằng chính công cụ visual studio
- Nhấp phải chuột vào project, chọn property
Trang 85

- Xuất hiện cửa sổ thuộc tính, và cấu hình như hình bên dưới

- Sau khi chọn xong, nhấn vào nút Create Virtual Directory
- Kết quả sau khi visual studio thực hiện đưa web lên localhost.

Trang 86

b. Triển khai web trên localhost bằng trình quản lý IIS
- Vào trình quản lý IIS, chọn như hình bên dưới

Trang 87

- Nhập thông tin như bên dưới

- Sau khi nhập xong thông tin, nhấn ok, sau đó nhấp phải vào thư mục vừa mới tạo, và
chọn Convert to Application.

- Cuối cùng, nhấp phải chuột vào ứng dụng web như hình bên dưới, và ta thu được kết
quả như cách làm 1.
Trang 88

6. Tích hợp Ajax vào ASP.NET MVC
6.1 Ajax là gì ?
–
–
–

–

Asynchronous JavaScript and XML
AJAX là kỹ thuật để tạo ra trang web nhanh và động.
AJAX cho phép trang web update bất đồng bộ bởi sự thay đổi một số lượng nhỏ của
dữ liệu với thông tin được lấy từ server. Nghĩa là nó có thể upadate một phần trang
web mà không cần load lại trang.
Các ứng dụng sử dụng ajax: Google Maps, Gmail, Youtube, and Facebook tabs.

6.2 Ajax hoạt động như thế nào ?

Trang 89

6.3 Ajax sử dụng kết hợp của
a. Đối tương chính của AJAX là XMLHttpRequest.
- Hầu hết các trình duyệt điều hổ trợ đối tượng XMLHttpRequest(IE5 và IE6 sử
dụng ActiveXObject)
- Đối tượng XMLHttpRequest đươc sử dụng để request thông tin từ server.
- Đẻ tạo đối tương XMLHttpRequest cho các trinh duyệt bạn sử dung doạn code
sau
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET",url,false);
// Do not send null for ActiveX
xmlhttp.send();
}
document.getElementById('test').innerHTML=xmlhttp.responseT
ext;
}

b. JavaScript/DOM : Được sử dụng để hiển thị và tương tác dữ liệu.
c. XML: Thường sử dụng như là định dạng để truyền dữ liệu.
Trang 90

6.4 Send an AJAX request to a Server
Để gửi request đến server, bạn sử dụng phương thức open() và send() của đối
tượng XMLHttpRequest.
Method

Description

Open(method,url,async)

Chỉ ra kiểu của request, url và chỉ ra request sử dụng bất
đồng bộ hay không
Method : là kiểu của POST, GET.
URL

: vị trí của file trên server.

Async : đồng bộ hay không đông bộ

Send(string)

Send request đến server
String: chỉ sử dụng cho POST request.

Vd:
a. GET.
xmlhttp.open("GET","demo_get.asp",true)
; xmlhttp.send(); nếu bạn muốn send data cho

server.
xmlhttp.open("GET","demo_get2.asp?
fname=Henry&lname=Ford",true);
xmlhttp.send();

b. POST
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
nếu bạn muốn send data cho server.
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.send("fname=Henry&lname=Ford");

6.5 Update Page With the Response From the Server
- Để lấy nội dung trả lại từ server, bạn sử dựng thuộc tính responseText hoặc
responseXml của XMLHttpRequest.
Trang 91

Property

Description

responseText

Lấy dữ liệu trả lại từ server như là chuổi

responseXML

Lấy dữ liệu trả lại từ server như là XML

Vd:
a. Nếu dữ liệu trả lại từ server không phải là XML thì bạn sử dụng thuộc tính
responseText.
document.getElementById('test').innerHTML=xmlhttp.responseText
;

b. Nếu dữ liệu trả lại là XML thi bạn dùng thuôc tính responseXML và bạn muốn
parse nó ra bạn có thể làm như sau.
xmlDoc=xmlhttp.responseXML;
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;

6.6 The onreadystatechange Event:
a. The onreadystatechange Event: Khi request được send đến server bạn muốn
thực hiện một vai hành thao tác với response.
+ Onreadystatechange là sự kiện được bắt khi readyState thay đổi +
ReadyState chứa thuộc tính của XMLHttpRequest.
Property

Description

Onreadystatechange

Lưu trữ hàm, hàm nầy sẽ được gọi tự động khi trạng thái của
readyState thay đổi.

Trang 92

ReadyState

Chứa đựng trạng thái của XMLHttpRequest
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

Status

200: Ok
400: Page not found

b. AJAX - Creating a Callback Function
- Tạo ra một hàm callback sẽ kiểm tra nếu kết quả tra lại đã sẵng sàng để sử lý.
{
// set
the callback function
xmlhttp.onreadystatechange=stateChange;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
// set the callback function
xmlhttp.send();
}
}

- Hàm callback được đăng kí thông qua thuoc tính onreadystatechange của
XMLHttpRequest
- Hàm callback thi tương tự như sau.
function stateChange()
{
if (xmlhttp.readyState == 4)
Trang 93

{
if (xmlhttp.status == 200)
{
// process whatever has been sent back here
ext;
}
else
{
alert("There was a problem in the returned data");
}
}
}

vd:
< html > <
head >
< script type="text/javascript" >
var xmlhttp;
{
xmlhttp.send(null);
}
else
xmlhttp.send();
}
}
func
tion
stat
eCha
nge(
)
{
if (xmlhttp.readyState==4)
{
if (xmlhttp.status==200)
{
Trang 94

// process whatever has been sent back here
ext;
}
else
{
alert("There was a problem in the returned data");
}
}
}
< /script >
< /head >
< body >
< div id="test" >
< h2>Let AJAX change this text</h 2> <
/div >
<button type="button"
onclick="loadXMLDoc('test1.txt')">Click Me</button>
<button type="button"
onclick="loadXMLDoc('test2.txt')">Click Me</button>
< /body > <
/html >

* AJAX AND CLIENT SCRIPT
a. Vì sao bạn nên sử dụ ng javascript tool kit
Cơ bản, javascript và ajax là công viêc khó, để giảm bớt sự khó khăn cho công
viêc bạn có thể sử dụng toolkit của một hãng thứ 3 như là jQuery, Prototype, MooTools, hoac
Rico nơi đố nó cung cấp một lớp trười tượng để làm một vài nhiệm vụ phổ biến
-

Vd cập nhật một phần của trang mà không cần phải load toàn bộ trang

Trong số các javasscript toolkit thì Jquery được đánh giá là tốt nhất vì thế
Miscrosoft sẽ tích hợp nó vào visual studio trong các phiên bản sau
Một vài nhà phát triển chưa bắt kịp với su hướng nầy, và vẫn còn tránh sử dụng
javascript toolkit hoăc javascript, trong nhiêu trường hợp, javascript thì khó tích hợp vào trong
các ứng dụng webforms truyền thống với hầu hết các thư viện javascript của hang thứ 3.
Trong asp.net mvc nhưng thách thức đơn giản không còn tồn tại, vì thế bạn có thể
sử dụng bất ki thư viện javascript nào.

Trang 95

Sự lựa chọn của bạn được thể hiện .

b. ASP.NET MVC’s Ajax Helpers
* Mvc cung cấp một ít HTML helper bạn có thể dể dàng để thực hiện việc cập nhật
một phần trang với sự cơ chế bất đồng bộ
a. Ajax.ActionLink() sẽ tạo ra tag link, tương tự như tác Html.ActionLink().
Khi bạn click vào link kết thì nó sẽ fetches và chền nộ dung mới vào trang
html đã tồn tại
b. Ajax.BeginForm() sẽ tạo ra HTML form, tương tự như Html.BeginForm().
Khi bạn submited thì nó sẽ fetches and chèn nội dung mớ vào trang html đã
tồn tại
c. Ajax.RouteLink() tương tự như Ajax.ActionLink()
d. Ajax.BeginRouteForm() tương tự như Ajax.BeginForm()
* Fetching Page Content Asynchronously Using Ajax.ActionLink
Trước khi bạn có thể sử dụng nhưng helper bạn phải tham chiếu đến 2 file
javascript
- Chỉ ra ajax.* helper
- Thư viện ASP.NET AJAX
Mặt định 2 file đó chứa trong folder /script của bất cứ một project ASP.NET
MVC
Nhưng bạn cần cần add tag <script> vào phần head của trang view hoặc master
page Vd:
< html >
< head runat="server" >
Trang 96

404(thông điệp sẽ không được hiển thị ). Để cho nó làm viêc bạn phai tạo ra một
action method tên là GetTime() như sâu.
public string GetTime(string zone) { DateTime time =
DateTime.UtcNow.AddHours(offsets[zone]);
return string.Format("<div>The time in {0} is {1:h:MM:ss
tt}</div>", zone.ToUpper(), time); }
private Dictionary<string, int> offsets = new
Dictionary<string, int> { {
"bst", 1 }, { "mdt", -6

"utc", 0 }, {

}

} ;

- Chứ ý không có gi đặc biệt cho action method. Nó không cần biết đó là service
bất đồng bộ nó như là một phương thức bình thường.

Trang 98

c. Passing Options to Ajax.ActionLink
-Ajax.ActionLink() có một vài overload, hầu hết chứng thi tương ứng với một vài
html.ActionLink

Trang
100

- Các thuôc tính của Ajax.ActionLink ()
Thuoc tinh

Kieu du lieu

Mo tả

Confirm

string

Nếu chỉ ra, trình duyệt se yêu cầu user xác nhận, request
bất đồng bộ chỉ được thực hiện khi user nhấn ok

httpmethod

string

Chỉ ra method của resquest bất đồng bộ, nó thì không
giới hạn cho Get và Post, bạn cũng có thể sử dụng những
phương thức khác của http vd Put hoặc Delete

InsertionMode

insertionMode(enum)

Liệu có thay thế nội dung của phân tử đích(thay thế
defualt) hay là bổ sưng nội dung mới tại vi trí phía trên
phần tử (insertBefore) hoặc ở phía đưới(insertAfter)

LoadingElementid

String

Nếu chỉ ra id của phần tử html sẽ được hiển thị

OnBegin

String

Tên của hàm javascript sẽ được gọi trước khi request bất
đồng bộ bắt đầu, bạn có thể hủy request bất đồng bộ bỏi
cách trả lại false

OnComplete

string

tên củ hàm javascript se duoc goi khi request bất đồng bộ
được hoàn thành, bất chấp nó co thành công hay không

OnSucess

String

Tên hàm javascrip sẽ được gọi khi request bất đồng bộ
được hoàn thành với sự kiện là thành công xây ra sau sự
kiện OnComplete

OnFailure

String

Tên của hàm javascript sẽ đươc gọi khi request bất đông
bộ hoàn thành với sự kiện là fail, được gọi sau sự kiên
OnComplete

UpdateTargelid

String

Chỉ ra id của the html, nơi đó nội dung từ server se được
ghi vào

url

String

d. Running JavaScript Functions Before or After Asynchronous Requests
Trang
101

- Bạn có thể sử dụng OnBegin, OnComplete, OnSuccess và OnFailure to sử lý request bất
đồng bộ. Thứ tự là OnBegin ->OnComplete->OnSuccess hoặc OnFailure. Bạn có thể hủy bỏ
chuổi này bằng cách trả lại false tử OnBegin hoăc OnComplete.
-Khi bắt kì một của bốn hàm được gọi, chúng sẽ nhận một đối số mô tả mọi thứ với sự
kiện đó.
- Vd: Để hiện thị lỗi khi request bị lỗi, bạn có thể làm như sau
< script type="text/javascript" > function
handleError(ajaxContext) { var response =
ajaxContext.get_response(); var statusCode =
response.get_statusCode();
alert("Sorry, the request failed with status code " +
statusCode);
}
< /script > < %= Ajax.ActionLink("Click
me", "MyAction",
new AjaxOptions { UpdateTargetId = "myElement", OnFailure =
"handleError"}) %>

Đối số ajaxContext có các method get_date(), get_insertionMode(),
get_loadingElement(), get_Request(), get_Response(), get_updateTarget(). Những phương thức
đó bạn sử dụng để nhận nhưng thông tin của ngữ cãnh hiện tại
Tên hàm

Mô tả

Kiểu trả lại

get_data()

Lấy toàn bộ html trả lại từ server( nếu request
thành công)

String

get_insertionMode()

Lựa chọn insert default, top,sau.

0 ,1, 2

get_loadingElement()

thành phần html tương ứng để loadingElementid

Dom element

get_request

Xuất ra request asp.net ajax

get_response()

Lấy response của server

get_updateTarget()

Thẻ html tương ứng đẻ cập nhật nội dung

e. Detecting Asynchronous Requests
Trang
102

Dom element

-Bạn có thể lấy nội dung html từ bất ki mothed, và bạn ko cần biết hoặc lo lắng nó là
dịch vụ request bất đồng bộ hay không
-Dể dang để xác định request bất đông bộ, vì mỗi lần MicrosoftMvcAjax.js tạo ra một
request bất đồng bộ nó cộng thêm một đối số đặt biệt được gọi là X-Requested-With với giá tri
là XMLHttpRequest.
-Cách đơn giản để xác định nó bằng cách gọi phương thức IsAjaxRequest() trong
HttpRequestBase. - Vd public ActionResult GetTime(string zone) { DateTime
time = DateTime.UtcNow.AddHours(offsets[zone]);
if(Request.IsAjaxRequest()) {
// Produce a fragment of HTML
string fragment = string.Format("<div>The time in {0}
is {1:h:MM:ss tt}</div>", zone.ToUpper(), time);
return Content(fragment); } else { // Produce a
complete HTML page
return View(time);
}
}

f. Submitting Forms Asynchronously Using Ajax.BeginForm
-Đôi khi bạn muốn bao gồm dữ liệu người dùng nhập vào trong request bất đông bộ, cho
trương hợp nầy bạn có thẻ sử dụng Ajax.BeginForm(). Nó tương tự như Html.BeginForm(), bổ
sưng thêm AjaxOptions như bản 12.1
- Vd: bạn có thể cập nhật ví dụ trước với view template như sau
< h2>What time is it?</h 2> < %
using(Ajax.BeginForm("GetTime", new AjaxOptions {
UpdateTargetId = "myResults" })) { %> < p > Show me
the time in:
< select name="zone" >
< option value="utc">UTC</option >

Trang
103

< option value="bst">BST</option > <
option value="mdt">MDT</option >
< /select > < input type="submit"
value="Go" / >
< /p >
< % } % >
< div id="myResults" style="border: 2px dotted red; padding:
. 5 em;" > Results will appear here
< /div >
< p >
This page was generated at <%= DateTime.UtcNow.ToString("h:MM:ss
tt") %> (UTC) < /p >

- Với không có thay đổi action method GetTime ()
Bạn có kết quả như sau

g. Invoking JavaScript Commands from an Action Method

Trang
104

-Như bạn đã được biêt mvc gồm có kiểu trả về của action method là javaScriptResult. Nó
cho phép bạn trả lại một câu lệnh javascrip từ action method.
-Asp.net mvc có xây dựng ajax.* helper để cho bạn làm điều nầy và chứng sẽ thực thi câu
lệnh javascript của bạn thây vì chèn nội dung vào DOM. Cái nầy thì hữu dụng khi bạn thực hiện
một vai hành động ở server và muốn cập nhât DOM của phía client cho phù hớp dữ liêu ở server.
Vd:
< h2>List of items</h 2>
< div id="message"></div
>
< ul >
< % foreach (var item in Model) { % >
< li id="item_<%= item.ItemID %>" >
< b><%= item.Name %></b >
<%= Ajax.ActionLink("delete", "DeleteItem", new {item.ItemID},
null) %> < /li >
< % } % >
</ul><i>Page generated at <%= DateTime.Now.ToLongTimeString()
%></i>

- Khi user click vào link delete, nó sẽ tạo ra một request bất đồng bộ đến server và gọi
action method DeleteItem, và truyền itemId cho nó. Action method nó sẽ yều cầu model layer
xóa item mà request cung cấp và sâu đó bạn muốn client cập nhat lại DOM. Bạn viêt code cho
DeleteItem như sau:

Trang
105

[AcceptVerbs(HttpVerbs.Post)] // Only allow POSTs (this action
causes changes) public JavaScriptResult DeleteItem(int itemID)
{ var itemToDelete = GetItem(itemID);
// TODO: Actually instruct the model layer to delete
"itemToDelete" // Now tell the browser to update its
DOM to match var script =
string.Format("OnItemDeleted({0}, {1})",
itemToDelete.ItemID,
JavaScriptEncode(itemToDelete.Name)); return
JavaScript(script); } private static string
JavaScriptEncode(string str)
{
// Encode certain characters, or the JavaScript expression could
be invalid return new JavaScriptSerializer().Serialize(str); }

Ở client bạn tạo ra hang OnItemDeleted như sau
function OnItemDeleted(id, name)
{
document.getElementById("message").innerHTML = name + " was
deleted"; var deletedNode = document.getElementById("item_"
+ id); deletedNode.parentNode.removeChild(deletedNode); }
< /script >

Trang
106

7. Sử dụng jQuery trong ASP.NET MVC
7.1 Referencing jQuery
Với mỗi project ASP.NET MVC điều được include thư viện jquery trong folder /Script.
Giống như nhiều thư viện javascript khác, nó như là một file .js. Để sử dụng nó, bạn cần tham
chiếu đến nó.
Vd: bạn chèn doạn code nầy vào trang master page hoac view ở doạn the head
< head runat="server" > < script src="<%=
Url.Content("~/Scripts/jquery-1.3.2.min.js") %>"
type="text/javascript"></script> 

< /head >

7.2 Basic jQuery Theory
Hàm quan trọng của jquery là Jquery(). Bạn có thể sử dụng nó để query tất cả các thành
phan DOM trong trang HTML kêt với với css. Vd:
jQuery(“DIV.MyClass”) nó sẽ tìm tất cả thẻ div trong trang của bạn có sử dụng class css
là MyClass. jQuery() sẽ trả lại object của javascript. Hầu hết jQuery API gồm một tập hợp của
nhưng thương thức wrapped. Vd Jquery(“DIV.MyClass”).hide() làm cho tất cả các thẻ dia kêt
hơp với class css là MyClass biến mất. Cho tiện lợ jQuery cung cấp một cấu trúc ngắn gọn đó là
$(), nó thì chính tương tự như jQuery().
Vd:
$(“P SPAN”).addClass(“SuperBig”) cộng class css SuperBig vào tất cả tất cả các thẻ <
span> được chứa trong thẻ <p >

Trang
107

$(“.SuperBig”).removeClass(“SuperBig”) removes class css có tên là SuperBig từ các tag
có class css là SuperBig
$(#options”).toggle(). Bật tắt hiển thị phần tử với id của tag là option. Nếu tag đang hiển
thị thì nó se ẩn tag đi và ngược lại nó se hiên tag lên.
$(“DIV:has(INPUT[type=’checkbox’]:disabled)”).prepend(“<i>Hey!</i>”) chèn tag <
i>Hey!</i> vào đau của tat cả các the div chứa checkbox được disable
$(“#options A”).css(“color”,”red”).fadeOut() tìm tất cả các thẻ liên kêt <a> có id là
option, thay thế color của text thành mầu đò và thay đỏi opactiy về 0.
Như bạn đã thấy nó thật sự là ngắn gọn. Nếu không sử dụng jQuery thi bạn phải viết rất
nhiều code của javascript. jQuery cũng hỗ trợ css 3 cho selector bất chấp là trình duyệt
có hỗ trợ hay không.
7.3 Waiting for the DOM
-Hầu hết các trình duyệt sẽ run code javascript hay khi phân tích cú pháp của trang, trước
khi load trang được hoàn thành. Nó có những khó khắn, bởi vì nếu bạn đặt code
javascript vào đầu của trang bên trong tag <head>, khi đó code của bạn sẽ ko ngay lập
tức thao tác đến nhưng tác html ở cuối trang, vi vậy nó sẽ không như ý muốn của bạn
-Truyền thống, những nhà phát triển sẽ giải quyết vấn đề nầy bằng cách khởi tạo code của
bạn dựa vào sự kiện onload của tag <body>. Như vậy code của ban chỉ sẽ run khi trang
được load hoàn toàn. Nhưng nó cũng có những hạn chế.
–
–

Thẻ <body> chỉ có duy nhất môt thuộc tính onload, vì thế bạn không thể kết hợp
nhiều code độc lập với nhau.
Onload handler phải chờ cho tất cả các DOM được load, gồm có media(image). Như
vậy nó sẽ làm cho chậm trang của bạn

-Giải quyết vấn đề nầy tốt hơn là nói cho trình duyệt biết là run code của bạn sớm nhất
khi mà DOM đã sẵng sàng và không có chơ cho media.
Để làm điều đó bạn làm như sâu.
< script >
$(function() { // Insert your
initialization code here
}) ;
< /script >
Trang
108

Bạn truyền hàm javasript cho hàm $(). Bạn đăng kí nó để thực hiện sớm nhất khi
mà DOM đã sẵng sàng. Bàn có thể đăng kí nhiều hàm bạn thích, tuy nhiên thường thì có
một hàm $(function(){….}); nầy tại vị trí top của view hoac control template, và bạn đặt
tất cả những tác động jQuery của bạn vào đó.
7.4. Event Handling
Jquery đã giải quyết vấn đề về các api khac nhâu của các trình duyệt. Jquery cung
cấp một một lớp trười tượng các hàm javascript API có thể làm việc như nhâu trên bất kì
trình duyệt nào Vd:
$("img").click(function() { $(this).fadeOut() })
Khi bạn click vào image thi hàm fadeOut() se được gọi
7.5. Global Helpers
jQuery cung cấp một vài thuộc tính và hàm toàn cục để đơn giản hóa Ajax và làm
việc với nhiều trình duyệt và nhưng mode khac.
- Vd: một vài helpers khác là

method

Description

$.browser

Cho bạn biết trình duyệt gi thì đang được sử dụng. Bạn sẽ tìm thấy một của những
cái sau sẽ nhận được kết quả là true: $.browser.msie,
$.browser.mozilla, $.browser.safari, $.browser.opera.

$.browser.version

Cho bạn biết version của trình duyệt dang sử dụng

$.support

Xác định liệu trình duyệt có hổ trợ một vài thuộc tính khác hay không

$.strim(str)

Trả lại chuổi str với xóa đi khoản trắng ỏ đau và ở cuối

$inArray(val,arr)

Trả lại vị trí đầu tiên của val trong mang arr. jQuery cung cấp hàm nầy bởi vì
internet Explorer version 7 không cung cấp hàm array.indexOf()

Trang
109

Đây không phải là tập hợp đầy của nhưng hàm và thuộc tính helper mà jQuery
cung cấp, nhưng tập hợp đầy đủ thật sự thì khá nhỏ.

7.5. Adding Client-Side Interactivity to an MVC View
-

Giả sử bạn có class MountainInfo được định nghĩa như sau public class

MountainInfo { public string Name { get; set; } public int
HeightInMeters { get; set; } }

- Bạn sẽ tạo ra môt tập hợp đối tượng Mountaininfo như sau.
< h2>The Seven Summits</h 2>
< div id="summits" >
< table >
< thead><tr > < td>Item</td> <td>Height (m)</td>
<td>Actions</td >
< /tr></thead > < % foreach(var
mountain in Model) { % >
< tr >
< td><%= mountain.Name %></td > <
td><%= mountain.HeightInMeters %></td
>
< td >
< % using(Html.BeginForm("DeleteItem", "Home")) { % >
< %= Html.Hidden("item", mountain.Name) % > <
input type="submit" value="Delete" / >
< % } % >
< /td >
< /tr >
Trang 110
110

< % } % >
< /table >
< /div >

-Nó thì không tuyệt vời nhưng nó vẫn thực thi tốt, không có javascript nào được gọi. và

- DeleteItem() action method se hiển thị và thưc thi như sau:

-Để thực hiện nút Delete nó thường sử dụng” nhiều forms” với mỗi nut Delete thì được
kết hợp với <form>, vì thế nó có thể tạo ra HTTP POST với không có javascript cho những URL
với item được delete.
Trang 111
111

Bầy giờ chứng ta sẽ nâng cấp nó trong 3 cách.
7.6. Improvement 1: Zebra-Striping
-Đây là quy ước phổ biến của thiết kế web, các hàng luân phiên nhâu thi có mâu khác
nhau.
-Đê làm điều đó trong bạn đinh nghĩa một class css và sâu đó bạn lụa chọn để bổ sung
class đó vào nhu sau
< % int i = 0; % >
< % foreach(var mountain in Model) { % > < tr
<%= i++ % 2 == 1 ? "class='alternate' " % >>

- Và bạn chèn đoạn code vào <head> cua trang
$(function() {
$("#summits tr:nth-child(even)").css("background-color",
"silver");
});
< /script >

7.7 Improvement 2: Confirm Before Deletion
-Trước khi bạn thực hiện hành động mà không thể phuc hồi lại thì tốt nhất bạn nên cung
cấp cho người dùng một cảnh báo trước khi bạn thực hiện hành động. Như là bạn cần cảnh báo
trước khi thươc hiện xóa item. Bạn không cần phải add sự kiện Onclient() or Onsubmit vào thẻ
hmt mà bạn sử dung jquery nhu sau
Trang 112
112

- Bạn add khối code này vào tag <head> của trang
$("#summits form[action$='/DeleteItem']").submit(function()
{
var itemText = $("input[name='item']",
this).val();
return confirm("Are you sure you want
to delete '" + itemText + "'?");
});

7. 8 Improvement 3: Hiding and Showing Sections of the Page
-Một cái bí quyết phổ biến khác là ẩn một đoạn nhất định nào đó của trang cho tới khi
bạn biết chắt chắn nó có liên quan tới người sử dụng.
-Vd: bạn muốn cột certain trong grid thi ẩn hoặc hiện tương ứng cho check box. Nó sẽ
vất vả cho một kiến trúc bình thường nếu bạn làm điều đó trên server( asp.net Webform), nếu bạn
làm điều đó ở client bạn sẽ phải chứ ý đến trình duyệt đang chạy.
-Nhưng bạn có thể bỏ qua vấn đề đó. jQuery tạo nó khá là đơn giản. bạn bổ sung code
vao phần <head> của trang.
$("<label><input id='heights' type='checkbox'
checked='true'/>Show heights</label>")
.insertBefore("#summits")
.children("input").click(function() {
$("#summits td:nth-child(2)").toggle();
}) .click();

Trang 113
113

7.9 Client/Server Data Transfer with JSON
-Thông thường bạn không chỉ cần truyền dữ liệu đơn về cho client. Bạn có co truyền đối
tượng, mạng nhưng đối tượng, hoặc là đối tượng graph. JSON là một định dạng phù hợp cho viêc
này.
-ASP.NET MVC có hổ trợ cho viêc truyền dữ liệu JSON và jQuery có hổ trợ cho việc
nhận JSON.
- Action method trả lại JSON.
public class StockData { public decimal
OpeningPrice { get; set; } public decimal
ClosingPrice { get; set; }
public string Rating { get; set; }
} public class StocksController :
Controller {
public JsonResult GetQuote(string symbol)
{
// You could fetch some real data here
if(symbol == "GOOG") return new JsonResult {
Data = new StockData {

Trang 114
114

=

OpeningPrice = 556.94M, ClosingPrice = 558.20M, Rating
"A+"

}} ;
else
return null;
}
}

-Ở client bạn có thể lấy được chuổi JSON sử dụng $.get() or $.post, và sau phân tích nó
thành đối tượng javascript bởi gọi hàm eval(). Tuy nhiên có cách dễ dàng hơn jQuery có hổ trợ
cho viêc lấy và phân tich JSON với hàm $getJSON().

< h2>Stocks</h 2> < % using(Html.BeginForm("GetQuote",
"Stocks")) { %> Symbol :
< %= Html.TextBox("symbol") % > <
input type="submit" / >
< % } % >
< table >
< tr><td>Opening price:</td><td id="openingPrice"></td></tr >
< tr><td>Closing price:</td><td id="closingPrice"></td></tr > <
tr><td>Rating:</td><td id="stockRating"></td></tr >
< /table >
<p><i>This page generated at <%= DateTime.Now.ToLongTimeString()
%></i></p>

- Sau đó bạn hijaxing code để hiển thị thuôc tính của StockDate vào table
$("form[action$='GetQuote']").submit(function() {

Trang 115
115

$.getJSON($(this).attr("action"), $(this).serialize(),
function(stockData) {
$("#openingPrice").html(stockData.OpeningPrice);
$("#closingPrice").html(stockData.ClosingPrice)
; $("#stockRating").html(stockData.Rating); })
; return false;
});

7.10 Fetching XML Data Using jQuery
-Nếu thích hơn bạn có thẻ sử dụng định dạng xml thay cho định dạng JSON cho ví dụ
trên. Khi mà bạn nhận dữ liệu xml, nó thì dẽ hơn cho viêc dung jQuery $.ajax() thay cho $.get().
Bở vì $.ajax() cho phép bạn sử dung datatype:”xml” lụa chon nầy nói cho biết phan tính cấu trúc
như là xml.
- Đầu tiên bạn cần trả lại XML từ action method.
- Vd: bạn thay đổi action method cho cho vd trươc như sau
public ContentResult GetQuote(string symbol)
{
// Return some XML data as a string

Trang 116
116

if (symbol == "GOOG") { return Content( new
XDocument(new XElement("Quote", new
XElement("OpeningPrice", 556.94M), new
XElement("ClosingPrice", 558.20M), new
XElement("Rating", "A+")
)).ToString(),
System.Net.Mime.MediaTypeNames.Text.Xml);
}
else
return null;
}

-Action method sẽ trả lại XML như sau
< Quote >
< OpeningPrice>556.94</OpeningPrice > <
ClosingPrice>558.20</ClosingPrice >
< Rating>A+</Rating >
< /Quote >

- Tiếp theo bạn nói cho jQuery sẽ thông dịch nó như là XML thay vi cho JSON.
$("form[action$='GetQuote']").submit(function()
{ $.ajax({ url: $(this).attr("action"), type:
"GET", data: $(this).serialize(),
dataType: "xml", // Instruction to parse response as
XMLDocument success: function(resultXml) { // Extract data from
XMLDocument using jQuery selectors var opening =
$("OpeningPrice", resultXml).text(); var closing =

Trang 117
117

$("ClosingPrice", resultXml).text(); var rating = $("Rating",
resultXml).text(); // Use that data to update DOM
$("#openingPrice").html(opening);
$("#closingPrice").html(closing);
$("#stockRating").html(rating);
} }) ;
return
false; }) ;

8. Kết hợp giữa MVC và WebForms (sử dụng các kỹ thuật webform vào trong ứng dụng
MVC như việc sử dụng các control chỉ phù hợp với webform,…):
Để phát triển webform lên mô hình MVC, chúng ta cần thực hiện các bước như sau:
✔ Ánh xạ đến 3 thư viện chuẩn trong mô hình MVC gồm: System.Web.Mvc,

System.Web.Routing, và System.Web.Abstraction vào trong thư mục bin. Trong đó,
System.Web.Mvc nằm trong thư mục C:Program FilesMicrosoft ASP.NETASP.NET
MVC 2Assemblies, 2 files còn lại nằm trong thư mục C:Program FilesReference
AssembliesMicrosoftFrameworkv3. Sau đó, ta chỉ cần ánh xạ đến nó bằng cách:

✔ Bổ sung thêm hai thư mục là Controllers và Views
Trang 118
118

Để cập nhật từ webform lên mô hình MVC chúng ta bổ sung thêm một số file(s) cần thiết
như sau:

✔ Cập nhật file Web.config để nạp 3 thư viện động tại thời điểm chạy bằng việc đăng kí

UrlRoutingModule
Bước 1: Thay đổi nội dung thẻ Compilation như hình bên dưới, bước này đảm bảo các
assembly được yêu cầu sẽ được tham chiếu đến trong quá trình biên dịch (make sure that
each required assembly is referenced for compiltion).

Bước 2: Thêm tham chiếu namespace đến section system.web/pages, điều này cho phép
truy xuất đến các System.Web.Mvc helpers, System.Linq, và System.Collections.Generic

Trang 119
119

từ ViewPage.

Cuối cùng, chúng ta cần đăng kí UrlRoutingModule HttpModule. Module này có tác
dụng so khớp URL từ request đến những Route thích hợp chẳng hạn như
Controller/Action.

Sau khi thiết lập xong các thuộc tính, chạy thử ứng dụng web, ta thu được kết quả như
sau:

Trang
120

* Kết hợp Webform và MVC
Bước 1: tạo một trang .aspx có nội dung như bên dưới

Bước 2: Viết sự kiện code behind cho trang .aspx này.

Trong Controller Home ta khai báo sử dụng như sau:

Trang
121

Lập trình web asp.net MVC

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Lập trình web asp.net MVC

Similar a Lập trình web asp.net MVC (20)

Más de MasterCode.vn

Más de MasterCode.vn (20)

Lập trình web asp.net MVC