Trang 1

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 2

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 3

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 - Giao diện có

trạng thái

- Đã được biên

dịch

- khuyến khích

lập trình hướng đối

tượng.

- Cấu trúc file lớn

- Chiếm nhiều

bandwidth.

- HTML khó nhìn

- Không khả

năng test.

2005 ASP.NET 2.0

2007 ASP.NET Ajax

2008 ASP.NET 3.5

* 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 4

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 code-

behind 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 5

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 ).

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

Trang 7

Trang 6

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:

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.

- 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ư

sau :

Trang 9

Trang 8

Hình 2.5: Ứng dụng mặc định do visual tạo ra

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.

2.4 So sánh giữa ASP.NET webform và ASP.NET MVC

Trang 10

* 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

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

số>

Cấu trúc địa chỉ rành

mạch theo dạng

Controllers/Action/Id

2.5 ASP.NET MVC 2

Trang 11

- 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

Ví dụ:

expression) tham chiếu đến một mảng hay tập hợp nào đó.

Trang 12

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

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

liệu action (GET, POST, PUT, DELETE) nào sẽ được thực thi .

Trang 13

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

+ 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.

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

Trang 14

+ 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 15

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

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

Trang 16

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

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

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

tham chiếu javascrip là

Trang 17

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 18

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

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:

website thì cotroller sẽ đáp ứng bằng việc gọi action “About()”

Trang 19

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ụ:

Hình 3.3: code trả về một ViewResult

Hình 3.4: code trả về một RedirectResult

c. Trả về một ContentResult

a. Trả về một ViewResult

b. Trả về một Redirect Result

Trang 20

Hình 3.5: 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

d. Trả về một fileResult

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

Trang 21

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

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.

khi thực thi request Ajax như sau:

Trang 22

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

Ví dụ:

action sẽ không được yêu cầu

Hình 3.11

Trang 23

Hình

3.13

*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ý

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

lỗi này bằng cách ghi đè phương thức HandleUnknownAction()

Hình 3.12

Trang 24

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 25

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 26

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

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

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

Trang 27

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

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

Trang 28

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 29

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 30

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 31

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 32

Hình 3.35

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

Trang 33

Add

Hình 3.36

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

- Kết quả

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

Trang 34

Details

Hình 3.39

Hình 3.40

c. Tạo mới mẫu tin

Hình 3.41

- Kết quả

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

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

Trang 35

Create

Hình 3.42

Hình 3.43

Hình 3.44

d. Chỉnh sửa mẫu tin

- Điền thông tin sản phẩm mới

- Kết quả

Trang 36

Hình 3.45

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

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

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

Trang 37

Hình 3.48

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

Hình 3.49

e. Xóa mẫu tin

Hình 3.50

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

Delete

Hình 3.51

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

Trang 38

Hình 3.52

Hình 3.53

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.

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

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

- Kết quả sau khi xóa

Trang 39

- 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 40

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:

- Update lớp Product như sau :

- Tham chiếu đến thư viện System.Data.Linq

Trang 41

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 42

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

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

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

Controller

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

Trang 43

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)

c. Thêm mới sản phẩm

- Khai báo action Create() trong controller CRUD

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ả

Trang 44

- 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

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:

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

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

Trang 45

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

- 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à:

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

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

Trang 46

- 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 47

- 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à

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.

kiểm tra từng route, và dừng khi có route đầu tiên phù hợp.

Trang 48

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 \Views\Shared, 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

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.

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

Trang 49

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

view

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

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

Trang 50

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

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

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

Trang 51

- 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 52

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ì).

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

Trang 53

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

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

Trang 54

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 \Views\Shared (vì chúng ta muốn

sử dụng

user control trên nhiều views khác nhau), chọn Add, View

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

Trang 55

- 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 <%= %>

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

Trang 56

b. Truyền dữ liệu từ controller đến ViewUserControl

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

- Bước 1: Thay đổi nội dung trang user view control như bên dưới

Trang 57

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

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

Trang 58

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

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

Trang 59

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 60

+ 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 61

- 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 2: khai báo sử dụng trong View

+ Bước 1: Xây dựng một danh sách các phần tử cho dropdownlist

Trang 62

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:

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 2: import trực tiếp vào trong view cần sử dụng helper bạn vừa mới

tạo

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

1 . Xây dựng phương thức nutSubmit() tĩnh thuộc lớp Helpers tĩnh như sau:

+ cách 1: khai báo namespace trong file web.config

Trang 63

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 64

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à

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

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

PageLinks(…)

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

Trang 65

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 2: Khởi tạo dữ liệu

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

+ Bước 1: Xây dựng phương thức helper BulletedList(… )

Trang 66

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.

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

Trang 67

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

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

Trang 68

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 69

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

* 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ị

Trong đó,

controller

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

trí dữ liệu không hợp lệ như sau:

Trang 70

+ 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 71

- 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 72

- 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

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.

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

thuộc tính exclude nữa

Trang 73

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

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

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

UpdateModel() vẫn làm việc.

Trang 74

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,

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

Trang 75

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

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 :

Trang 76

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 77

+ 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ỉ

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 đó

muốn chứng thực chỉ đối với một số user nào đó ta dùng như sau:

Trang 78

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 79

- 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

+ 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

- Kết quả sau khi tạo khối test mới

Trang 80

3. Thay đổi class để class trở thành public

* 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.

4 . Thêm thuộc tính TestClass vào lớp mới tạo

Trang 81

+ 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?

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

chạy test như sau :

+ 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.

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

lập điểm nhấn cho

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 82

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

Trang 83

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 84

- 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 85

- 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 86

- 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.

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

Trang 87

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 88

- 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 89

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 90

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 91

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 92

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 93

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ý.

function loadXMLDoc(url)

{

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest(); // set

the callback function

xmlhttp.onreadystatechange=stateChange;

xmlhttp.open("GET",url,true);

xmlhttp.send(null);

}

else {// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

// set the callback function

xmlhttp.onreadystatechange=stateChange;

xmlhttp.open("GET",url,true);

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 94

{

if (xmlhttp.status == 200)

{

// process whatever has been sent back here

document.getElementById('test').innerHTML=xmlhttp.responseT

ext;

}

else

{

alert("There was a problem in the returned data"); }

}

}

vd:

< html > <

head >

< script type="text/javascript" >

var xmlhttp;

function loadXMLDoc(url)

{

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

xmlhttp.onreadystatechange=stateChange;

xmlhttp.open("GET",url,true);

xmlhttp.send(null);

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

xmlhttp.onreadystatechange=stateChange;

xmlhttp.open("GET",url,true);

xmlhttp.send();

}

}

func

tion

stat

eCha

nge(

)

{

if (xmlhttp.readyState==4)

{

if (xmlhttp.status==200)

{

Trang 95

// process whatever has been sent back here

document.getElementById('test').innerHTML=xmlhttp.responseT

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 96

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" >

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

Trang 97

<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js")

%>"

type="text/javascript"></script>

<script src="<%=

Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>"

type="text/javascript"></script> < /head >

< /html >

Vd < h2>What time is

it?</h 2>

< p > Show me the time in: < %= Ajax.ActionLink("UTC",

"GetTime", new { zone = "utc" }, new AjaxOptions {

UpdateTargetId = "myResults" }) %> < %=

Ajax.ActionLink("BST", "GetTime", new { zone = "bst" }, new

AjaxOptions { UpdateTargetId = "myResults" }) %> < %=

Ajax.ActionLink("MDT", "GetTime", new { zone = "mdt" }, new

AjaxOptions { UpdateTargetId = "myResults" }) %> < /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 mỗi link sẽ request dữ liệu từ action method gọi là Getime ( trong cung môt

controller), và truyền đối số là zone, link nầy sẽ lấy dữ liệu response từ server và

thay thế nội dung của thẻ div có id là myResults.

-Nếu bạn click vào link, sẽ không có sự kiện gi xẩy ra, trình duyệt sẽ request bất

đồng bộ nhưng không có action method gọi là GetTime, vì thế server sẽ trả lại lỗi

Trang 98

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> { { "utc", 0 }, {

"bst", 1 }, { "mdt", -6 }

} ;

- 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 99

Trang

100

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

101

- 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

102

- 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 Dom element

e. Detecting Asynchronous Requests

Trang

103

-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

104

< 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

105

-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

106

[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

< script type="text/javascript" >

function OnItemDeleted(id, name)

{

document.getElementById("message").innerHTML = name + " was

deleted"; var deletedNode = document.getElementById("item_"

+ id); deletedNode.parentNode.removeChild(deletedNode); }

< /script >

Trang

107

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> <!-- Leave rest as before -->

< /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

108

$(“.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

109

- 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 110 110

- Đâ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 111 111

< % } % >

< /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 112 112

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

< script type="text/javascript" > $(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 113 113

- 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 114 114

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 115 115

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 116 116

$.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 117 117

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 118 118

$("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 Files\Microsoft ASP.NET\ASP.NET

MVC 2\Assemblies, 2 files còn lại nằm trong thư mục C:\Program Files\Reference

Assemblies\Microsoft\Framework\v3. 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 119 119

Để 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

truy xuất đến các System.Web.Mvc helpers, System.Linq, và System.Collections.Generic

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

Trang

120

dụng so khớp URL từ request đến những Route thích hợp chẳng hạn như

sau:

từ ViewPage.

Cuối cùng, chúng ta cần đăng kí UrlRoutingModule HttpModule. Module này có tác

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ư

Trang

121

* 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

122