o Là các thành phần xử lý tương tác với người dùng, làm việc với Model, chọn một View thích hợp để hiển thị thông tin giao diện người dùng o Trong một ứng dụng MVC, View hiển thị thông t[r]
(1)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…… Hiệu trưởng Trường Cao đẳng Kỹ thuật Công nghệ BR-VT)
(2)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 ngun trích dùng cho mục đích đào tạo tham khảo
(3)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 q 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
(4)MỤC LỤC
LỜI GIỚI THIỆU
MỤC LỤC
BÀI 1: TỔNG QUAN VỀ ASP.NET MVC
1 Mơ hình MVC
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
2 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
1 Thao tác tạo 17
2 Tổ chức lưu trữ 18
3 Phân biệt ASPX Razor View Engine 19
4 Cú pháp mã Razor 19
5 Tạo Web Page đơn giản với mã Razor 20
6 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
1 Khái niệm 23
2 Các loại Model 23
(5)2.2 Business Model 24
2.3 View Model 24
3 Tạo Data Model 24
4 Model Binder 31
4.1 Giới thiệu DefaultModelBinder 32
4.2 Giới thiệu Model Binding (Mơ hình liên kết) 32
CÂU HỎI, BÀI TẬP 33
BÀI 4: TẠO VIEW 35
1 Khái niệm View 35
2 Tạo View 35
2.1 Các loại View 35
2.2 Tạo View 36
3 Sử dụng Layout View (Master) với Razor 37
3.1 Giới thiệu _ViewStart 37
3.2 Tạo Layout View 37
3.3 Tạo View Page dùng Layout View 39
3.4 Tạo Partial View 40
3.5 Sử dụng Partial View 41
4 Tạo liên kết View 41
5 Chi tiết Razor 42
5.1 Các đặc điểm Razor 42
5.2 Viết lệnh C# Razor View 43
CÂU HỎI, BÀI TẬP 43
BÀI 5: TẠO CONTROLLER 45
1 ASP.NET MVC Routing 45
1.1 Giới thiệu rout 45
1.2 Cấu trúc 46
(6)2.1 Khái niệm 47
2.2 Tạo controller 47
2.3 Action method 48
CÂU HỎI, BÀI TẬP 50
BÀI 6: TRUYỀN DỮ LIỆU GIỮA CONTROLLER VÀ VIEW 51
1 Tổng quan 51
2 Sử dụng ViewBag 51
3 Sử dụng ViewData 52
4 Truyền liệu Controller View 53
4.1 Kiểu sở 53
4.2 Kiểu Generic collection 53
4.3 Strongly-typed Views 53
4.4 Dynamic 54
CÂU HỎI, BÀI TẬP 55
BÀI 7: THIẾT KẾ VIEW BẰNG HTML HELPERS 57
1 Giới thiệu 57
2 Các loại HTML Helper 57
2.1 Rendering 57
2.2 HTML Form 59
2.3 Input 60
2.4 Strongly-typed 60
2.5 Template 61
3 Cập nhật liệu form 61
BÀI 8: HIỂN THỊ DỮ LIỆU TRÊN WEB GRID 63
1 Giới thiệu 63
2 Các bước tạo 63
3 Định dạng liệu 64
(7)5 Sắp xếp liệu 65
CÂU HỎI, BÀI TẬP 66
BÀI 9: KIỂM TRA DỮ LIỆU TRÊN TRANG WEB 67
1 Data Annotations 67
1.1 Giới thiệu 67
1.2 Cú pháp chung 67
2 Chú thích liệu 68
3 Kiểm tra liệu với Validation Annotations 68
3.1 Bắt buộc nhập 69
3.2 Kiểm tra độ dài chuỗi 69
3.3 Kiểm tra miền giá trị 70
3.4 So sánh giá trị 70
3.5 Kiểm tra kiểu liệu 70
3.6 Kiểm tra liệu đọc 71
3.7 Kiểm tra mẫu email 71
3.8 Kiểm tra theo biểu thức có quy tắc 71
3.9 Hiển thị lỗi trang web 71
4 Giám sát lỗi controller 72
4.1 Thuộc tính IsValid ModelState 72
4.2 Giám sát lỗi phía Server 72
CÂU HỎI, BÀI TẬP 73
BÀI 10: TRIỂN KHAI ỨNG DỤNG 75
1 Custom Route 75
1.1 Đặc điểm ASP.NET MVC Routing 75
1.2 Tạo Routes tùy biến 75
2 Xuất ứng dụng localhost 76
2.1 Cài đặt IIS 76
(8)2.3 Chèn ứng dụng web IIS 78
3 Xuất ứng dụng lên Internet 79
3.1 Đăng ký tên miền, thuê hosting 79
3.2 Upload CSDL 79
3.3 Cấu hình web.config 79
3.4 Upload web 80
CÂU HỎI, BÀI TẬP 80
(9)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
(10)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: 1 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
(11)1.2 Ưu nhược điểm Ưu điểm
Phát triển phần mềm cách chun nghiệp hóa, chia cơng việc cho nhiều nhóm chun mơn khác
o Nhóm thiết kế o Nhóm lập trình
o Nhóm tổ chức 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 lớp phân chia, thành phần hệ thống dễ dàng thay đổi cô lập lớp, ảnh hướng đến lớp gần kề nó, khơng làm ảnh hưởng đến ứng dụng
Mở rộng: việc thêm chức vào lớp dễ dàng
Nhược điểm
Thích hợp với dự án vừa lớn
Mất nhiều thời gian trình phát triển Mấ thời gian trung chuyển liệu lớp 1.3 Lý nên làm mơ hình MVC
Mơ hình MVC chia ứng dụng thành thành phần Model, View Controller nên người phát triển tạo nhiều View nhiều Controller cho Model mà đối mặt với việc thay đổi thiết kế Model
Giúp cho việc trì, di chuyển tổ chức ứng dụng dễ dàng
Đối với người việc xây dựng ứng dụng dựa mơ hình MVC phức tạp lãng phí cơng việc xây dựng dự án lớn, nhiêu “bí mật” MVC khơng nằm chỗ viết code mà chỗ trì
Cho phép sửa code mà không ảnh hưởng nhiều đến thành phần khác Cho phép làm việc nhóm trở nên dễ dàng nhóm làm việc dựa
trên mạnh
Nhóm View: chịu trách nhiệm xây dựng giao diện tương tác với người dùng
(12) Nhóm Controller: có nhìn tổng thể luồng ứng dụng, quản lý yêu cầu, làm việc với Model lựa chọn View hiển thị cho người dùng
2 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 Framework Điều có nghĩa người phát triển sử dụng API ứng dụng ASP.NET Web Forms truyền thống vào ứng dụng ASP.NET MVC
Trong ASP.NET MVC, nhiều cải tiến ASP.NET đưa vào Framework
Mục đích mẫu thiết kế lập xử lý nghiệp vụ từ giao diện người dùng để tập trung vào khả bảo trì, cải tiến, kiểm thử tốt làm cho ứng dụng có cấu trúc gọn
MVC Framework định nghĩa namespace System.Web.Mvc 2.2 Kiến trúc
Hình 1.2 Mơ hình kiến trúc thành phần MVC Models thành phần có nhiệm vụ:
o Đọc ghi liệu
(13)o Tất nghiệp vụ logic thực thi Model Dữ liệu nhập từ người dùng thông qua View để kiểm tra Model trước lưu vào CSDL Việc truy xuất, xác nhận lưu liệu phần việc Model
Views
o Là thành phần chịu trách nhiệm hiển thị thông tin cho người dùng thông qua giao diện
o Các thông tin cần hiển thị View tạo từ thành phần Models mơ hình liệu
Controllers
o Là thành phần xử lý tương tác với người dùng, làm việc với Model, chọn View thích hợp để hiển thị thơng tin giao diện người dùng o Trong ứng dụng MVC, View hiển thị thơng tin, cịn điều khiển dịng
nhập xuất người dùng Controller đảm trách 2.3 Quá trình xử lý yêu cầu
Một khái niệm quan trọng để hiều ứng dụng MVC khơng có mối quan hệ tồn yêu cầu tập tin vật lý bên Web Server
o Trong ứng dụng ASP.NET Web Forms truyền thống, yêu cầu dịch thành lời gọi đến tập tin Web Server Ví dụ: yêu cầu url http://myapp/mypage.aspx Web Server thơng dịch u cầu cách tìm kiếm thư mục ứng dụng tập tin có tên mypage.aspx Sau xử lý tập tin trả kết dạng HTML
o Đối với ứng dụng MVC, tiếp nhận u cầu (ví dụ: http://myapp/product/list) thành phần gọi “routing engine” so sánh yêu cầu với route cụ thể.
Route xác định yêu cầu cách sử dụng chuỗi nền, thiết lập Controller phương thức bên Controller cần xử lý yêu cầu
(14)Hình 1.3 Quá trình xử lý yêu cầu MVC 2.4 Một số đặc điểm
Tiếp tục hỗ trợ tính ASP.NET
o Hỗ trợ sử dụng tập tin ASPX, ASCX, Master thành phần View
o Hỗ trợ đầy đủ tính bảo mật ASP.NET
Form/Windows authenticate, URL authorization, Membership/Roles, Output data caching, secion/profile state, configuration system, provider architecture, …
o 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, …
Có khả mở rộng ứng dụng, thứ MVC thiết kế để dễ thay thế, dễ dàng tùy biến
Ánh xạ URL mạnh mẽ, cho phép xây dựng ứng dụng với URL gọn gàng, thân thiện với Search Engine
Không sử dụng mơ hình PostBack từ giao diện gửi đến Server Thay vào đó, chủ động đưa PostBack từ View đến thẳng Controller tùy ý Khơng cịn ViewState hay Page Lifecycle tồn mơ hình MVC Hỗ trợ công cụ tạo View (Support for Multiple View Engine)
o Cho phép chọn công cụ tạo View
o Hộp thoại New Project cho phép xác định View Engine mặc định cho project
o Các lọa View Engine Web Forms (ASPX) Razor
(15) Hỗ trợ định tuyến
o ASP.NET MVC Framework có máy ánh xạ URL thật mạnh mẽ
o Bộ máy cung cấp phương pháp linh hoạt việc ánh xạ URLs sang Controller
o Có thể dễ dàng định quy luật cài đặt đường ASP.NET MVC dựa vào quy luật để xác định Controller phương thức (Action) cần phải thực thi
o ASP.NET cịn có khả phân tích URL, chuyển thông số URL thành tham số lời gọi tới phương thức Controller Model Binding
o Model Binding tính mạnh ASP.NET MVC
o Hỗ trợ viết phương thức nhận đối tượng tùy biến ahm số o Với hỗ trợ Model Binding, người phát triển cần tập
trung vào việc cài đặt nghiệp vụ logic, không cần phải bận tâm việc suy nghỉ làm cách để ánh xạ liệu từ người dùng sang đối tượng NET)
Tính Bunding áp dụng mặc định Người phát triển không cần phải gọi script tập tin css riên biệt tất đóng gói nén lại
Filters: tính mạnh ASP.NET MVC, hỗ trợ cho việc kiểm tra tính hợp lệ trước phương thức hành động gọi sau thi hành
Razor View
o Cú pháp Razor gọn gàng xúc tích, địi hỏi số lượng tối thiểu tổ hợp phím
o Tìm hiểu Razor tương đối dễ dàng dựa C# HTML
o Visual Studio bao gồm IntelliSense mã cú pháp Razor màu hóa o Với Razor View kiểm tra đơn vị mà khơng địi hỏi phải chạy
ứng dụng phải chạy Web Server
Từ đặc điểm nêu, tạm tóm tắt lại ưu khuyết điểm ASP.NET MVC sau:
(16)o Có tính mở rộng thay thành phần cách dễ dàng o Không sử dụng ViewState để điều khiển ứng dụng
o Bổ sung hệ thống định tuyến (Routers)
o Hỗ trợ tối đa cho việc kiểm thử việc tạo cài đặt unitests tự động
o Hỗ trợ kết hợp tốt người lập trình thiết kế giao diện Khuyết điểm
Thay đổi cách lập trình Web Forms nên gây nhiều khó khăn cho người chuyên sử dụng Web Forms chuyển sang mô hình (khơng cịn hướng đến kiển control)
Người lập trình phải biết nhiều HTTP, HTML, CSS Javascript Áp dụng cho dự án nhỏ cồng kềnh phức tạp
2.5 So sánh MVC Web Form
ASP.NET Web Forms sử dụng ViewState để quản lý có tương tác với người dùng xử lý chậm
ASP.NET MVC chia làm thành phần: Model, View, Controller
Mọi tương tác người dùng với Views xử lý thông qua việc thực phương thức hành động Controllers, khơng cịn PostBack, Lifecycle events
Việc kiểm tra (test) gỡ lỗi (debug)
o ASP.NET Web Forms chạy tất tiến trình, thay đổi ID control ảnh hưởng đến ứng dụng
o Với MVC, việc sử dụng unit test để thẩm định dễ dàng Controller thực
Bảng so sánh tính ASP.NET Web Forms ASP.NET MVC Tính năng ASP.NET Web Forms ASP.NET MVC Kiến trúc Mơ hình Web form
Bussiness Database
Sử dụng việc phân chia ứng dụng thành Models, Views, Controllers
Cú pháp Sử dụng cú pháp Web Form, tất kiện controls Server quản lý
Các kiện điều khiển controller, controller không Server quản lý
Truy cập liệu
Sử dụng hầu hết công nghệ truy cập liệu
(17)ứng dụng mơ hình truy cập đối tượng Debug Phải thực tất bao
gồm lớp truy cập liệu, hiển thị, điều khiển control
Có thể sử dụng unit test để kiểm tra phương thức controller
Tốc độ phân tải
Chậm trang có nhiều control ViewState q lớn
Nhanh khơng quản lý ViewState
Tương tác với Javascript
Khó khăn control điều khiển Server
Dễ dàng đối tượng khơng Server quản lý
URL Không thân thiện Thân thiện
CÂU HỎI, BÀI TẬP
(18)BÀI 2: TẠO ỨNG DỤNG WEB ASP.NET MVC Mã bài: 28.2
Giới thiệu:
Bài cung cấp cho người học kiến thức kỹ để tạo ứng dụng ASP.NET MVC sử dụng mã Razor cài đặt Entity Framework Mục tiêu:
Trình bày cú pháp mã Razor
Tạo ứng dụng web ASP.NET MVC Cài đặt Entity Framework cho ứng dụng
Cẩn thận thực bước, chọn ngôn ngữ, đường dẫn tạo ứng dụng
Nội dung chính: 1 Thao tác tạo
Khởi động Visual Studio 2015/2017/2019
Tạo project, chọn NET Framework, thư mục tên project theo hộp thoại chọn OK
Hình 2.1 Tạo ứng dụng ASP.NET
(19)Hình 2.2 Chọn mơ hình MVC cho ứng dụng web Chọn No Authentication
Hình 2.3 Chọn loại chứng thực quản lý người dùng 3 Tổ chức lưu trữ
Cấu trúc thư mục ứng dụng ASP.NET MVC gồm thực mục chính: Controllers: lưu trữ class đóng vai trị Controller
(20)Các thư mục khác
Content: chứa tập tin CSS, hình ảnh liên quan đến giao diện Scripts: chứa thư viện Javascript, jquery
App_Start: chứa tập tin liên quan đến việc cấu hình cho tính như: routes, filters, bundles
App_Data: lưu trữ tập tin liệu XML local database, SQLite Bin: lưu trữ compiled ứng dụng
4 Phân biệt ASPX Razor View Engine Giống nhau
Đều dùng để thị giao diện Web Browser, có khái niệm Master Page User Control định nghĩa với Layout (View để kế thừa Layout) PartialView (subView)
Khác nhau
ASPX: sử dụng Master Page User Control (kể đóng vai trị thị liệu khơng xử lý liệu) dễ dàng cho người lập trình chưa kịp thích nghi với phong cách MVC, ngồi sử dụng subView để thay đổi cho User Control để xử lý liệu từ action
Razor: hỗ trợ mạnh Javascript, tùy chỉnh linh hoạt code C# với HTML, linh hoạt Layout subView (PartialView)
Cú pháp HTML Helpers ASPX
<% các_lệnh_được_viết_ở_đây %>
Cú pháp HTML Helper Razor
@các_lệnh_được_viết_ở_đây
Ví dụ: tạo TextBox có Id txtFirstName @Html.TextBox(“txtFirstName”)
5 Cú pháp mã Razor
Khối lệnh
@{
//Các lệnh C# viết }
Biểu thức Inline: bắt đầu @
<p>@DateTime.Now.ToString(“dd/MM/yyyy”)</p>
(21)o for
@for(var i = 10; i < 21; i++) {<p>Line @i</p>}
o foreach
@foreach (var x in Request.ServerVariables) {<li>@x</li>}
o while
@{
var i = 0; while (i < 5) {
i += 1;
<p>Line @i</p> }
}
Tập tin có phần mở rộng .cshtml 6 Tạo Web Page đơn giản với mã Razor
Click chuột phải lên project Add New Item…
(22)7 Cài đặt Entity Framework
Click chuột phải lên project Manage NuGet Packages Chọn Online nuget.org bên trái
Nhập entity framework vào hộp tìm kiếm
Chờ Magage NuGet Packages hiển thị kết click chuột lên nút Install dùng EntityFramework danh sách để cài đặt
Hình 2.5 Tìm kiếm cài đặt Entity Framework cho ứng dụng CÂU HỎI, BÀI TẬP
(23)Sản phẩm Sản phẩm …
Sản phẩm
Bài 2.3 Sử dụng vòng lặp tạo nội dung cho trang chủ
Sản phẩm Sản phẩm Sản phẩm Sản phẩm
Sản phẩm Sản phẩm Sản phẩm Sản phẩm
Sản phẩm Sản phẩm 10 Sản phẩm 11 Sản phẩm 12
GỢI Ý, ĐÁP ÁN Bài 2.2 Sử dụng vòng lặp for foreach
(24)BÀI 3: XÂY DỰNG MODEL Mã bài: 28.3
Giới thiệu:
Bài giúp HSSV biết rõ Model, kỹ tạo Model cho ứng dụng Mục tiêu:
Trình bày khái niệm công dụng Model Biết loại Model
Tạo Data Model với EF
Lập trình hàm đọc cập nhật liệu thông qua Model
Cẩn thận, thực bước tạo Entity Data Model, khai báo thông tin kết nối đến nguồn liệu
Nội dung chính: 1 Khái niệm
Là thành phần cốt lõi ứng dụng, có nhiệm vụ truy cập liệu từ nguồn liệu cung cấp liệu cho nguồn liệu
Lưu trữ thơng tin, trạng thái đối tượng
Tất nghiệp vụ logic thực thi Model
Một model class ứng dụng ASP.NET MVC không trực tiếp xử lý đầu vào từ trình duyệt, khơng tạo HTML cho trình duyệt
Dữ liệu nhập vào từ người dùng thông qua View để kiểm tra Model trước lưu vào CSDL
Model phân làm loại: Data Model, Business Model View Model với nhiệu vụ cụ thể khác
8 Các loại Model 2.1 Data Model
Các đối tượng Data Model đại diện cho class tương tác với CSDL Các class tạo công cụ Entity Framework (EF)
(25)2.2 Business Model
Các class Business model thường thực chức kiểm tra quy tắc nghiệp vụ xử lý nghiệp vụ (ví dụ: tính tốn chi phí vận chuyển cụ thể cho giỏ hàng dựa trọng lượng mặt hàng mua) Với phần trách nhiệm xử lý đó, class business model tương tác với class Data model để đọc lưu trữ liệu CSDL
2.3 View Model
Các class View model cung cấp thông tin truyền vào từ controller đến view để view biết render cho trình duyệt Ví dụ: class chứa thơng tin sản phẩm, view sử dụng class để hiển thị tên sản phẩm, giá bán hình ảnh
Chức view model class không xử lý điều gì, thay vào đó, chức chứa liệu siêu liệu tùy chọn (optional metadata) giúp cho view render xác
View model sử dụng người dùng yêu cầu từ view render trước (ví dụ: submit form liên hệ)
9 Tạo Data Model
3.1 Tạo CSDL bookstore project
Bước 1: click chuột phải lên thư mục App_Data project Bước 2: chọn Add New Item… Xuất hộp thoai
Bước 3: Chọn Data, SQL Server Database đặt tên cho CSDL chọn Add
(26)3.2 Tạo ADO.NET Entity Data Model
Bước 1: tạo thư mục dtModels thư mục Models
Bước 2: click chuột phải thư mục Models, chọn Add ADO.NET Entity Dat Model
Hình 3.1 Các bước tạo ADO.NET Entity Data Model Bước 3: đặt tên cho model chọn OK
Hình 3.2 Hộp thoại đặt tên cho Model
Bước 4: chọn Code First from database hình bên chọn Next
(27)Hình 3.3 Đặt tên cho chuỗi kết nối Bước 6: đánh dấu chọn object CSDL chọn Finish
(28)Kết có sau hoàn tất tạo ADO.NET Entity Data Model
Hình 3.5 Các lớp đối tượng model 10 Model Binder
Model binder MVC cung cấp cách thức đơn giản để ánh xạ giá trị gửi từ form thành kiểu liệu NET Framework truyền kiểu đến phương thức action tham số
Các model binder giống cơng cụ chuyển đổi kiểu liệu chúng chuyển đổi HTTP request thành đối tượng truyền vào phương thức action Tuy nhiên, chúng có thơng tin ngữ cảnh controller hành
Model binder mặc định MVC có tên DefaultModelBinder 4.1 Giới thiệu DefaultModelBinder
Có khả thực mơ hình liên kết với hầu hết kiểu NET Framework, bao gồm:
o Các class theo truyền thống, Array, IList, ICollection với đối tượng IDictionary
4.2 Giới thiệu Model Binding (Mơ hình liên kết)
Model Binding tính mạnh ASP.NET MVC
o Giúp việc viết phương thức nhận đối tượng tùy biến tham số
o Giúp tập trung vào việc cài đặt logic suy nghĩ làm cách để ánh xạ liệu người dùng với đối tượng NET
Ví dụ 1: Edit View
(29) Tính model binding ASP.NET MVC cung cấp hỗ trợ cho việc tạo ánh xạ giá trị gọi từ form sang kiểu đối tượng tương ứng với tham số phương thức action
Ví dụ 2: tạo model class thực model binding đơn giản (nguồn liệu table CSDL SQL Server)
Model class: PhanLoaiController, gồm action: Index, Create, Edit Các View tương ứng với action: Index, Create, Edit
(30) Các View tương ứng với action PhanLoaiController class
CÂU HỎI, BÀI TẬP
(31)BÀI 4: TẠO VIEW Mã bài: 28.4 Giới thiệu:
Bài cung cấp cho HSSV kiến thức kỹ tạo giao diện trang ứng dụng ASP.NET MVC
Mục tiêu:
Trình bày cơng dụng loại View Trình bày quy trình tạo View
Tạo sử dụng Layout View
Tạo Partial View, View Page _ViewStart
Cẩn thận xác định vị trí cho RenderBody RenderSection tạo Layout
Nhớ định sử dụng Layout không sử dụng tạo View Tạo View tương ứng với Action tránh gây lỗi
Nội dung chính: 1 Khái niệm View
Hiển thị thông tin cho người dùng
Nhận liệu nhập vào từ người dùng o Gửi yêu cầu đến controller
o Sao đó, nhận lại phẩn hồi từ controller hiển thị kết cho người dùng
11 Tạo View 2.1 Các loại View
Strongly-typed view: view có định kiểu mạnh, view nhận kiểu đối tượng model tham số từ action method Sử dụng view có thuận lợi sau:
o IntelliSense: Visual Studio hỗ trợ IntelliSense truy cập thuộc tính, phương thức, … view model class
(32)o Compile-time type checking: kiểm tra kiểu liệu lúc biên dịch Trình biên dịch phát lỗi ví nhận biết view model class thuộc tính class
Partial view: view sử dụng view khác (tương tự User Control ASP.NET Web Form)
Layout view: view xem layout dùng chung (tương tự Master Page ASP.NET Web Form)
o Nếu dùng Razor View Engine View khởi tạo _ViewStart.cshtml o Layout view mặc định khai báo _ViewStart.cshtml 2.2 Tạo View
Bước 1: thư mục Views, click chuột phải lên thư mục chứa, chọn Add View
Hình 4.1 Các bước chọn để tạo View Bước 2: Khai báo thuộc tính cửa sổ Add View
(33)12 Sử dụng Layout View (Master) với Razor 3.1 Giới thiệu _ViewStart
View _ViewStart.cshtml thi hành bắt đầu render view page, đoạn code view _ViewStart.cshtml thi hành trước View page khác
Thông thường, tập tin chứa đoạn code sau:
3.2 Tạo Layout View
Bước 1: Trong thư mục Views, click chuột phải lên thư mục Shared, chọn Add New Item …
Bước 2: Chọn nhập thông tin theo hình bên
(34)Hình 4.4 Thiết kế giao diện cho Layout Ta xây dựng layout cho website từ layout view Một số điểm cần lưu ý
o Trong layout view chứa
Các khai báo CSS, Script dùng chung cho view sử dụng layout Phần thiết kế bố cục chung cho view sử dụng
o Trong thành phần body phải có lệnh
@RenderBody()
Là nơi chứa phần thiết kế nội dung view cụ thể Chỉ lệnh RenderBody layout view
Giới thiệu @RenderSection
Ý nghĩa: khai báo thêm vùng thiết kế khác cho view vị trí định sẵn layout
Cú pháp: @RenderSection(string name, bool required)
Trong đó:
(35)3.3 Tạo View Page dùng Layout View
Trong thư mục Views, click chuột phải lên thư mục chứa, chọn Add View
(36) Cú pháp khai báo sử dụng layout view
o Sử dụng layout: @{Layout = “Đường dẫn/TênLayout”; }
o Không sử dụng layout: @{Layout = null; }
o Nếu khơng khai báo view sử dụng layout mặc định khai báo _ViewStart.cshtml
Sử dụng lệnh @section
o Ý nghĩa: khai báo sử dụng section định nghĩa layout view (lệnh RenderSection)
o Cú pháp:
name: tên section khai báo layout view Ví dụ:
3.4 Tạo Partial View
(37)Đánh dấu chọn “Create as a partial view”, nhập chọn thơng tin hình bên
Hình 4.6 Khai báo thông tin cho Partial View 3.5 Sử dụng Partial View
Trong view muốn sử dụng dụng partial view, sử dụng phương thức sau để chèn partial view:
@Html.Partial(string partialViewName): render partial view thành chuỗi HTML mã hóa
@Html.Partial(string partialViewName, object Model): có khai báo model partial view
@Html.RenderPartial(string name): render partial view cách sử dụng HTML helper cụ thể
@Html.RenderPartial(string name, object Model): có thiết lập thuộc tính Model cho model cụ thể)
(38)13 Tạo liên kết View
Gọi đến action controller
Gọi đến action controller khác Ví dụ:
14 Chi tiết Razor
5.1 Các đặc điểm Razor
Compact, Expressive, and Fluid
o Hạn chế số lượng ký tự tập tin, việc gõ code trở nên nhanh chóng, linh hoạt rõ ràng
(39)o Bộ phân tích Razor đủ thông minh để suy điều Easy to Learn: dễ học
Is not a new language: sử dụng cú pháp C# khết hợp với HTML
Works with any Text Editor: làm việc với soạn thảo văn Has great Intellisense: từ phiên Visual Studio 2010 Visual Web
Developer 2010 hỗ trợ đầy đủ tính intellisense cho Razor Unit Testable
o Razor hỗ trợ khả unit test cho view mà không cần controller web server
o Có thể host dự án unit test URL Resolution: hỗ trợ cú pháp ~/
Render thuộc tính điều kiện:
o Khơng cần phải viết mã biện luận trường hợp thuộc tính có khả mang giá trị null Razor làm thay việc
Ví dụ: <div class=“@myclass”>nội dung</div>
Nếu @myclass null thuộc tính class khơng render kết <div>nội dung</div>
o Các câu lệnh điều kiện không hỗ trợ giá trị null mà cịn có giá trị boolean
Ví dụ:
<input checked=“@ViewBag.Checked” type=“checkbox” />
Trong trường hợp @ViewBag.Checked có giá trị null false render thành
<input type= “checkbox” />
Ngược lại, @ViewBag.Checked có giá trị true render thành
<input checked=“checked” type=“checkbox” />
Render lệnh khai báo thẻ <head> o Styles: @Styles.Render(“~/Content/css”)
o Modernizr: @Scripts.Render(“~/bundles/modernirz”) o jquery: @Scripts.Render(“~/bundles/jquery”)
(40)5.2 Viết lệnh C# Razor View
CÂU HỎI, BÀI TẬP Bài 4.1 Tạo layout view cho website ThuongMaiDienTu
Bài 4.2 Sử dụng partial view cho vị trí Banner, Footer, Menu layout view
(41)BÀI 5: TẠO CONTROLLER Mã bài: 28.5
Giới thiệu:
Bài cung cấp cho HSSV biết trình route ứng dụng ASP.NET MVC, kiến thức kỹ tạo controller, phương thức action bên controller view tương ứng với action
Mục tiêu:
Biết trình Rout ASP.NET MVC Biết khái niệm Controller, Action Method
Tạo Controller View tương ứng với Action Method
Xác định cẩn thận Action cần thiết phải xây dựng Controller
Nội dung chính:
1 ASP.NET MVC Routing 1.1 Giới thiệu rout
Có nhiệm vụ ánh xạ yêu cầu từ trình duyệt đến action controller cụ thể
Sử dụng route table để xử lý yêu cầu gửi đến
o Route table tạo ứng dụng lần chạy o Route table thiết lập file Global.asax
o Sự kiện Application_Start gọi phương thức RegisterRoutes() class RouteConfig, class đặt thư mục App_Start
o Code tập tin Global.asax
(42)1.2 Cấu trúc
Cú pháp tổng quát: http://domain/controller/action/id Cách thức hoạt động
o Khi ứng dụng lần chạy, Application_Start() gọi o Application_Start() gọi RegisterRoutes() Route table hình thành o Mặc định, route table chứa route (Default)
o Default ánh xạ vào {controller}/{action}/{id} controller: tên controller
aciton: hành động tương ứng controller id: tham số action
Ví dụ 1:
Hình 5.1 Ánh xạ yêu cầu action controller
(43)Ví dụ 2: trường hợp Default route ánh xạ yêu cầu URL đến action method
15 Controller 2.1 Khái niệm
Như tên gọi nó, controller điều khiển logic hoạt động thành phần điều phối view model
Nhận yêu cầu từ người dùng thông qua view, sau làm việc với model để thực hành động cụ thể trả lại kết cho view
Trong ứng dụng MVC, controller đảm trách việc điều khiển nhập xuất người dùng
2.2 Tạo controller
Click chuột phải lên thư mục Controllers, chọn Add Controller… Khai báo thông tin cửa sổ Add Controller
o Controller name: tên controller o Scaffoding options
Template Model class
Data context class Views
Cửa sổ code phát sinh ứng với
(44) Cú pháp:
2.3 Action method 2.3.1 Đặc điểm
Một controller có nhiều action method để xử lý cho yêu cầu cần thiết
Thường có ánh xạ one-to-one với tương tác người dùng (như: nhập URL vào cửa sổ trình duyệt, click chuột vào đường link, submit form, …)
2.3.2 Cú pháp
2.3.3 Kiểu giá trị trả
(45)o Hầu hết action method trả thể lớp dẫn xuất từ ActionResult
o Lớp ActionResult lớp sở cho tất kết trả action o Tuy nhiên, có nhiều loại kết khác nhau, tùy thuộc vào công việc mà
action method thực
Ví dụ: hành động phổ biến gọi phương thức View trả thể lớp ViewResult, lớp dẫn xuất từ lớp ActionResult
o Chúng thực nhau, khác biệt là: ActionResult khơng hứa hẹn trả View, ta thay đổi code phương thức để trả kiểu đối tượng dẫn xuất từ ActionResult mà không thay đổi phần định nghĩa phương thức lúc đầu
Ví dụ:
(46)Hình 5.1 Các kiểu liệu action Các kiểu liệu sở khác
o string o int o bool o …
2.3.4 Tạo view từ action method
Click chuột phải bên định nghĩa action method, chọn Add View Nhập thông tin cho view (để tên mặc định View name)
CÂU HỎI, BÀI TẬP
Câu 5.1 Tạo controller SanPham chứa action (kèm theo view tương ứng):
DanhSach: hiển thị danh sách sản phẩm nhóm ChiTiet: hiển thị chi tiết sản phẩm
Câu 5.2 Tạo controller Menu chứa action (kèm theo partial view tương ứng)
Nhom: liên kết đến view hiển thị danh sách sản phẩm nhóm PhanLoai: danh sách menu nhóm phân loại
(47)BÀI 6: TRUYỀN DỮ LIỆU GIỮA CONTROLLER VÀ VIEW Mã bài: 28.6
Giới thiệu:
Bài cung cấp cho HSSV kiến thức kỹ truyền liệu controller view đển hiển thị xử lý
Mục tiêu:
Biết lựa chọn để truyền liệu Controller View Tạo View hiển thị liệu nhận từ Controller
An toàn, cẩn thận
Nội dung chính: 1 Tổng quan
Khi truyền thông tin từ action đến view, có lựa chọn o Dùng từ điển ViewData
o Dùng ViewBag
o Dùng Strong-typed View với view model object
ViewBag ViewData cho phép bổ sung thông tin (kiểu sở số nguyên chí đối tượng phức tạp) mà sau truy xuất từ view để phát sinh HTML
16 Sử dụng ViewBag
ViewBag đối tượng kiểu Dynamic
o Một kiểu liệu động giới thiệu từ NET Framework 4.0, với kiều này, cho phép gán thuộc tính cho
o Ví dụ: ViewBag.Title ViewBag.Message dù khơng định nghĩa trước
(48)17 Sử dụng ViewData
Dùng để truyền liệu controller view thông qua ViewDataDictionary chứa cặp Key-Value
View thay đổi giá trị ViewData gởi giá trị thay đổi đến controller
Cú pháp: ViewData[“key”]=<Giá trị>
Ví dụ:
So sánh ViewBag ViewData o Giống nhau:
Giúp trì liệu di chuyển từ controller đến view
(49) Giá trị null điều hướng xảy ra, lý mục tiêu cung cấp cách thức giao tiếp controller view Đó chế truyền thông lời gọi Server
o Khác nhau:
Hình 6.1 So sánh ViewBag ViewData 18 Truyền liệu Controller View
4.1 Kiểu sở
Xem lại ví dụ ViewBag ViewData 4.2 Kiểu Generic collection
Ví dụ:
Kết view:
4.3 Strongly-typed Views
Khai báo định hướng @model sử dụng đối tượng Model để truy xuất thuộc tính
(50)Thật ra, đoạn code thiết lập giá trị thuộc tính ViewData.Model cho giá trị truyền vào phương thức View
Ví dụ 2: view khác, ta muốn tạo liên kết đến view ThongTin.cshtml
4.4 Dynamic Ví dụ 1:
(51)Ví dụ 3: hỗ trợ Intellisense
CÂU HỎI, BÀI TẬP
(52)BÀI 7: THIẾT KẾ VIEW BẰNG HTML HELPERS Mã bài: 28.7
Giới thiệu:
Bài cung cấp cho HSSV kiến thức kỹ sử dụng HTML Helper để thiết kế giao diện hiển thị liệu view
Mục tiêu:
Biết công dụng loại HTML Helper Thiết kế View HTML Helper Cẩn thận, an tồn
Nội dung chính: 1 Giới thiệu
Lớp HTML Helper cung cấp phuoơng thức hỗ trợ cho việc phát sinh tag Form HTML control view
Ví dụ:
Thuộc namespace System.Web.Mvc.Html
19 Các loại HTML Helper 2.1 Rendering
Phát sinh liên kết xây dựng thành phần giao diện tái sử dụng partial view Gồm phương thức (cơ bản) bên
Action(“Action”, “Controller”): gọi action method trả chuỗi HTML Rất hữu ích liệu hiển thị partial view độc lập với view model
(53)o routeValues: tham số action method, tham số cách dấu phẩy
o htmlAttributes: thiết lập thuộc tính cho tag HTML render tương ứng
Ví dụ:
RenderAction(“action”, “controller”, routeValues): tương tự Action() nhanh Action() ghi trực tiếp vào HTTP response
Ví dụ:
Partial(“Tên PartialView”): render partial view thành chuỗi
RenderPartial(“Tên PartialView”): tương tự Partial() ghi trực tiếp vào HTTP response thay trả chuỗi Cú pháp sử dụng khác
(54)2.2 HTML Form
Cung cấp phương thức hỗ trợ tạo form điều khiển form Gồm phương thức bên
BeginForm()
o Phát sinh tag <form>
o Khi người dùng submit gửi yêu cầu đến action controller liên kết với fiew để xử lý
o Nếu sử dụng phương thức khối lệnh using tự phát sinh thêm tag </form> kết thúc khối lệnh không cần dùng Html.EndForm()
Cả cách dùng render kết
HTML.BeginForm(“action”, “controller”, FormMethod): người dùng submit gửi yêu cầu đến action controller định theo cách thức quy định FormMethod:
o FormMethod.Get o FormMethod.Post Ví dụ:
Html.BeginForm(“action”, “controller”, FormMethod, htmlAttributes): tương tự bổ sung thêm thuộc tính
(55)2.3 Input
TextBox(“Tên field”, “giá trị”, htmlAttributes): render tag <input> có type “text”
Password(): tương tực TextBox() có type=“password” Hidden(): tương tự TextBox() có type “hidden”
TextArea(): tương tự TextBox() có bổ sungmặc định thuộc tính cols rows (là 2)
CheckBox(“Tên field”, “Giá trị mặc định”, htmlAttributes): render tag <input> có type “checkbox”
RadioButton(): tương tự CheckBox() có type “radio” DropDownList(): render khối tag <select>
ListBox(): tương tự DropDownList() bổ sung thuộc tính multiple 2.4 Strongly-typed
Những HTML Helpers khơng có hậu tố For thường gọi untyped HTML Helper Đối với loại chúng khơng kiểm tra thuộc tính binding q trình biên dịch (compile) Ví dụ như: Display(), DisplayName(), Editor(), …
Những HTML Helpers có hậu tố For gọi Strongly-typed helper Lúc biên dịch, chúng phát lỗi view controller có thay đổi thuộc tính Gồm số phương thức sau:
o DisplayFor(): hiển thị giá trị thuộc tính (field)
o DisplayNameFor(): hiển thị tên thân thiện thuộc tính
o LabelFor(): hiển thị tên thân thiện thuộc tính, render tag <Label> o DropDownListFor(): render tag <select>
(56)2.5 Template
DisplayForModel() EditorForModel(): tạo HTML cho tồn mơ hình đối tượng (model object) Nghĩa là, thay phải xây dựng điều khiển tương ứng với view model, dùng dịng lệnh sau view: @Html.EditorForModel()
Sử dụng helper này, thêm thuộc tính cho đối tượng mơ hình nhìn thấy thay đổi giao diện người dùng mà không cần phải thực thay đổi view
Cú pháp sử dung tương tự DisplayFor() EditorFor()
Khuyết điểm chung: tùy biến giao diện view không thực HTML control
20 Cập nhật liệu form
Bước 1: tạo action method cập nhật liệu controller
Phương thức gọi CRUD method (Create, Read, Update, Delete) Có cách:
o Tạo thủ công (manual): viết code từ A Z
(57)Hình 7.1 Khai báo thông tin tạo controller wizard CRUD
Bước 2: Tạo giao diện người dùng nhập liệu để submit gửi yêu cầu đến action tương ứng
Nếu tạo controller thủ cơng phải tạo view thủ cơng từ A Z (sử dụng HTML Form phù hợp)
(58) BÀI 8: HIỂN THỊ DỮ LIỆU TRÊN WEB GRID Mã bài: 28.8
Mục tiêu:
Biết công dụng WebGrid
Thiết kế View hiển thị liệu WebGrid Cẩn thận, an tồn
Nội dung chính:
1 Giới thiệu
Hiển thị liệu theo dạng tabular (dòng, cột), render tag <table> Hỗ trợ định dạng, phân trang xếp liệu
Hình 8.1 Giao diện sử dụng WebGrid
21 Các bước tạo
Bước 1: Tạo action method, trả danh sách
(59)
Cú pháp khởi tạo WebGrid
Cú pháp GetHtml
Ví dụ: khai báo thêm CSS cho table, header footer Giới hạn số cột hiển thị
(60) Hình 8.2 Hiển thị liệu WebGrid
22 Định dạng liệu
Bổ sung thêm thuộc tính format(biểu thức Lambda) Ví dụ 1: định dạng liệu cột Đơn giá Ngày cập nhật
Ví dụ 2: Tạo nút chức liên kết
23 Phân trang
(61)
24 Sắp xếp liệu
Lúc khởi tạo WebGrid, bổ sung thêm thuộc tính canSort:true
Muốn cho cột xếp bổ sung thuộc tính canSort:true|false Ví dụ: khơng cho phép xếp cột ID TenSanPham
CÂU HỎI, BÀI TẬP
Bài 8.1 Tạo controller view cho phép người dùng cập nhật table CSDL
(62) 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:
1 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, …
(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
(64)2 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
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”)]
(65)
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ụ:
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ụ:
(66)
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ụ:
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
(67) @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 <ul>
3 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ụ:
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
(68) 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ụ:
CÂU HỎI, BÀI TẬP
(69) 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ỹ hoà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 toàn, cẩn thận Nội dung chính:
1 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)
(70)
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
(71)
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
(72) 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
(73)
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
(74) 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
(75) TÀI LIỆU THAM KHẢO [1] http://asp.net/mvc
http://myapp/mypage.aspx http://myapp/product/list) http://domain/controller/action/id http://msdn.microsoft.com/en-us/library/az24scfc.aspx http://pavietnam.vn để đư http://asp.net/mvc http://w3schools.com