Tài liệu Bài số 3: Tổng quan về ASP.NET MVC Framework docx

Bài số Tổng quan ASP.NET MVC Framework Table of Contents Tại sử dụng ASP.NET MVC 1.1 ASP.NET MVC 1.1.1 1.1.2 1.2 Mơ hình MVC Một vài đặc tính ASP.NET MVC Sự khác biệt với WebForm Ví dụ xây dựng ứng dụng với ASP.NET MVC Framework 2.1 Tạo Project với ASP.NET MVC Web Application 2.2 Tìm hiểu định tuyến URL 2.3 Xây dựng mô hình dữ liệu 2.3.1 Tạo sở dữ liệu 2.3.2 Sử dụng mô hình LINQ to SQL 10 2.4 Tìm hiểu Controllers 14 2.5 Tìm hiểu Views 16 2.6 Tìm hiểu Models 18 2.7 Cấu trúc Views\Shared\Site.Master 20 2.8 Kết quả 21 Câu hỏi ôn tập 21 Tài liệu tham khảo 22 Tại sử dụng ASP.NET MVC 1.1 ASP.NET MVC 1.1.1 Mơ hình MVC MVC viết tắt chữ đầu Models, Views, Controllers MVC chia giao diện UI thành phần tương ứng: đầu vào controller điều khiển thông qua HTTP request, model chứa miền logic, view thứ sinh trả cho trình duyệt Figure Mơ hình MVC Lợi ích việc dùng phương pháp MVC phân đoạn rõ ràng models, views, controllers bên ứng dụng Cấu trúc giúp cho việc kiểm tra lỗi ứng dụng trở nên dễ dàng 1.1.2 Một vài đặc tính ASP.NET MVC  Tách rõ ràng mối liên quan, mở khả test TDD (test driven developer) Có thể test unit ứng dụng mà không cần phải chạy Controllers với tiến trình ASP.NET dùng unit testing framework NUnit, MBUnit, MS Test, v.v…  Có khả mở rộng, thứ MVC thiết kế cho phép dễ dàng thay thế/tùy biến ( ví dụ: lựa chọn sử dụng engine view riêng, routing policy, parameter serialization, v.v…)  Bao gồm ánh xạ URL mạnh mẽ cho phép xây dựng ứng dụng với URL sạch, URL không cần cs phần mở rộng ( ví dụ: ánh xạ địa /Products/Edit/4 để thực hành động “Edit” lớp điều khiển ProductControllers ánh xạ địa /Blog/SomeTopic để thực hành động “Display Topic” lớp điều khiển BlogEngineController )  ASP.NET MVC Framework hỗ trợ file ASP.NET ASPX ASCX Master, đánh dấu tập tin “view template” ( dễ dàng dùng tính ASP.NET lồng trang Master, snippets, mô tả server controls, template, data-binding, localization, v.v… ) Tuy nhiên Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework khơng cịn postback interactive back server thay vào interactive end-user tới Controller class ( khơng cịn viewstate, page lifecycle )  ASP.NET MVC Framework hỗ trợ đầy đủ tính bảo mật ASP.NET forms/windows authenticate, URL authorization, membership/roles, output data caching, session/profile state, configuration system, provider architecture v.v… 1.2 Sự khác biệt với WebForm ASP.NET WebForm sử dụng ViewState để quản lý, trang ASP.NET có lifecycle, postback dùng web controls, events để thực hành động cho UI có tương tác với người dùng nên hầu hết ASP.NET WebForm xử lý chậm ASP.NET MVC Framework chia thành phần: Models, Views, Controllers Mọi tương tác người dùng với Views thực hành động Controllers, khơng cịn postback, khơng cịn lifecycle khơng cịn events Việc kiểm tra ( test ), gỡ lỗi ( debug ) với ASP.NET phải chạy tất tiến trình ASP.NET thay đổi ID controls ảnh hưởng đến ứng dụng Đối với ASP.NET MVC Framework việc sử dụng unit test thẩm định dễ dàng Controller thực Tính ASP.NET 2.0 ASP.NET MVC Kiến trúc chương trình Kiến trúc mơ hình WebForm  Kiến trúc sử dụng việc phân chia Business  Database chương trình thành Controllers, Models, Views Cú pháp chương trình Sử dụng cú pháp webform, tất Các kiện điều khiển kiện controls server controllers, controls không quản lý server server quản lý Truy cập liệu Sử dụng hầu hết công nghệ truy Phần lớn dùng LINQ to SQL class cập liệu ứng dụng để tạo mơ hình truy cập đối tượng Debug Debug chương trình phải thực Debug sử dụng unit test tất bao gồm lớp truy cập kiểm tra phương thức liệu, hiển thị, điều khiển controller controls Tốc độ phân tải Tốc độ phân tải chậm Phân tải nhanh khơng phải trang có nhiều controls quản lý ViewState để quản lý ViewState lớn control trang Tương tác với javascript Tương tác với javascript khó khăn Tương tác với javascript dễ dàng vì controls điều khiển đối tượng không server quản server lý điều khiển khơng khó URL Address Cấu trúc địa URL có dạng Cấu trúc địa rành mạch theo .aspx?& dạng Controllers/Action/Id Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework Ví dụ xây dựng ứng dụng với ASP.NET MVC Framework Tính ASP.NET MVC Framework Beta NET Framework 3.5 Để xây dựng ứng dụng với ASP.NET MVC Framework cần có mơi trường hoạt động NET Framework 3.5 ( cụ thể chương trình sau xây dựng với Visual Studio 2008 ), cần MVC Framework Mặc định Visual Studio 2008 chưa có sẵn ASP.NET MVC Web Applications Có thể download ASP.NET MVC Framework địa http://www.microsoft.com/downloads/details.aspx?FamilyId=A24D1E00-CD35-4F66-BAA02362BDDE0766&displaylang=en Cài đặt Visual Studio 2008 sau cài đặt ASP.NET MVC Framework Bây bắt đầu xây dựng ứng dụng với MVC 2.1 Tạo Project với ASP.NET MVC Web Application Trong chương trình Visual Studio 2008 cài đặt ASP.NET MVC Framework: File  New Project  Windows C#  ASP.NET MVC Web Application ( xem Figure 2) Figure Tạo Projects ASP.NET MVC Khi tạo ASP.NET MVC Framework hộp thoại Unit Test xuất Chọn Yes muốn tạo Project Test, chọn No không muốn tạo Unit Test ( xem Figure 3) Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework Figure Tạo Unit Test cho ASP.NET MVC Sau ứng dụng ASP.NET MVC Web Application tạo, nhìn vào mục Solution Explorer thấy xuất mặc định thư mục: Models, Views, Controllers chứa đối tượng tương ứng với thành phần Models, Views, Controllers mơ hình MVC Mở rộng folder Controllers thấy HomeController.cs, mở rộng Views thấy folder Home, Shared Account Mở rộng folder Home thấy About.aspx Index.aspx ( xem hình Figure ) Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework Figure Solution Explorer MVC Chạy ứng dụng cách ấn F5 Nếu ứng dụng tạo lần đầu có thơng báo hỏi có cho phép mở chế độ Debug hay không? Nếu đồng ý chọn “Modify the Web.config file to enable debugging”, ko muốn debug chọn “Run without debugging” ( xem Figure 5) Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework Figure Mở Debug Web.config ASP.NET MVC Kết chạy ứng dụng ( xem Figure 6) ứng dụng load vào browser Trong ví dụ có trang Index About Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework Figure Thực thi ứng dụng mẫu ASP.NET MVC 2.2 Tìm hiểu định tuyến URL Browser yêu cầu địa từ controller action ASP.NET MVC Framework gọi định tuyến URL ( URL routing) Url routing định request tới controller action URL routing sử dụng bảng định tuyến để điều khiển request Bảng định tuyến tạo ứng dụng bắt đầu chạy lần Bảng định tuyến thiết lập file Global.asax using using using using using using System; System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc; System.Web.Routing; namespace HiTest { // Note: For instructions on enabling IIS6 or IIS7 classic mode, // visit http://go.microsoft.com/?LinkId=9394801 public class MvcApplication : System.Web.HttpApplication { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with parameters new { controller = "Home", action = "Index", id = "" } Parameter defaults ); // } protected void Application_Start() { RegisterRoutes(RouteTable.Routes); } } } Khi ứng dụng chạy lần đầu tiên, phương thức Application_Start() gọi, phương thức gọi phương thức khác RegisterRoutes(RouteTable.Routes) để tạo bảng định tuyến Định tuyến mặc định chia request thành phân đoạn, phân đoạn nằm dấu “/” Phân đoạn chứa tên controller, phân đoạn thứ chứa tên controller action, phân đoạn thứ tham số đầu vào controller action Ví dụ: với địa /Product/Details/3 hiểu là: Controller = ProductController Action = Detail Id = Controller mặc định HomeController, Action mặc định Index, Id mặc định “”  http://localhost:1727/ Ví dụ: với địa /Employee: Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework Controller = EmployeeController Action = Index Id = “” ̣ ̣ 2.3 Xây dưng mô hình dữ liêu 2.3.1 Tạo sở dữ liệu Từ App_Data click phải chuô ̣t cho ̣n Add  New Item  SQL Server Database đă ̣t tên Database.mdf Figure Tạo sở dữ liệu Database.mdf App_Data Trong sở dữ liê ̣u Database.mdf ta ̣o table: ( xem Figure 8, Figure ) Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework Figure Bảng SanPham sở dữ liê ̣u Database.mdf Figure Bảng LoaiSanPham sở dữ liệu Database.mdf ̉ ̣ 2.3.2 Sư dung mô hình LINQ to SQL Trong Solution Explorer click phải chuô ̣t vảo Models  Add  New Item LINQ to SQL Classes (Figure 10) Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework 10 Figure 10 Tạo LINQ to SQL Classes Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework 11 Từ Server Explorer  Kéo thả tables LoaiSanPham, SanPham vào file DataClasses.dbml Figure 10 Tạo file DataClasses.dbml sử dụng bảng LoaiSanPham và SanPham Trong file DataClasses.dbml click phải chuô ̣t cho ̣n Add  Association để tạo liên kế t giữa table (Figure 11) Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework 12 Figure 11 Tạo liên kết giữa các bảng DataClasses.dbml Kế t quả đươ ̣c Figure 12 dưới Figure 12 Cấ u trúc của DataClasses.dbml Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework 13 2.4 Tìm hiểu Controllers Controller chịu trách nhiệm điều khiển tương tác người dùng bên ứng dụng MVC Controller định trả cho người dùng người dùng tạo request browser Một controller class ( C# class VB class) Trong ví dụ ứng dụng ASP.NET MVC Web Application mẫu tồ n ta ̣i controller AccountController.cs HomeController.cs nằm folder Controllers HomeController.cs using using using using using using System; System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc; System.Web.Mvc.Ajax; namespace HiTest.Controllers { [HandleError] public class HomeController : Controller { public ActionResult Index() { ViewData["Title"] = "Home Page"; ViewData["Message"] = "Welcome to ASP.NET MVC!"; return View(); } public ActionResult About() { ViewData["Title"] = "About Page"; return View(); } } } Trong HomeController.cs có phương thức Index() About() Hai phương thức action controller HomeController.cs thực gọi địa /Home/Index /Home/About Bất kỳ phương thức có thuộc tính public action controller Tạo Controller mới Trong folder Controllers  phải chuột chọn Add  New Item  MVC Controller Class ( Figure 13) Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework 14 Figure 13 Tạo controller tên là SanPhamController.cs SanPhamController.cs using using using using using using using System; System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc; System.Web.Mvc.Ajax; BanHang.Models; namespace BanHang.Controllers { public class SanPhamController : Controller { DataClassesDataContext data = new DataClassesDataContext(); public ActionResult Index() { // Add action logic here ViewData["Title"] = "Sản phẩm"; return RedirectToAction("DanhMucLoaiSanPham"); } public ActionResult DanhMucLoaiSanPham() { // Code cua ban o day ViewData["Title"] = "Danh mụ loạ sả phẩ "; c i n m List lsp = data.LoaiSanPhams.ToList(); return View("DanhMucLoaiSanPham", lsp); } public ActionResult DanhSachSanPham(string loaisanpham) { ViewData["Title"] = "Danh sáh sả phẩ loạ sả phẩ "; c n m i n m Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework 15 List sp = data.LaySanPhamTuLoaiSanPham(loaisanpham); return View("DanhSachSanPham", sp); } public ActionResult ChiTietSanPham(int id) { ViewData["Title"] = "Chi tiế sả phẩ "; t n m SanPham ctsp = data.LaySanPhamQuaID(id); return View("ChiTietSanPham", ctsp); } } } 2.5 Tìm hiểu Views Trong controller HomeController.cs, hai phương thức Index() About() trả view Một view chứa thẻ HTML trả cho browser Trong mơ hình MVC view tương ứng với trang aspx WebForm View phải tạo vị trí đường dẫn Ví dụ với controller HomeController.cs hành động HomeController.Index() trả view nằm vị trí đường dẫn \Views\Home\Index.aspx HomeController.About() trả view nằm vị trí đường dẫn \Views\Home\About.aspx View About.aspx About Us

TODO: Put about content here

View Index.aspx

To learn more about ASP.NET MVC visit http://asp.net/mvc

Tất thuộc tính nằm thẻ có định dạng HTML tùy ý sửa đổi theo ý muốn Tạo view cho controller SanPhamController.cs, SanPhamController.cs có phương thức public Index(), DanhMucLoaiSanPham(), DanhSachSanPham() ChiTietSanPham() nên Views phải ta ̣o view tương ứng Index.aspx, DanhMucLoaiSanPham.aspx, DanhSachSanPham.aspx, ChiTietSanPham.aspx bằ ng cách từ Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework 16 folder Views click phải chuô ̣t cho ̣n Add  New Folder nhâ ̣p tên folder mới ta ̣o là SanPham Từ folder SanPham click phải chuô ̣t cho ̣n Add  View… (Figure 14) (ví dụ tạo view DanhMucLoaiSanPham) Figure 14 Tạo view DanhMucLoaiSanPham folder SanPham Index.aspx Đây làtrang chíh củ sả phẩ n a n m DanhMucLoaiSanPham.aspx Đây làdanh mụ loạ sả phẩ c i n m

DanhSachSanPham.aspx Đây làdanh sáh sả phẩ cótrong chuyên mụ c n m c ChiTietSanPham.aspx Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework 17 Đây làChi tiế sả phẩ t n m 2.6 Tìm hiểu Models Một model ứng dụng ASP.NET MVC chứa tất nghiệp vụ logic mà controllers views Models chứa tất tầng truy xuất liệu logic tầng nghiệp vụ logic Ví dụ, sử dụng LINQ to SQL để truy nhập liệu phải tạo LINQ to SQL class ( file định dạng dbml ) folder Models Mô hinh dữ liê ̣u LINQ to SQL ( Figure 15 ) ̀ Figure 15 Mô hình dữ liê ̣u LINQ to SQL ̣ ̣ ̣ ̣ Xây dưng lớp trơ giúp cho viêc thao tác với dữ liêu thông qua LINQ to SQL DataClasses.cs using System; using System.Collections.Generic; using System.Linq; namespace BanHang.Models { Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework 18 partial class DataClassesDataContext { public List LayCacLoaiSanPham() { return LoaiSanPhams.ToList(); } public List LaySanPhamTuLoaiSanPham(string loaisanpham) { return SanPhams.Where(l => l.LoaiSanPham1.Id == loaisanpham).ToList(); } public SanPham LaySanPhamQuaID(int id) { return SanPhams.Single(s => s.Id == id); } } } Với lớp trơ ̣ giúp có thể thao tác dễ dàng với sở dữ liê ̣u cầ n Chẳ ng ̣n với lớp DataClasses.cs cầ n truy nhâ ̣p để lấ y thông tin về sản phẩ m có mã Id , viết sau code -behind nào Views (ví dụ với view DanhMucLoaiSanPham.aspx.cs folder Views): Figure 16 Binding data vào Views\DanhMucLoaiSanPham.aspx.cs Khi đó ta phải sửa đổ i la ̣i file Views\DanhMucLoaiSanPham.aspx cho phù hơ ̣p với code Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework 19 Đây làdanh mụ loạ sả phẩ c i n m

Views chứa tất hiển thị cho người dùng browser, Controllers chứa logic mà trả view cho người dùng hướng từ action đến action khác Còn lại tất viết Models ́ 2.7 Câu trúc Views\Shared\Site.Master My Sample MVC Application

Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework 20 My Sample MVC Application © Copyright 2008 ́ ̉ 2.8 Kêt qua Figure 17 Kế t quả chạy ưng dụng thêm SanPham vảo ưng dụng ASP.NET MVC ́ ́ Câu hỏi ôn tập Hỏi: Views MVC sử dụng AJAX, javascript không? Đáp: Được Về chất, view ASP.NET MVC Framework trang aspx với mô hình WebForm thực tác vụ tương tự Vì việc sử dụng jQuery, ASP.NET AJAX, javascript thực Hỏi: Xây dựng ứng dụng với ASP.NET MVC Framework trang web chạy nhanh so với xây dựng WebForm cũ? Đáp: Chưa Nếu xây dựng trang web với tảng WebForm mà sử dụng controls, usercontrols events giá trị ViewState PostBack không lớn nên thực thi không hẳn chậm Trang web xây dựng theo WebForm thực chậm giá trị ViewState lớn Hỏi: Có phải thực test debug ASP.NET MVC Framework dễ dàng so với tảng WebForm Đáp: Đúng Vì việc thực test debug ASP.NET MVC Framework phải thực Controller nên dễ dàng kiểm soát so với thực test debug WebForm Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework 21 Tài liệu tham khảo http://www.asp.net/ http://weblogs.asp.net/scottgu/archive/2007/10/14/asp-net-mvc-framework.aspx Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework 22 ... tham số> dạng Controllers/Action/Id Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework Ví dụ xây dựng ứng dụng với ASP.NET MVC Framework Tính ASP.NET MVC Framework Beta NET Framework. .. Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework 10 Figure 10 Tạo LINQ to SQL Classes Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework 11 Từ Server Explorer... Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan ASP.NET MVC Framework 21 Tài liệu tham khảo http://www .asp.net/ http://weblogs .asp.net/ scottgu/archive/2007/10/14/asp-net -mvc- framework. aspx Microsoft