Tìm hiểu công nghệ ASP.NET MVC

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 .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: 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: %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 , Trang 25 tag đầu tiên sẽ xuất hiện trong tag của văn bản HTML, tag thứ hai sẽ xuất hiện trong tag 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 log