Lập trình web asp.net MVC

21,219 views
20,953 views

Published on

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

1 Comment
12 Likes
Statistics
Notes
  • taigd2000@gmail.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
21,219
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
1,858
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Lập trình web asp.net MVC

  1. 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 1
  2. 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 2
  3. 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 - - 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
  4. 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 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
  5. 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). Trang 5
  6. 6. 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
  7. 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: Trang 7
  8. 8. 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ư
  9. 9. Trang 8 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
  10. 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 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
  11. 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 expression) tham chiếu đến một mảng hay tập hợp nào đó. Ví dụ: Trang 11
  12. 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 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
  13. 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 + 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
  14. 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 14
  15. 15. + Bước 2: Tạo action Create() + Bước 3: Tạo trang View Trang 15
  16. 16. + 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
  17. 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 17
  18. 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 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
  19. 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ụ: 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
  20. 20. 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
  21. 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 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
  22. 22. 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
  23. 23. 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
  24. 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 24
  25. 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 25
  26. 26. 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
  27. 27. 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
  28. 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 28
  29. 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 29
  30. 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 30
  31. 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 31
  32. 32. Hình 3.35 Trang 32
  33. 33. - 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
  34. 34. - Tạo strongly-typed view và trong View Content chọn List, nhấn 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
  35. 35. - Tạo strongly-typed view và trong View Content chọn List, nhấn 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
  36. 36. - Nhấp phải chọn add view cho action Edit trong controller 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 Trang 36
  37. 37. 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 - Tạo strongly-typed view và trong View Content chọn List, nhấn Delete Hình 3.51 Trang 37
  38. 38. - 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
  39. 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 39
  40. 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: - Tham chiếu đến thư viện System.Data.Linq - Update lớp Product như sau : Trang 40
  41. 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 41
  42. 42. 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
  43. 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) 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
  44. 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 - 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
  45. 45. - 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
  46. 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 46
  47. 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à 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
  48. 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 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
  49. 49. - 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
  50. 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 - Bước 2: Chạy thử và thu được kết quả sau d. Các trang master page lồng nhau: Trang 50
  51. 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 51
  52. 52. - 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
  53. 53. - 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
  54. 54. - 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
  55. 55. - 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
  56. 56. - 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
  57. 57. - 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
  58. 58. 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
  59. 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 59
  60. 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 60
  61. 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 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
  62. 62. + 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
  63. 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 63
  64. 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à 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
  65. 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 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
  66. 66. + 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
  67. 67. + 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
  68. 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 68
  69. 69. + 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
  70. 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 70
  71. 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 71
  72. 72. 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
  73. 73. 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
  74. 74. 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
  75. 75. 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
  76. 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 76
  77. 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ỉ 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
  78. 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 78
  79. 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 - 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
  80. 80. 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
  81. 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? 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
  82. 82. Với mục đích trên, ta xây dựng khối test như sau: Trang 82
  83. 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 83
  84. 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 84
  85. 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 85
  86. 86. - 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
  87. 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 87
  88. 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 88
  89. 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 89
  90. 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 90
  91. 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 91
  92. 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 92
  93. 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 93
  94. 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 94
  95. 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 95
  96. 96. 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
  97. 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 97
  98. 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> { { "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
  99. 99. Trang 99
  100. 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 100
  101. 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 101
  102. 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 e. Detecting Asynchronous Requests Trang 102 Dom element
  103. 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 103
  104. 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 104
  105. 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 105
  106. 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 106
  107. 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 107
  108. 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 108
  109. 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 109
  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 110 110
  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 111 111
  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 112 112
  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 113 113
  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 114 114
  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 115 115
  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 116 116
  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 117 117
  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 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
  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 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
  120. 120. 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
  121. 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 121
  122. 122. Trang 122

×