(NB) Giáo trình “Lập trình ASP.NET MVC” được biên soạn dành cho sinh viên cao đẳng nghề Lập trình máy tính với mục tiêu cung cấp cho người học các kiến thức và kỹ năng cần thiết như Trình bày quá trình xử lý yêu cầu của mô hình xử lý MVC và ASP.NET MVC; Kết nối và xử lý dữ liệu bằng LINQ và Entity Framework;m Xây dựng được ứng dụng web với ASP.Net MVC; Rèn luyện và nâng cao kỹ năng lập trình theo công nghệ Entity Framework (EF), Windows Communication Foundation (WCF).
ỦY BAN NHÂN DÂN TỈNH BR – VT TRƯỜNG CAO ĐẲNG NGHỀ GIÁO TRÌNH MƠ ĐUN: LẬP TRÌNH ASP.NET MVC NGHỀ: LẬP TRÌNH MÁY TÍNH TRÌNH ĐỘ: CAO ĐẲNG Ban hành kèm theo Quyết định số: 01/QĐCĐN, ngày 04 tháng 01 năm 2016 của Hiệu trưởng trường Cao đẳng nghề tỉnh Bà Rịa – Vũng Tàu Bà Rịa – Vũng Tàu, năm 2016 TUN BỐ BẢN QUYỀN Tài liệu này thuộc loại sách giáo trình 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 ASP.NET MVC” được biên soạn dành cho sinh viên cao đẳng nghề Lập trình máy tính với mục tiêu cung cấp cho người học các kiến thức và kỹ năng cần thiết để 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ử, … theo mơ hình MVC trên.NET Framework 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 giúp cho người học dễ tiếp thu các kiến thức cần thiết và hình thành được kỹ năng nghề 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 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 xây dựng giáo trình này Bà Rịa – Vũng Tàu, ngày …… tháng …… năm 2016 Tham gia biên soạn Phan Hữu Phước – Chủ biên MỤC LỤC Trang 7 MƠ ĐUN LẬP TRÌNH ASP.NET MVC Vị trí, tính chất, ý nghĩa và vai trị của mơ đun: Được giảng dạy sau khi học xong Thiết kế web, Lập trình Windows EF và WCF, SQL Server 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: Trình bày q trình xử lý u cầu của mơ hình xử lý MVC và ASP.NET MVC 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 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: T T 10 11 Tên các bài trong mô đun Tổng quan về ASP.NET MVC Tạo ứng dụng web ASP.NET MVC Tổng quan về Entity Framework (EF) Truy vấn và cập nhật dữ liệu với LINQ và Entity Data Model Xây dựng Model Kiểm tra bài 1 6 Tạo Views Tạo Controllers Truyền dữ liệu giữa Controller và View Kiểm tra bài 7 8 Thiết kế View bằng HTML Helpers Kiểm tra bài 7 9 Kiểm tra dữ liệu trên trang web Kiểm tra bài 7 10 Hồn chỉnh ứng dụng Thời Hình thức gian giảng dạy Tích hợp Tích hợp Tích hợp 20 Tích hợp 15 15 10 10 15 15 10 Tích hợp Thực hành Tích hợp Tích hợp Tích hợp Thực hành Tích hợp Thực hành Tích hợp Thực hành Tích hợp Trang 8 12 Triển khai ứng dụng Cộng 10 150 Tích hợp Trang 9 BÀI 1 TỔNG QUAN VỀ ASP.NET MVC 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: 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ảro tì và thử nghiệm trở nên đơn giản và dễ dàng hơn Trang 10 @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 3.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” Trang 87 3.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ổ 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 Trang 88 BÀI 11 HỒN CHỈNH ỨNG DỤNG Giới thiệu: Bài này cung cấp cho HSSV kiến thức và kỹ năng sử dụng jQuery để trang trí và tạo hiệu ứng tương tác trang web trên trình duyệt của người dùng Mục tiêu: Biết cơng dụng của jQuery plugin Cài đặt được jQuery plugin cho ứng dụng Tạo được trang web có giao diện và tương tác sinh động Tạo nút FanPage và chức năng Comment của Facebook trên trang web An tồn, cẩn thận Cài đặt jQuery plugin Tải thư viện jquery và jqueryui tại jquery.com và lưu vào thư mục Scripts của website Đóng/mở nội dung trong khơng gian giới hạn $(function() { $( "#accordion" ).accordion(); }); Section 1
- Nunc tincidunt
- Proin dolor
- Aenean lacinia
Nội dung Section 1
Section 2Nội dung Section 2
Trang 89 Tạo hộp nhập tự động gợi ý nội dung $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Java", "JavaScript" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); Tags: Tạo khả năng kéo/thả #draggable { width: 150px; height: 0.5em; } $(function() { $( "#draggable" ).draggable(); }); 150px; padding: Trang 90Drag me around
Tạo khả năng kéo/thả để chọn #draggable { width: 100px; height: 100px; 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px; 0.5em; float: left; margin: 10px; } $(function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ) addClass( "ui-state-highlight" ) find( "p" ) html( "Dropped!" ); } }); });Drag me to my target
Drop here
padding: padding: Trang 91 Tạo giao diện Tabs $(function() { $( "#tabs" ).tabs(); });Nội dung tab1
Nội dung tab2
Nội dung tab3
Tạo Model Popup $(function() { $( "#dialog" ).dialog(); }); Trang 92Nội dung hộp thoại Popup
Tạo Datepicker $(function() { $( "#datepicker" ).datepicker(); });Date:
Tạo nút FanPage Đăng nhập Facebook Tạo Fan Page Vào https://developers.facebook.com/docs/plugins/pageplugin Khai báo các tùy chọn cho Fan Page Click chuột lên Sao chép và đặt đoạn code sau ngay sau thẻ mở Đặt đoạn code sau tại vị trí muốn hiển thị thơng tin FanPage Trang 93 Tạo chức năng Comment Tạo Application trên Facebook tại http://developers.facebook.com/setup/ Ghi lại App ID và App Secret sau khi click Thực hiện các bước tiếp theo để nhận được đoạn code XFBML Đặt đoạn code XFBML vào vị trí cần hiển thị nội dung Comment facebook CÂU HỎI, BÀI TẬP Bài 1: Tạo hiệu ứng phóng to ảnh khi rê chuột lên sản phẩm trong trang xem danh sách sản phẩm Bài 2: Tạo nút FanPage cho website ThuongMaiDienTu Bài 3: Tạo chức năng Comment cho từng sản phẩm, bài viết (khi xem nội dung chi tiết) Trang 94 BÀI 12 TRIỂN KHAI ỨNG DỤNG 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 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 Trang 95 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 Trang 96 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 12.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 Trang 97 Chọn File System trong danh sách Publish method, chỉ định ổ đĩa và thư mục tại Target location Hình 12.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 12.3. Đặt website vào IIS Nhập và chọn các thơng tin theo hướng dẫn dưới đây Trang 98 Hình 12.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 Trang 99 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 Đăng ký dịch vụ domain và web hosting miễn phí rồi xuất bản lên Internet Trang 100 TÀI LIỆU THAM KHẢO http://asp.net/mvc https://facebook.com http://jquery.com http://w3schools.com Trang 101 ... 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 ... đóng góp trong q? ?trình? ?xây dựng? ?giáo? ?trình? ?này Bà? ?Rịa – Vũng? ?Tàu, ngày …… tháng …… năm 2016 Tham gia biên soạn Phan Hữu Phước – Chủ biên MỤC LỤC Trang 7 MƠ ĐUN LẬP TRÌNH? ?ASP.NET? ?MVC Vị trí,? ?tính? ?chất, ý nghĩa và vai trị của mơ đun:... nền .NET Framework theo mơ hình? ?MVC Mục tiêu của mơ đun: Trình? ?bày q? ?trình? ?xử lý u cầu của mơ hình xử lý? ?MVC? ?và? ?ASP.NET? ? MVC 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