Giáo trình mô đun Lập trình web ASP.NET MVC (Nghề Công nghệ thông tin Trình độ cao đẳng)

BM/QT10/P.ĐTSV/04/04 Ban hành lần: UBND TỈNH BÀ RỊA – VŨNG TÀU TRƯỜNG CAO ĐẲNG KỸ THUẬT CÔNG NGHỆ GIÁO TRÌNH MƠ ĐUN LẬP TRÌNH WEB ASP.NET MVC NGHỀ: CƠNG NGHỆ THƠNG TIN TRÌNH ĐỘ: CAO ĐẲNG (Ban hành kèm theo Quyết định số: ……/QĐ-CĐKTCN, ngày … tháng … năm …… Hiệu trưởng Trường Cao đẳng Kỹ thuật Công nghệ BR-VT) BÀ RỊA – VŨNG TÀU TUYÊN BỐ BẢN QUYỀN Nhằm đáp ứng nhu cầu học tập nghiên cứu cho giảng viên sinh viên nghề Công nghệ Thông tin trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu, thực biên soạn tài liệu Lập trình web ASP.NET MVC Tài liệu biên soạn thuộc loại giáo trình phục vụ giảng dạy học tập, lưu hành nội Nhà trường nên nguồn thơng tin phép dùng nguyên trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm LỜI GIỚI THIỆU Giáo trình “Lập trình web ASP.NET MVC” biên soạn dựa khung chương trình đào tạo Cao đẳng nghề Công nghệ Thông tin Trường Cao đẳng Kỹ thuật Công nghê Bà Rịa – Vũng Tàu phê duyệt Tác giả nghiên cứu số tài liệu, công nghệ đại kết hợp với kinh nghiệm làm việc thực tế để viết nên giáo trình Nội dung tác giả trình bày động, dễ hiểu kèm theo bước hướng dẫn thực hành chi tiết theo nguyên tắc quan tâm đến kết đầu ra, khả tự học kỹ cần thiết để HSSV hồn thành ứng dụng web quảng cáo sản phẩm, thương mại điện tử, … NET framework theo mơ hình MVC, mơ hình ứng dụng phổ biến nay, đáp ứng nhu cầu thực tế doanh nghiệp Nội dung giáo trình chia thành 10 bài, đó: Bài 1: Tổng quan ASP.NET MVC Bài 2: Tạo ứng dụng web ASP.NET MVC Bài 3: Xây dựng model Bài 4: Tạo view Bài 5: Tạo controller Bài 6: Truyền liệu controller view Bài 7: Thiết kế view HTML Helper Bài 8: Hiển thị liệu Web Grid Bài 9: Kiểm tra liệu trang web Bài 10: Triển khai ứng dụng Trong trình biên soạn, chắn giáo trình cịn nhiều thiếu sót Tác giả mong nhận ý kiến đóng góp quý thầy/cô em học sinh, sinh viên để tiếp tục hoàn thiện Xin chân thành cảm ơn quý đồng nghiệp, bạn bè có ý kiến đóng góp q trình biên soạn giáo trình Bà Rịa – Vũng Tàu, ngày …… tháng …… năm ……… Tham gia biên soạn Phan Hữu Phước – Chủ biên MỤC LỤC LỜI GIỚI THIỆU MỤC LỤC BÀI 1: TỔNG QUAN VỀ ASP.NET MVC Mơ hình MVC .9 1.1 Giới thiệu 1.2 Ưu nhược điểm .10 1.3 Lý nên làm mơ hình MVC .10 ASP.NET MVC 11 2.1 ASP.NET MVC gì? 11 2.2 Kiến trúc 11 2.3 Quá trình xử lý yêu cầu 12 2.4 Một số đặc điểm 13 2.5 So sánh MVC Web Form .15 CÂU HỎI, BÀI TẬP 16 BÀI 2: TẠO ỨNG DỤNG WEB ASP.NET MVC 17 Thao tác tạo 17 Tổ chức lưu trữ 18 Phân biệt ASPX Razor View Engine 19 Cú pháp mã Razor .19 Tạo Web Page đơn giản với mã Razor 20 Cài đặt Entity Framework 21 CÂU HỎI, BÀI TẬP 21 GỢI Ý, ĐÁP ÁN .22 BÀI 3: XÂY DỰNG MODEL 23 Khái niệm 23 Các loại Model 23 2.1 Data Model 23 2.2 Business Model 24 2.3 View Model 24 Tạo Data Model 24 Model Binder .27 4.1 Giới thiệu DefaultModelBinder 27 4.2 Giới thiệu Model Binding (Mơ hình liên kết) 27 CÂU HỎI, BÀI TẬP 29 BÀI 4: TẠO VIEW 31 Khái niệm View 31 Tạo View .31 2.1 Các loại View .31 2.2 Tạo View 32 Sử dụng Layout View (Master) với Razor 33 3.1 Giới thiệu _ViewStart 33 3.2 Tạo Layout View 33 3.3 Tạo View Page dùng Layout View .35 3.4 Tạo Partial View 36 3.5 Sử dụng Partial View 37 Tạo liên kết View 37 Chi tiết Razor 38 5.1 Các đặc điểm Razor .38 5.2 Viết lệnh C# Razor View 39 CÂU HỎI, BÀI TẬP 39 BÀI 5: TẠO CONTROLLER 41 ASP.NET MVC Routing .41 1.1 Giới thiệu rout 41 1.2 Cấu trúc 42 Controller 43 2.1 Khái niệm 43 2.2 Tạo controller .43 2.3 Action method 44 CÂU HỎI, BÀI TẬP 46 BÀI 6: TRUYỀN DỮ LIỆU GIỮA CONTROLLER VÀ VIEW .47 Tổng quan 47 Sử dụng ViewBag 47 Sử dụng ViewData .48 Truyền liệu Controller View 49 4.1 Kiểu sở 49 4.2 Kiểu Generic collection 49 4.3 Strongly-typed Views 49 4.4 Dynamic .50 CÂU HỎI, BÀI TẬP 51 BÀI 7: THIẾT KẾ VIEW BẰNG HTML HELPERS .53 Giới thiệu .53 Các loại HTML Helper 53 2.1 Rendering 53 2.2 HTML Form .55 2.3 Input 56 2.4 Strongly-typed 56 2.5 Template .57 Cập nhật liệu form 57 BÀI 8: HIỂN THỊ DỮ LIỆU TRÊN WEB GRID .59 Giới thiệu .59 Các bước tạo 59 Định dạng liệu 60 Phân trang 61 Sắp xếp liệu 61 CÂU HỎI, BÀI TẬP 62 BÀI 9: KIỂM TRA DỮ LIỆU TRÊN TRANG WEB .63 Data Annotations 63 1.1 Giới thiệu 63 1.2 Cú pháp chung 63 Chú thích liệu 64 Kiểm tra liệu với Validation Annotations .64 3.1 Bắt buộc nhập .65 3.2 Kiểm tra độ dài chuỗi 65 3.3 Kiểm tra miền giá trị 66 3.4 So sánh giá trị .66 3.5 Kiểm tra kiểu liệu 66 3.6 Kiểm tra liệu đọc .67 3.7 Kiểm tra mẫu email 67 3.8 Kiểm tra theo biểu thức có quy tắc .67 3.9 Hiển thị lỗi trang web 67 Giám sát lỗi controller .68 4.1 Thuộc tính IsValid ModelState 68 4.2 Giám sát lỗi phía Server .68 CÂU HỎI, BÀI TẬP 69 BÀI 10: TRIỂN KHAI ỨNG DỤNG 71 Custom Route 71 1.1 Đặc điểm ASP.NET MVC Routing 71 1.2 Tạo Routes tùy biến 71 Xuất ứng dụng localhost .72 2.1 Cài đặt IIS 72 2.2 Publish ứng dụng 73 2.3 Chèn ứng dụng web IIS .74 Xuất ứng dụng lên Internet 75 3.1 Đăng ký tên miền, thuê hosting 75 3.2 Upload CSDL .75 3.3 Cấu hình web.config 75 3.4 Upload web 76 CÂU HỎI, BÀI TẬP 76 TÀI LIỆU THAM KHẢO 77 GIÁO TRÌNH MƠ ĐUN Tên mơ đun: Lập trình web ASP.NET MVC Mã mơ đun: MĐ28 Vị trí, tính chất, ý nghĩa vai trị mơ đun:  Vị trí: giảng dạy sau học xong Thiết kế web, Lập trình Windows EF WCF, SQL Server, Cơ sở liệu, Quản trị CSDL Access  Tính chất: mơ đun tự chọn  Ý nghĩa vai trị mơ đun: cung cấp cho người học kiến thức kỹ để xây dựng hoàn chỉnh website thương mại điện tử, quảng bá cho tổ chức, cá nhân NET Framework theo mơ hình MVC Mục tiêu mô đun: Về kiến thức:       Tìm hiểu ngơn ngữ lập trình ASP.NET Tìm hiểu mơ hình MVC (Model – View – Controller) Biết q trình xử lý u cầu mơ hình xử lý MVC ASP.NET MVC Biết truyền gọi liệu Controller View Thiết kế phân trang cho trang Sử dụng Bootstrap để hiệu đảm bảo tính đồ họa cho trang web  Thiết kế website điện tử đơn giản, tổ chức, doanh nghiệp, cá nhân đơn giản Về kỹ năng:  Khả duy, sáng tạo việc thiết kế lập trình ứng dụng website điện tử  Kết nối xử lý liệu LINQ Entity Framework  Xây dựng ứng dụng web với ASP.Net MVC Về lực tự chủ trách nhiệm:  Rèn luyện nâng cao kỹ lập trình theo công nghệ Entity Framework (EF), Windows Communication Foundation (WCF)  Thực thực hành đảm bảo trình tự, an tồn Nội dung mơ đun: BÀI 1: TỔNG QUAN VỀ ASP.NET MVC Mã bài: 28.1 Giới thiệu: Model View Controller mơ hình kiến trúc theo hướng đối tượng, cho phép người phát triển tách ứng dụng thành thành phần chính: Model, View, Controller Mục tiêu:  Trình bày mơ hình, ưu nhược điểm MVC, lý làm ứng dụng mơ hình MVC  Biết thành phần quy trình xử lý yêu cầu ASP.NET MVC Nội dung chính: Mơ hình MVC 1.1 Giới thiệu Model View Controller mơ hình kiến trúc theo hướng đối tượng, cho phép người phát triển tách ứng dụng thành thành phần chính:  Model: thành phần đại diện cho liệu ứng dụng, bao gồm chức kiểm tra tính hợp lệ liệu  View: thành phần đảm trách việc hiển thị liệu thành phần giao diện người dùng  Controller: thành phần có trách nhiệm tiếp nhận xử lý yêu cầu gửi đến cho ứng dụng, làm nhiệm vụ điều phối công việc View Model  Việc phát triển ứng dụng, nâng cấp, bảo trì thử nghiệm trở nên đơn giản dễ dàng Hình 1.1 Mơ hình thành phần MVC 1.2 Ưu nhược điểm Ưu điểm  BÀI 9: KIỂM TRA DỮ LIỆU TRÊN TRANG WEB  Mã bài: 28.9  Giới thiệu:  Bài cung cấp cho HSSV kiến thức kỹ sử dụng Data Annotation Validational để kiểm tra, ràng buộc liệu nhập hiển thị lỗi form  Mục tiêu:  Biết công dụng Data Annotation Validataional  Sử dụng Data Annotation Model để thị label View  Sử dụng Validation Model để ràng buộc liệu nhập hiển thị lỗi View  Cẩn thận, an tồn  Nội dung chính: Data Annotations  1.1 Giới thiệu  Data Annotations thuộc tính đính kèm theo thuộc tính liệu model Chúng dùng để: o Tạo tên thân thiện cho thuộc tính liệu o Cài đặt kiểm tra tính hợp lệ liệu o Cách thức hiển thị liệu phát sinh Html view (khi dùng kết hợp với Html helper để render)  Chế độ hiển thị  Định dạng liệu o …  Thuộc namespace System.ComponentModel.DataAnnotaions  Lưu ý: có vài thuộc tính khơng thuộc namespace như: HiddenInput, Remote, ReadOnly, …  1.2 Cú pháp chung   Ví dụ: 63  25 Chú thích liệu  Tên thân thiện hiển thị view  [Display(Name= “Nội dung”)]  Định dạng liệu: thường dùng với kiểu ngày số  [DisplayFormat(ApplyFormatInEditMode=true|false, DataFormatString=“Biểu thức định dạng”)]  Cho phép che field form cập nhật  [ScaffoldColumn(true|false)] o Không phát sinh control view cập nhật (Create, Edit), thường dùng với field tự động tăng field tính tốn  Ví dụ: 64  Kiểm tra liệu với Validation Annotations  Validation Annotations thuộc tính Data Annotations thuộc tính có liên quan đến việc cài đặt kiểm tra tính hợp lệ liệu đầu vào từ phía người dùng  Những thuộc tính cung cấp cách thức cài đặt kiểm tra tính hợp lệ liệu phía máy chủ (server-side validation), framework hỗ trợ kiểm tra phía máy khách (client-side validation)  Để sử dụng thuộc tính này, phải khai báo phía thuộc tính liệu model  3.1 Bắt buộc nhập  Dùng thông báo hệ thống  [Required()]  Nội dung thông báo tùy biến  [Required(ErrorMessage=“Nội dung thông báo”)]  3.2 Kiểm tra độ dài chuỗi  Quy định chiều dài chuỗi nhập vào  Dùng thông báo hệ thống 65 o [StringLength(Độ dài tối đa)] o [StringLength(Độ dài tối đa, MinimumLength=Độ dài tối thiểu)] o [MinLength(Độ dài tối thiểu)],[MaxLength(Độ dài tối đa)]  Nội dung thông báo tùy biến o [StringLength(Độ dài tối đa, ErrorMessage= “Nội dung”)] o [StringLength(Độ dài tối đa, MinimumLength=Độ dài tối thiểu, ErrorMessage= “Nội dung”)] o [MinLength(Độ dài tối thiểu, ErrorMessage=“Nội dung”)] o [MaxLength(Độ dài tối đa, ErrorMessage=“Nội dung”)]  Ví dụ:   3.3 Kiểm tra miền giá trị  [Range(minimum, maximum)]  Ví dụ:   3.4 So sánh giá trị  Đối chiếu giá trị với thuộc tính liệu khác  [Compare(“Tên thuộc tính khác”)]  [Compare(“Tên thuộc tính khác”, ErrorMessage=“Nội dung báo”]  Ví dụ: 66   3.5 Kiểm tra kiểu liệu  [DataType(Kiểu liệu)]  [DataType(Kiểu liệu, ErrorMessage=“Nội dung báo”)]  Ví dụ:   Bảng liệt kê số kiểu liệu DataType   Hình 9.1 Các kiểu liệu DataType  3.6 Kiểm tra liệu đọc  Sử dụng namespace System.ComponentModel  [ReadOnly(true|false)]  3.7 Kiểm tra mẫu email  [EmailAddress()]  [EmailAddress(ErrorMessage=“Nội dung báo”)]  Ví dụ:  67  3.8 Kiểm tra theo biểu thức có quy tắc  [RegularExpression(Biểu thức quy định)]  Ví dụ:   Tham khảo thêm biểu thức quy định địa bên  http://msdn.microsoft.com/en-us/library/az24scfc.aspx  3.9 Hiển thị lỗi trang web  Muốn hiển thị thông báo cài đặt model, sử dụng phương thức sau:  @Html.ValidationMessageFor(): trả thông báo lỗi dạng HTML cho field cụ thể  Ví dụ: Thông báo lỗi cho field Email không hợp lệ xuất dấu *   @Html.ValidationSummary(): trả danh sách lỗi trang web dạng tag

Giám sát lỗi controller  4.1 Thuộc tính IsValid ModelState  Nếu thuộc tính IsValid true, nghĩa tất liệu view model hợp lệ  Ví dụ: 68   Kế hợp với thuộc tính khác o ModelState.IsValidField(“name”): field “name” có hợp lệ khơng? o ModelState[“name”].Errors.Count: tổng số lỗi field “name” o ModelState[“name”].Errors[i].ErrorMessage: thông báo lỗi thứ i field “name”  4.2 Giám sát lỗi phía Server  Sử dụng Validation Annotations kiểm lỗi mức Client trường hợp đơn giản Trong trường hợp phức tạp, phải kiểm lỗi phía Server  Sử dụng phương thức AddModelError ModelState để bổ sung lỗi vào tập hợp collection đối tượng ModelState  Cú pháp:  ModelState.AddModuleError(“key”, “Nội dung thông báo”)  Ví dụ: 69   CÂU HỎI, BÀI TẬP  Bài 9.1 Bổ sung kiểm tra liệu nhập thông báo lỗi cho giao diện quản trị nội dung 70  BÀI 10: TRIỂN KHAI ỨNG DỤNG  Mã bài: 28.10  Giới thiệu:  Bài cung cấp cho HSSV kiến thức kỹ hồn chỉnh cấu hình cần thiết trước xuất ứng dụng  Mục tiêu:     Biết quy tắc tạo Rout Tạo Custom Rout Xuất website An tồn, cẩn thận  Nội dung chính: Custom Route  1.1 Đặc điểm ASP.NET MVC Routing     ASP.NET MVC hỗ trợ chế định tuyến mạnh mẽ dễ cài đặt URL định tuyến để thân thiện với người dùng Giúp việc bảo mật tốt hợn Giúp Search Engine tìm kiếm trang web dễ  1.2 Tạo Routes tùy biến  Các URL request dễ dàng kết hợp với action method controller class cách sử dụng route mặc định Tuy nhiên, ứng dụng cần giải pháp nhận URL request với cấu trúc khác sao?  dễ dàng tạo route cách sử dụng phương thức MapRoute() để tạo ánh xạ (trong lớp RouteConfig)  Ví dụ: tạo route dùng để xem danh sách sản phẩm nhóm 71   Lưu ý: Custom routes phải khai báo trước Default route  Các cấu trúc routes sau hợp lệ   Cấu trúc route sau không hợp lệ {controller} {action} khơng có dấu “/” ký tự chữ  26 Xuất ứng dụng localhost  2.1 Cài đặt IIS  Vào Control Panel  Add or Remove Programes  Add or Remove Features  Đánh dấu chọn Internet Information Service 72   Khởi động lại máy tính  2.2 Publish ứng dụng  Click chuột phải lên project  Publish   Hình 10.1 Chọn đích xuất ứng dụng  Chọn Custom danh sách Select a publish target, nhập MYTARGET 73  Chọn File System danh sách Publish method, định ổ đĩa thư mục Target location   Hình 10.2 Chọn đích xuất ứng dụng  2.3 Chèn ứng dụng web IIS  Mở IIS  Click chuột phải lên Sites  chọn Add Website… 74   Hình 10.3 Đặt website vào IIS  Nhập chọn thông tin theo hướng dẫn   Hình 10.4 Khai báo thơng tin website IIS 27 Xuất ứng dụng lên Internet  3.1 Đăng ký tên miền, thuê hosting  Liên hệ http://pavietnam.vn để hướng dẫn thuê dịch vụ  3.2 Upload CSDL  Mở SQL Server  Backup CSDL SQL Server  Sao chép tập tin CSDL backup lên hosting 75  Kết nối đến SQL Server hosting  Click chuột phải lên tên CSDL hosting, chọn Restore  3.3 Cấu hình web.config  Thay đổi thông tin kết nối CSDL phù hợp với CSDL hosting   3.4 Upload web  Sao chép toàn tập tin, thư mục bên thư mục mà nhập ô Target location mục 2.2 vào thư mục public_html hosting  CÂU HỎI, BÀI TẬP  Bài 10.1 Đăng ký dịch vụ domain web hosting miễn phí xuất lên Internet 76  TÀI LIỆU THAM KHẢO [1] http://asp.net/mvc [2] http://w3schools.com 77 ... dùng 10 ASP.NET MVC 2.1 ASP.NET MVC gì?  ASP.NET MVC Framework hỗ trợ đầy đủ cho việc xây dựng ứng dụng web ASP.NET theo mô hình MVC  Giống ASP.NET Web Forms, ASP.NET MVC xây dựng dựa ASP.NET. .. viên sinh viên nghề Công nghệ Thông tin trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu, thực biên soạn tài liệu Lập trình web ASP.NET MVC Tài liệu biên soạn thuộc loại giáo trình phục vụ giảng... 77 GIÁO TRÌNH MƠ ĐUN Tên mơ đun: Lập trình web ASP.NET MVC Mã mơ đun: MĐ28 Vị trí, tính chất, ý nghĩa vai trị mơ đun:  Vị trí: giảng dạy sau học xong Thiết kế web, Lập trình Windows EF WCF,