Đang tải... (xem toàn văn)
Nội dung giáo trình Lập trình web ASP.NET MVC được tác giả trình bày cô động, dễ hiểu kèm theo các bước hướng dẫn thực hành chi tiết theo nguyên tắc quan tâm đến kết quả đầu ra, khả năng tự học và kỹ năng cần thiết để HSSV có thể hoàn thành ứng dụng web quảng cáo sản phẩm, thương mại điện tử, … bằng .NET framework theo mô hình MVC, một trong những mô hình ứng dụng phổ biến hiện nay, đáp ứng nhu cầu thực tế của doanh nghiệp. Mời các bạn cùng tham khảo giáo trình.
BM/QT10/P.ĐTSV/04/04 Ban hành lần: 3 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 20…… của Hiệu trưởng Trường Cao đẳng Kỹ thuật Công nghệ BRVT) BM/QT10/P.ĐTSV/04/04 Ban hành lần: 3 BÀ RỊA – VŨNG TÀU, NĂM 2020 TUYÊN BỐ BẢN QUYỀN Nhằm đáp ứng nhu cầu học tập và nghiên cứu cho giảng viên và sinh viên nghề Công nghệ Thông tin trong trường Cao đẳng Kỹ thuật Cơng nghệ Bà Rịa – Vũng Tàu, chúng tơi đã thực hiện biên soạn tài liệu Lập trình web ASP.NET MVC Tài liệu được biên soạn thuộc loại giáo trình phục vụ giảng dạy và học tập, lưu hành nội bộ trong Nhà trường nên các nguồn thơng tin có thể được phép dùng ngun bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm LỜI GIỚI THIỆU Giáo trình “Lập trình web ASP.NET MVC” được biên soạn dựa trên khung chương trình đào tạo Cao đẳng nghề Cơng nghệ Thơng tin đã được 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 một số tài liệu, cơng nghệ hiện đạ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ày. Nội dung được tác giả trình bày cơ động, dễ hiểu kèm theo các bước hướng dẫn thực hành chi tiết theo ngun tắc quan tâm đến kết quả đầu ra, khả năng tự học và kỹ năng cần thiết để HSSV có thể hồn thành ứng dụng web quảng cáo sản phẩm, thương mại điện tử, … bằng .NET framework theo mơ hình MVC, một trong những mơ hình ứng dụng phổ biến hiện nay, đáp ứng nhu cầu thực tế của doanh nghiệp Nội dung giáo trình được chia thành 10 bài, trong đó: Bài 1: Tổng quan về 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 dữ liệu giữa controller và view Bài 7: Thiết kế view bằng HTML Helper Bài 8: Hiển thị dữ liệu trên Web Grid Bài 9: Kiểm tra dữ liệu trên trang web Bài 10: Triển khai ứng dụng Trong q trình biên soạn, chắc chắn giáo trình cịn nhiều thiếu sót. Tác giả rất mong nhận được ý kiến đóng góp của q thầy/cơ và các em học sinh, sinh viên để tiếp tục hồn thiện hơn Xin chân thành cảm ơn q đồng nghiệp, bạn bè đã có những ý kiến đóng góp trong q trình biên soạn giáo trình này Bà Rịa – Vũng Tàu, ngày …… tháng …… năm ……… Tham gia biên soạn 1. Phan Hữu Phước – Chủ biên MỤC LỤC 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 và vai trị của mơ đun: Vị trí: được giảng dạy sau khi học xong Thiết kế web, Lập trình Windows EF và WCF, SQL Server, Cơ sở dữ liệu, Quản trị CSDL Access Tính chất: là mơ đun tự chọn Ý nghĩa và vai trị của mơ đun: cung cấp cho người học kiến thức và kỹ năng để xây dựng hồn chỉnh một website thương mại điện tử, quảng bá cho các tổ chức, cá nhân trên nền .NET Framework theo mơ hình MVC Mục tiêu của mơ đun: Về kiến thức: Tìm hiểu được ngơn ngữ lập trình ASP.NET Tìm hiểu được mơ hình MVC (Model – View – Controller) Biết q trình xử lý u cầu của mơ hình xử lý MVC và ASP.NET MVC Biết được các truyền và gọi dữ liệu giữa Controller và View Thiết kế được phân trang cho từng trang Sử dụng được Bootstrap để hiệu quả và đảm bảo tính đồ họa cho từng trang web Thiết kế được những website điện tử đơn giản, các tổ chức, doanh nghiệp, cá nhân đơn giản Về kỹ năng: Khả năng tuy duy, sáng tạo trong việc thiết kế và lập trình các ứng dụng website điện tử cơ bản Kết nối và xử lý dữ liệu bằng LINQ và Entity Framework Xây dựng được ứng dụng web với ASP.Net MVC Về năng lực tự chủ và trách nhiệm: Ren luyên va nâng cao ky năng lâp trinh theo công nghê Entity Framework ̀ ̣ ̀ ̃ ̣ ̀ ̣ (EF), Windows Communication Foundation (WCF) Thực hiện các bài thực hành đảm bảo đúng trình tự, an tồn Nội dung của mơ đun: BÀI 1: TỔNG QUAN VỀ ASP.NET MVC Mã bài: 28.1 Giới thiệu: Model View Controller là một 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 được mơ hình, ưu và nhược điểm của MVC, lý do làm ứng dụng trên mơ hình MVC Biết các thành phần và quy trình xử lý u cầu của ASP.NET MVC Nội dung chính: Mơ hình MVC 1.1. Giới thiệu Model View Controller là một mơ hình kiến trúc theo hướng đối tượng, cho phép người phát triển tách một ứng dụng thành 3 thành phần chính: Model: thành phần đại diện cho dữ liệu của ứng dụng, bao gồm cả chức năng kiểm tra tính hợp lệ của dữ liệu View: thành phần đảm trách việc hiển thị dữ liệu và các thành phần trong giao diện người dùng Controller: thành phần có trách nhiệm tiếp nhận và xử lý các u cầu gửi đến cho ứng dụng, làm nhiệm vụ điều phối cơng việc giữa View và Model Việc phát triển ứng dụng, nâng cấp, bảo trì và thử nghiệm trở nên đơn giản và dễ dàng hơn Hình 1.1. Mơ hình 3 thành phần của MVC 1.2 Ưu và nhược điểm Ưu điểm Phát triển phần mềm một cách chun nghiệp hóa, có thể chia cơng việc cho nhiều nhóm chun mơn khác nhau Nhóm thiết kế Nhóm lập trình Nhóm tổ chức dữ liệu Giúp phát triển ứng dụng nhanh, đơn giản, dễ dàng nâng cấp Bảo trì: với các lớp được phân chia, các thành phần của một hệ thống dễ dàng được thay đổi nhưng có thể được cơ lập từng lớp, hoặc chỉ ảnh hướng đến lớp ngay gần kề nó, khơng làm ảnh hưởng đến cả ứng dụng Mở rộng: việc thêm chức năng vào từng lớp sẽ dễ dàng hơn Nhược điểm Thích hợp với các dự án vừa và lớn Mất nhiều thời gian trong q trình phát triển Mấ thời gian trung chuyển dữ liệu giữa các lớp 1.3. Lý do nên làm trên mơ hình MVC Mơ hình MVC đã chia ứng dụng thành các thành phần Model, View và Controller nên người phát triển có thể tạo nhiều View nhiều Controller cho các Model mà khơng phải đối mặt với việc thay đổi trong thiết kế Model Giúp cho việc duy trì, di chuyển và tổ chức ứng dụng dễ dàng hơn Muốn cho cột nào được sắp xếp thì bổ sung thuộc tính canSort:true|false Ví dụ: khơng cho phép sắp xếp cột ID và TenSanPham CÂU HỎI, BÀI TẬP Bài 8.1 Tạo các controller và view cho phép người dùng cập nhật các table trong CSDL Bài 8.2 Xử lý định dạng hiển thị, phân trang và sắp xếp cho các giao diện danh sách ở bài 1 BÀI 9: KIỂM TRA DỮ LIỆU TRÊN TRANG WEB Mã bài: 28.9 Giới thiệu: Bài này cung cấp cho HSSV kiến thức và kỹ năng sử dụng các Data Annotation và Validational để kiểm tra, ràng buộc dữ liệu nhập và hiển thị lỗi trên form Mục tiêu: Biết công dụng của Data Annotation và Validataional Sử dụng được Data Annotation trong Model để hiện thị các label trên View Sử dụng được Validation trong Model để ràng buộc dữ liệu nhập và hiển thị lỗi trên View Cẩn thận, an tồn Nội dung chính: Data Annotations 1.1. Giới thiệu Data Annotations chính là các thuộc tính đính kèm theo thuộc tính dữ liệu trong model. Chúng dùng để: Tạo tên thân thiện cho thuộc tính dữ liệu Cài đặt các kiểm tra tính hợp lệ của dữ liệu Cách thức hiển thị của dữ liệu khi phát sinh Html trên view (khi dùng kết hợp với các Html helper để render) Chế độ hiển thị Định dạng dữ liệu … Thuộc namespace System.ComponentModel.DataAnnotaions Lưu ý: có một vài thuộc tính khơng thuộc namespace này như: HiddenInput, Remote, ReadOnly, … 1.2. Cú pháp chung Ví dụ: Chú thích dữ liệu Tên thân thiện khi hiển thị trên view [Display(Name= “Nội dung”)] Định dạng dữ liệu: thường dùng với kiểu ngày hoặc số [DisplayFormat(ApplyFormatInEditMode=true|false, DataFormatString=“Biểu thức định dạng”)] Cho phép che đi field trong form cập nhật [ScaffoldColumn(true|false)] Khơng phát sinh control trong view cập nhật (Create, Edit), thường dùng với các field tự động tăng hoặc field tính tốn Ví dụ: Kiểm tra dữ liệu với Validation Annotations Validation Annotations chính là các thuộc tính của Data Annotations nhưng các thuộc tính này có liên quan đến việc cài đặt các kiểm tra tính hợp lệ của dữ liệu đầu vào từ phía người dùng Những thuộc tính này cung cấp cách thức cài đặt các kiểm tra tính hợp lệ của dữ liệu phía máy chủ (serverside validation), và framework hỗ trợ kiểm tra tại phía máy khách (clientside validation) Để sử dụng một trong những thuộc tính này, chúng ta phải khai báo nó ngay phía trên thuộc tính dữ liệu trong model 3.1. Bắt buộc nhập Dùng thơng báo của 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 của hệ thống [StringLength(Độ dài tối đa)] [StringLength(Độ dài tối đa, MinimumLength=Độ dài tối thiểu)] [MinLength(Độ đa)] dài tối thiểu)],[MaxLength(Độ dài tối Nội dung thông báo tùy biến [StringLength(Độ dung”)] dài tối đa, ErrorMessage= “Nội [StringLength(Độ dài tối đa, MinimumLength=Độ dài tối thiểu, ErrorMessage= “Nội dung”)] [MinLength(Độ dài tối thiểu, ErrorMessage=“Nội dung”)] [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 một thuộc tính dữ 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ụ: 3.5. Kiểm tra kiểu dữ 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ê một số kiểu dữ liệu cơ bản của DataType Hình 9.1. Các kiểu dữ liệu cơ bản của DataType 3.6. Kiểm tra dữ liệu chỉ đọ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ụ: 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 các biểu thức quy định tại địa chỉ bên dưới http://msdn.microsoft.com/enus/library/az24scfc.aspx 3.9. Hiển thị lỗi trên trang web Muốn hiển thị các thơng báo đã cài đặt trong model, chúng ta sử dụng 2 phương thức sau: @Html.ValidationMessageFor(): trả về thơng báo lỗi dưới dạng HTML cho field cụ thể Ví dụ: Thơng báo lỗi cho field Email nếu khơng hợp lệ thì xuất hiện dấu * @Html.ValidationSummary(): trả danh sách lỗi trang web dưới dạng bộ tag- Giám sát lỗi trong controller 4.1. Thuộc tính IsValid của ModelState Nếu thuộc tính IsValid là true, nghĩa là tất cả dữ liệu trên view model đều hợp lệ Ví dụ: Kế hợp với các thuộc tính khác ModelState.IsValidField(“name”): field “name” có hợp lệ khơng? ModelState[“name”].Errors.Count: tổng số lỗi của field “name” ModelState[“name”].Errors[i].ErrorMessage: thơng báo lỗi thứ i của 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 đối với những trường hợp đơn giản. Trong những trường hợp phức tạp, chúng ta phải kiểm lỗi ở phía Server Sử dụng phương thức AddModelError của ModelState để bổ sung các lỗi vào tập hợp collection của đối tượng ModelState Cú pháp: ModelState.AddModuleError(“key”, “Nội dung thơng báo”) Ví dụ: CÂU HỎI, BÀI TẬP Bài 9.1. Bổ sung kiểm tra dữ liệu nhập và thơng báo lỗi cho các giao diện quản trị nội dung BÀI 10: TRIỂN KHAI ỨNG DỤNG Mã bài: 28.10 Giới thiệu: Bài này cung cấp cho HSSV kiến thức và kỹ năng hồn chỉnh cấu hình cần thiết trước khi xuất bản ứng dụng Mục tiêu: Biết quy tắc tạo một Rout Tạo được Custom Rout Xuất bản website An tồn, cẩn thận Nội dung chính: Custom Route 1.1. Đặc điểm của ASP.NET MVC Routing ASP.NET MVC hỗ trợ cơ chế định tuyến rất mạnh mẽ và dễ cài đặt URL được đị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ễ hơn 1.2. Tạo Routes tùy biến Các URL request có thể dễ dàng kết hợp với các action method trong các controller class bằng cách sử dụng route mặc định. Tuy nhiên, nếu ứng dụng cần giải pháp nhận các URL request với một cấu trúc khác thì sao? có thể dễ dàng tạo ra các route mới bằng cách sử dụng phương thức MapRoute() để tạo ra ánh xạ mới (trong lớp RouteConfig) Ví dụ: tạo route mới dùng để xem danh sách sản phẩm trong một nhóm Lưu ý: Custom routes phải được khai báo trước Default route Các cấu trúc routes sau là hợp lệ Cấu trúc route sau là khơng hợp lệ vì giữa {controller} và {action} khơng có dấu “/” hoặc ký tự chữ Xuất bản ứ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 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 bản ứng dụng Chọn Custom trong danh sách Select a publish target, nhập MYTARGET Chọn File System trong danh sách Publish method, chỉ định ổ đĩa và thư mục tại Target location Hình 10.2. Chọn đích xuất bản ứng dụng 2.3. Chèn ứng dụng web trên IIS Mở IIS Click chuột phải lên Sites chọn Add Website… Hình 10.3. Đặt website vào IIS Nhập và chọn các thơng tin theo hướng dẫn dưới đây Hình 10.4. Khai báo thơng tin website trong IIS Xuất bản ứng dụng lên Internet 3.1. Đăng ký tên miền, th hosting Liên hệ http://pavietnam.vn để được hướng dẫn và th dịch vụ 3.2. Upload CSDL Mở SQL Server Backup CSDL trên SQL Server Sao chép tập tin CSDL đã backup lên hosting Kết nối đến SQL Server trên hosting Click chuột phải lên tên CSDL trên 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 trên hosting 3.4. Upload web Sao chép tồn bộ tập tin, thư mục bên trong thư mục mà chúng ta đã nhập trong ơ Target location tại mục 2.2 vào thư mục public_html trên hosting CÂU HỎI, BÀI TẬP Bài 10.1. Đăng ký dịch vụ domain và web hosting miễn phí rồi xuất bản lên Internet TÀI LIỆU THAM KHẢO http://asp.net/mvc http://w3schools.com ... viên nghề ? ?Công? ?nghệ ? ?Thông? ?tin? ?trong trường? ?Cao? ?đẳng? ?Kỹ ? ?thuật? ?Công? ?nghệ? ? Bà Rịa – Vũng Tàu, chúng tơi đã thực hiện biên soạn tài liệu? ?Lập? ?trình? ?web? ? ASP.NET? ?MVC Tài liệu được biên soạn thuộc loại? ?giáo? ?trình? ?phục vụ giảng dạy và học... LỜI GIỚI THIỆU Giáo? ? trình? ? ? ?Lập? ? trình? ? web ? ?ASP.NET MVC? ?? được biên soạn dựa trên khung chương? ?trình? ?đào tạo? ?Cao? ?đẳng nghề Cơng? ?nghệ Thơng? ?tin? ?đã được Trường? ?Cao? ?đẳng? ?Kỹ? ?thuật? ?Cơng nghê Bà Rịa – Vũng Tàu phê duyệt... người dùng ASP.NET? ?MVC 2.1 ASP.NET? ?MVC? ?là gì? ASP.NET? ?MVC? ?là một Framework hỗ trợ đầy đủ cho việc xây dựng ứng dụng? ?web? ?ASP.NET? ?theo mơ hình? ?MVC Giống như? ?ASP.NET? ?Web? ?Forms,? ?ASP.NET? ?MVC? ?được xây dựng dựa trên
