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)

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épdùng nguyên bản hoặc trích dùng cho cá

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

…… của 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 và nghiên cứu cho giảng viên và sinh viênnghề 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.NETMVC

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épdùng nguyên 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 kinhdoanh 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 khungchươ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 kinhnghiệ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ìnhbày cô động, dễ hiểu kèm theo các bước hướng dẫn thực hành chi tiết theonguyê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 ứngdụ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 quá 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 quý thầy/cô và các em học sinh, sinhviên để tiếp tục hoàn thiện hơn

Xin chân thành cảm ơn quý đồng nghiệp, bạn bè đã có những ý kiến đónggóp trong quá 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

LỜI GIỚI THIỆU 1

MỤC LỤC 2

BÀI 1: TỔNG QUAN VỀ ASP.NET MVC 9

1 Mô hình MVC 9

1.1 Giới thiệu 9

1.2 Ưu và nhược điểm 10

1.3 Lý do nên làm trên mô hình MVC 10

2 ASP.NET MVC 11

2.1 ASP.NET MVC là 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 và 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 và 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

2.1 Data Model 23

2.2 Business Model 24

2.3 View Model 24

3 Tạo Data Model 24

4 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

1 Khái niệm View 31

2 Tạo View 31

2.1 Các loại View 31

2.2 Tạo View 32

3 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

4 Tạo liên kết giữa các View 37

5 Chi tiết Razor 38

5.1 Các đặc điểm về Razor 38

5.2 Viết lệnh C# trong Razor View 39

CÂU HỎI, BÀI TẬP 39

BÀI 5: TẠO CONTROLLER 41

1 ASP.NET MVC Routing 41

1.1 Giới thiệu rout 41

1.2 Cấu trúc 42

2 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

1 Tổng quan 47

2 Sử dụng ViewBag 47

3 Sử dụng ViewData 48

4 Truyền dữ liệu giữa Controller và View 49

4.1 Kiểu cơ 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

1 Giới thiệu 53

2 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

3 Cập nhật dữ liệu trên form 57

BÀI 8: HIỂN THỊ DỮ LIỆU TRÊN WEB GRID 59

1 Giới thiệu 59

2 Các bước tạo 59

3 Định dạng dữ liệu 60

4 Phân trang 61

5 Sắp xếp dữ 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

1 Data Annotations 63

1.1 Giới thiệu 63

1.2 Cú pháp chung 63

2 Chú thích dữ liệu 64

3 Kiểm tra dữ 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 dữ liệu 66

3.6 Kiểm tra dữ liệu chỉ đọ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 trên trang web 67

4 Giám sát lỗi trong controller 68

4.1 Thuộc tính IsValid của 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

1 Custom Route 71

1.1 Đặc điểm của ASP.NET MVC Routing 71

1.2 Tạo Routes tùy biến 71

2 Xuất bản ứ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 trên IIS 74

3 Xuất bản ứ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 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 hoà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 quá trình xử lý yê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 trangweb

 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ụngwebsite đ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:

 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)

 Thực hiện các bài thực hành đảm bảo đúng trình tự, an toà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, chophép người phát triển tách một ứng dụng thành 3 thành phần chính: Model,View, Controller

 Phát triển phần mềm một cách chuyên nghiệp hóa, có thể chia công việccho nhiều nhóm chuyên môn khác nhau

o Nhóm thiết kế

o Nhóm lập trình

o 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 quá 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 ra nhiều View và nhiềuController cho các Model mà không phải đối mặt với việc thay đổi trongthiế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

 Đối với những người mới thì việc xây dựng ứng dụng dựa trên mô hìnhMVC phức tạp và lãng phí vì công việc này như là xây dựng một dự án lớn,tuy nhiêu “bí mật” của MVC không nằm ở chỗ viết code mà ở chỗ duy trìnó

 Cho phép sửa code mà không ảnh hưởng nhiều đến các thành phần khác

 Cho phép làm việc nhóm trở nên dễ dàng hơn vì mỗi nhóm sẽ làm việc dựatrên thế mạnh của mình

 Nhóm View: chịu trách nhiệm về xây dựng giao diện tương tác với ngườidùng

 Nhóm Model: chịu trách nhiệm về việc xây dựng các lớp xử lý trên dữ liệu

 Nhóm Controller: có cái nhìn tổng thể về các luồng của ứng dụng, quản lýcác yêu cầu, làm việc với các Model và lựa chọn View hiển thị cho ngườidùng

 Trong ASP.NET MVC, nhiều cải tiến về ASP.NET đã được đưa vàoFramework.

 Mục đích chính của mẫu thiết kế này là cô lập xử lý nghiệp vụ từ giao diệnngười dùng để tập trung vào khả năng bảo trì, cải tiến, kiểm thử tốt hơn vàlàm cho ứng dụng có cấu trúc gọn hơn

 MVC Framework được định nghĩa trong namespace System.Web.Mvc.2.2 Kiến trúc

Hình 1.2 Mô hình kiến trúc 3 thành phần trong MVC

 Models là các thành phần có nhiệm vụ:

o Đọc và ghi dữ liệu

o Lưu trữ thông tin, trạng thái của các đối tượng

o Tất cả các nghiệp vụ logic đều được thực thi ở Model Dữ liệu đượcnhập từ người dùng sẽ thông qua View để kiểm tra ở Model trước khilưu vào CSDL Việc truy xuất, xác nhận và lưu dữ liệu là phần việc củaModel

 Views

o Là các thành phần chịu trách nhiệm hiển thị thông tin cho người dùngthông qua giao diện

o Các thông tin cần hiển thị trên View được tạo ra từ các thành phầnModels trong mô hình dữ liệu

2.3 Quá trình xử lý yêu cầu

 Một trong những khái niệm quan trọng nhất để hiều về ứng dụng MVC làkhông có mối quan hệ tồn tại giữa một yêu cầu và một tập tin vật lý bêntrong Web Server

o Trong ứng dụng ASP.NET Web Forms truyền thống, mỗi yêu cầu đượcdịch thành một lời gọi đến một tập tin trong Web Server Ví dụ: nếu yêucầu là một url http://myapp/mypage.aspx thì Web Server sẽ thông dịchyêu cầu này bằng cách tìm kiếm trong thư mục của ứng dụng một tập tin

có tên là mypage.aspx Sau đó sẽ xử lý tập tin này và trả về kết quả dạngHTML

o Đối với ứng dụng MVC, khi tiếp nhận một yêu cầu (ví dụ:http://myapp/product/list) thì một thành phần được gọi là “routing

engine” sẽ so sánh yêu cầu với route cụ thể.

 Route sẽ xác định các yêu cầu bằng cách sử dụng một chuỗi nền, thiết lậpController và phương thức bên trong Controller cần xử lý yêu cầu

 Khi Route được nhận diện, công cụ route tạo ra bộ giám sát yêu cầu, bộnày lần lượt sẽ tạo ra các đối tượng Controller để xử lý yêu cầu (trong ví dụ

trên thì controller là product và phương thức xử lý là list).

Hình 1.3 Quá trình xử lý yêu cầu của MVC

2.4 Một số đặc điểm

 Tiếp tục hỗ trợ các tính năng trong ASP.NET

o Hỗ trợ sử dụng các tập tin ASPX, ASCX, Master như là thành phầnView

o Hỗ trợ đầy đủ các tính năng bảo mật của ASP.NET

 Form/Windows authenticate, URL authorization, Membership/Roles,Output và data caching, secion/profile state, configuration system,provider architecture, …

o Tách rõ ràng các mối liên quan, mở ra khả năng test TDD (Test DrivenDeveloper)

 Có thể test unit trong ứng dụng mà không cần phải chạy Controllers cùngvới tiến trình của ASP.NET và có thể dùng bất kỳ một unit testingframework nào như Nunit, MBUnit, MS Test, …

 Có khả năng mở rộng ứng dụng, mọi thứ trong MVC được 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 các 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 những PostBack từ View đến thẳng Controller tùy ý

 Không còn ViewState hay Page Lifecycle tồn tại trong 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 chomột project

o Các lọa View Engine

 Web Forms (ASPX)

o ASP.NET còn có khả năng phân tích URL, chuyển các thông số trongURL thành các tham số trong lời gọi tới phương thức trong Controller.

 Model Binding

o Model Binding là tính năng thế mạnh của ASP.NET MVC

o Hỗ trợ viết phương thức nhận một đối tượng tùy biến như là một ahm số

o Với sự hỗ trợ của Model Binding, bây giờ người phát triển chỉ cần tậptrung vào việc cài đặt các nghiệp vụ logic, không cần phải bận tâm vềviệc suy nghỉ làm cách nào để ánh xạ dữ liệu từ người dùng sang các đốitượng NET)

 Tính năng Bunding được áp dụng mặc định Người phát triển không cầnphải gọi các script hoặc các tập tin css riên biệt bởi vì tất cả sẽ được đónggói và nén lại

 Filters: tính năng mạnh trong ASP.NET MVC, hỗ trợ cho việc kiểm tra tínhhợp lệ trước khi một phương thức hành động được gọi hoặc sau khi thihành

 Razor View

o Cú pháp Razor gọn gàng và xúc tích, đòi hỏi một số lượng tối thiểu các

tổ hợp phím

o Tìm hiểu Razor tương đối dễ dàng vì nó dựa trên C# và HTML

o Visual Studio bao gồm IntelliSense và mã cú pháp Razor được màu hóa

o Với Razor View có thể kiểm tra từng đơn vị mà không đòi hỏi phải chạyứng dụng hoặc phải chạy Web Server

Từ những đặc điểm đã nêu, có thể tạm tóm tắt lại các ưu và khuyết điểm củaASP.NET MVC như sau:

 Ưu điểm

o Có tính mở rộng do thay thế từng thành phần một cách dễ dàng

o Không sử dụng ViewState để điều khiển ứng dụng

o Bổ sung mới hệ thống định tuyến (Routers)

o Hỗ trợ tối đa cho việc kiểm thử bằng việc tạo và cài đặt các unitests tựđộng

o Hỗ trợ kết hợp rất tốt giữa người lập trình và thiết kế giao diện

 Khuyết điểm

 Thay đổi cách lập trình của Web Forms nên gây ra nhiều khó khăn chonhững người chuyên sử dụng Web Forms chuyển sang mô hình này(không còn hướng đến các sự kiển của các control).

 Người lập trình phải biết nhiều về HTTP, HTML, CSS và Javascript

 Áp dụng cho dự án nhỏ thì quá cồng kềnh và phức tạp

2.5 So sánh MVC và Web Form

 ASP.NET Web Forms sử dụng ViewState để quản lý  khi có sự tương tácvới người dùng thì xử lý chậm

 ASP.NET MVC chia làm 3 thành phần: Model, View, Controller

 Mọi tương tác của người dùng với Views sẽ được xử lý thông qua việc thựchiện các phương thức hành động trong Controllers, không còn PostBack,Lifecycle và events

 Việc kiểm tra (test) và gỡ lỗi (debug)

o ASP.NET Web Forms chạy tất cả các tiến trình, sự thay đổi ID của bất kỳcontrol nào cũng ảnh hưởng đến ứng dụng

o Với MVC, việc đó có thể sử dụng các unit test để thẩm định rất dễ dàngcác Controller thực hiện thế nào

Bảng so sánh các tính năng giữa ASP.NET Web Forms và 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 ứngdụng thành Models, Views,Controllers

Cú pháp Sử dụng cú pháp của Web

Form, tất cả các sự kiện vàcontrols do Server quản lý

Các sự kiện được điều khiểnbởi các controller, cáccontroller không do Serverquản lý

Truy cập dữ

liệu

Sử dụng hầu hết các côngnghệ truy cập dữ liệu trongứng dụng

Phần lớn dùng LINQ to SQL

và Entity Framework để tạo

mô hình truy cập đối tượngDebug Phải thực hiện tất cả bao gồm

các lớp truy cập dữ liệu, hiểnthị, điều khiển các control

Có thể sử dụng các unit test đểkiểm tra các phương thứctrong các controller

Tốc độ phân

tải

Chậm khi trong trang có quánhiều control vì ViewStatequá lớn

Nhanh hơn do không quản lýViewState

Tương tác với

Javascript

Khó khăn vì các controlđược điều khiển bởi Server

Dễ dàng vì các đối tượngkhông do Server quản lý

URL Không thân thiện Thân thiện

CÂU HỎI, BÀI TẬP

1.1 Cho biết tên và chức năng của từng thành phần chính trong ứng dụng webASP.NET MVC

BÀI 2: TẠO ỨNG DỤNG WEB ASP.NET MVC

 Tạo được ứng dụng web ASP.NET MVC

 Cài đặt Entity Framework cho ứng dụng

 Cẩn thận thực hiện đúng các bước, chọn đúng ngôn ngữ, đường dẫn khi 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 mới project, chọn NET Framework, thư mục và tên project theo hộpthoại dưới rồi chọn OK

Hình 2.1 Tạo ứng dụng ASP.NET

 Chọn MVC trong hộp thoại Select a template, chọn Change Authentication

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 của ứng dụng ASP.NET MVC gồm 3 thực mục chính:

 Controllers: lưu trữ các class đóng vai trò Controller

 Models: lưu trữ các class Model

 Views: lưu trữ các View

Các thư mục khác

 Content: chứa các tập tin CSS, hình ảnh liên quan đến giao diện

 Scripts: chứa các thư viện Javascript, jquery

 App_Start: chứa các tập tin liên quan đến việc cấu hình cho các tính năngnhư: routes, filters, bundles

 App_Data: lưu trữ tập tin dữ liệu XML hoặc local database, SQLite

 Bin: lưu trữ các compiled của ứng dụng

4 Phân biệt ASPX và Razor View Engine

Giống nhau

 Đều dùng để hiện thị giao diện trên Web Browser, có khái niệm về MasterPage và User Control được định nghĩa với Layout (View để kế thừaLayout) và PartialView (subView)

Khác nhau

 ASPX: vẫn có thể sử dụng được các Master Page và User Control (kể cảđóng vai trò chỉ hiện thị dữ liệu và không xử lý được dữ liệu)  dễ dàngcho người lập trình chưa kịp thích nghi với phong cách của MVC, ngoài ravẫn có thể sử dụng được subView để thay đổi cho User Control để xử lý dữliệu từ action

 Razor: được hỗ trợ mạnh hơn về Javascript, tùy chỉnh linh hoạt giữa codeC# với HTML, linh hoạt trong Layout và subView (PartialView)

 Cú pháp HTML Helpers trong ASPX

i += 1;

<p>Line @i</p>

} }

 Tập tin có phần mở rộng là .cshtml

6 Tạo Web Page đơn giản với mã Razor

Click chuột phải lên project  Add  New Item…

Hình 2.4 Tạo web page Razor

Biên tập nội dung

7 Cài đặt Entity Framework

Click chuột phải lên project  Manage NuGet Packages

Chọn Online  nuget.org trong cây 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 quả rồi click chuột lên nút Install tạidùng EntityFramework trong danh sách để cài đặt

Hình 2.5 Tìm kiếm và cài đặt Entity Framework cho ứng dụng

CÂU HỎI, BÀI TẬP

Bài 2.1: Tạo ứng dụng ASP.NET MVC có tên Bookstore

Bài 2.2 Sử dụng vòng lặp tạo nội dung cho trang chủ

Sản phẩm 1

Bài 2.2 Sử dụng vòng lặp for hoặc foreach.

Bài 2.3 Sử dụng vòng lặp for hoặc foreach, kết hợp với các thẻ HTML tạo table

BÀI 3: XÂY DỰNG MODEL

Mã bài: 28.3

Giới thiệu:

Bài này giúp HSSV biết rõ về Model, kỹ năng tạo Model cho ứng dụng

Mục tiêu:

 Trình bày khái niệm và công dụng của Model

 Biết các loại Model

 Tạo được các Data Model với EF

 Lập trình được các hàm đọc và cập nhật dữ liệu thông qua Model

 Cẩn thận, thực hiện đúng các bước tạo Entity Data Model, khai báo đúngthông tin kết nối đến nguồn dữ liệu

Nội dung chính:

1 Khái niệm

 Là thành phần cốt lõi của ứng dụng, có nhiệm vụ truy cập dữ liệu từ mộtnguồn dữ liệu và cung cấp dữ liệu cho nguồn dữ liệu đó

 Lưu trữ thông tin, trạng thái của các đối tượng

 Tất cả các nghiệp vụ logic đều được thực thi ở Model

 Một model class trong ứng dụng ASP.NET MVC không trực tiếp xử lý đầuvào từ trình duyệt, cũng không tạo ra 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ướckhi lưu vào CSDL

 Model có thể được phân làm 3 loại: Data Model, Business Model và ViewModel với nhiệu vụ cụ thể khác nhau

8 Các loại Model

2.1 Data Model

 Các đối tượng trong Data Model đại diện cho các class tương tác với mộtCSDL Các class được tạo ra bởi những công cụ như Entity Framework(EF)

 Các class này có thể được tạo ra từ phương pháp Database First hoặc Codefirst Ngoài ra, cũng có thể sử dụng ADO.NET để tạo thủ công

2.2 Business Model

Các class trong Business model thường được thực hiện chức năng kiểm tra cácquy tắc nghiệp vụ hoặc xử lý nghiệp vụ (ví dụ: tính toán chi phí vận chuyển cụthể cho một giỏ hàng dựa trên trọng lượng của mặt hàng được mua) Với 1 phần

trách nhiệm xử lý đó, các class trong business model có thể tương tác với cácclass trong Data model để đọc hoặc lưu trữ dữ liệu trong CSDL.

 Chức năng của một view model class không xử lý bất kỳ điều gì, thay vào

đó, chức năng duy nhất của nó là chứa dữ liệu và siêu dữ liệu tùy chọn(optional metadata) giúp cho view render chính xác

 View model cũng được sử dụng khi người dùng yêu cầu từ một view đãđược render trước đó (ví dụ: khi submit một form liên hệ)

9 Tạo Data Model

3.1 Tạo CSDL bookstore trong project

Bước 1: click chuột phải lên thư mục App_Data của project

Bước 2: chọn Add  New Item… Xuất hiện hộp thoai

Bước 3: Chọn Data, SQL Server Database rồi đặt tên cho CSDL rồi chọn Add

Bước 4: thiết kế cấu trúc và nhập dữ liệu cho các table theo yêu cầu

3.2 Tạo ADO.NET Entity Data Model

Bước 1: tạo thư mục dtModels trong thư mục Models

Bước 2: click chuột phải thư mục Models, chọn Add  ADO.NET Entity DatModel

Hình 3.1 Các bước tạo ADO.NET Entity Data Model

Bước 3: đặt tên cho model rồi 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 như hình bên dưới rồi chọn Next

Bước 5: đặt tên thông tin kết nối để lưu vào Web.config

Hình 3.3 Đặt tên cho chuỗi kết nối

Bước 6: đánh dấu chọn các object trong CSDL rồi chọn Finish

Hình 3.4 Chọn các đối tượng trong CSDL

Kết quả có được sau khi hoàn tất tạo ADO.NET Entity Data Model

Hình 3.5 Các lớp đối tượng trong model

10 Model Binder

 Model binder trong MVC cung cấp một cách thức đơn giản để ánh xạ cácgiá trị được gửi từ form thành 1 kiểu dữ liệu của NET Framework vàtruyền kiểu này đến phương thức action như một tham số

 Các model binder giống như công cụ chuyển đổi kiểu dữ liệu bởi vì chúng

có thể chuyển đổi các HTTP request thành các đối tượng được truyền vàophương thức action Tuy nhiên, chúng cũng có thông tin về ngữ cảnh củacontroller hiện hành

 Model binder mặc định trong MVC có tên là DefaultModelBinder

4.1 Giới thiệu DefaultModelBinder

 Có khả năng thực hiện mô hình liên kết với hầu hết các kiểu của NETFramework, bao gồm:

o Các class theo truyền thống, Array, IList, ICollection và cả với các đốitượng IDictionary

4.2 Giới thiệu Model Binding (Mô hình liên kết)

 Model Binding là tính năng mạnh của ASP.NET MVC

o Giúp việc viết phương thức nhận một đối tượng tùy biến như là mộttham số

o Giúp tập trung vào việc cài đặt logic hơn là suy nghĩ làm cách nào đểánh xạ dữ liệu người dùng với các đối tượng NET

Ví dụ 1: Edit View

Khi các input name trong form được đặt giống với các property name của đốitượng dữ liệu mà nó liên kết

 Tính năng model binding của ASP.NET MVC cung cấp sẽ hỗ trợ cho việc tạoánh xạ các giá trị được gọi từ form sang kiểu đối tượng tương ứng với tham sốcủa phương thức action.

Ví dụ 2: tạo model class và thực hiện model binding đơn giản (nguồn dữ liệu làtable của CSDL SQL Server)

 Model class: PhanLoaiController, gồm các action: Index, Create, Edit

 Các View tương ứng với action: Index, Create, Edit

 Xem, Thêm, Sửa dữ liệu từ CSDL

 Trong PhanLoaiController class

 Các View tương ứng với action trong PhanLoaiController class

CÂU HỎI, BÀI TẬP

Bài 3.1 Khảo sát các tập tin bên trong thư mục dtModels, ghi lại tên class, cácthuộc tính bên trong class  Nhận xét mối tương quan giữa các class bên trongADO.NET Entity Data Model với các table bên trong CSDL

BÀI 4: TẠO VIEW

 Trình bày công dụng của từng loại View

 Trình bày quy trình tạo View

 Tạo và sử dụng Layout View

 Tạo được Partial View, View Page và _ViewStart

 Cẩn thận xác định đúng vị trí cho RenderBody và RenderSection khi tạoLayout

 Nhớ chỉ định sử dụng Layout hoặc không sử dụng khi 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 các dữ liệu nhập vào từ người dùng

o Gửi các yêu cầu đến controller

o Sao đó, nhận lại các phẩn hồi từ controller và hiển thị kết quả cho ngườidùng

11 Tạo View

2.1 Các loại View

 Strongly-typed view: view có định kiểu mạnh, view này sẽ nhận được mộtkiểu đối tượng trong model như là một tham số từ action method Sử dụngview này có những thuận lợi sau:

o IntelliSense: Visual Studio hỗ trợ IntelliSense khi truy cập các thuộctính, phương thức, … trong view model class

o Automatic scraffolding: Visual Studio tạo ra view kèm theo tag <form>chứa đầy đủ các Field và các tùy chọn kiểm tra dữ liệu, dựa trên phầnkhai báo thuộc tính trong view model class

o Compile-time type checking: kiểm tra kiểu dữ liệu lúc biên dịch Trìnhbiên dịch sẽ phát hiện lỗi ví nó nhận biết được view model class nào vàcác thuộc tính của class đó

 Partial view: view có thể sử dụng trong những view khác (tương tự UserControl trong ASP.NET Web Form)

 Layout view: view được xem như một layout dùng chung (tương tự MasterPage trong ASP.NET Web Form)

o Nếu dùng Razor View Engine thì View khởi tạo là _ViewStart.cshtml

o Layout view mặc định sẽ được khai báo trong _ViewStart.cshtml

2.2 Tạo View

Bước 1: trong 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 các thuộc tính trong cửa sổ Add View

Hình 4.2 Khai báo thuộc tính cho View

12 Sử dụng Layout View (Master) với Razor

3.1 Giới thiệu _ViewStart

 View _ViewStart.cshtml sẽ được thi hành khi bắt đầu render view page, bất

kỳ đoạn code nào trong view _ViewStart.cshtml đều sẽ được thi hành trướccác View page khác

 Thông thường, tập tin sẽ chứa đoạn code đầu tiên như 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 và nhập thông tin theo hình bên dưới

Hình 4.3 Tạo Layout View Page

 Layout view được tạo ra với cấu trúc cơ bản như sau:

Hình 4.4 Thiết kế giao diện cho Layout

 Ta có thể xây dựng 1 layout cho website từ layout view này

 Một số điểm cần lưu ý

o Trong layout view sẽ chứa

 Các khai báo CSS, Script dùng chung cho các view sử dụng layout

 Phần thiết kế bố cục chung cho các view sử dụng nó

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 chính của từng view cụ thể

 Chỉ duy nhất một lệnh RenderBody trong một layout view

Giới thiệu @RenderSection

 Ý nghĩa: khai báo thêm những vùng thiết kế khác cho view tại các vị trí chỉđịnh sẵn trong layout

 Cú pháp: @RenderSection(string name, bool required)

Trong đó:

o name: tên sử dụng của section trong view

o required: (true) bắt buộc phải sử dụng

Ví dụ: Trong layout view có đoạn sau:

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

Hình 4.5 Tạo View dùng Layout

Đoạn code có được

 Cú pháp khai báo sử dụng layout trong 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 thì view sử dụng layout mặc định được khai báotrong _ViewStart.cshtml

3.4 Tạo Partial View

Trong thư mục Views, click chuột phải lên thư mục chứa, chọn Add  View

Đánh dấu chọn “Create as a partial view”, nhập và chọn các thông tin như hìnhbên dưới.

Hình 4.6 Khai báo thông tin cho Partial View

13 Tạo liên kết giữa các View

 Gọi đến action trong cùng controller

 Gọi đến action trong controller khác

Ví dụ:

14 Chi tiết Razor

5.1 Các đặc điểm về Razor

 Compact, Expressive, and Fluid

o Hạn chế số lượng ký tự trong một tập tin, việc gõ code sẽ trở nên nhanhchóng, linh hoạt và rõ ràng

o Không cần phải chỉ ra một cách rõ ràng đâu là một khối code servertrong một văn bản HTML