Xây dựng website thương mại điện tử ứng dụng công nghệ MVC của ASP NET

Ý nghĩa khoa học và thực tiễn:  Hiện nay ASP.NET MVC 4 là công nghệ mới nhất và có thể ít các bạn biết đến, chính vì thế khi hoàn thành luận văn tốt nghiệp này sẽ là một tài liệu nhỏ g

KHOA CÔNG NGHỆ THÔNG TIN

- -

ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ ỨNG DỤNG CÔNG NGHỆ MVC CỦA ASP.NET

Ngành: CÔNG NGHỆ THÔNG TIN

Chuyên ngành: HỆ THỐNG THÔNG TIN

Giảng viên hướng dẫn: ThS.NGUYỄN LƯƠNG ANH TUẤN Sinh viên thực hiện :

1 ĐỖ LONG HƯNG MSSV: 11L1120027 LỚP: CN11LT

2 PHẠM TIẾN TRUNG MSSV: 11L1120070 LỚP CN11LT

TP Hồ Chí Minh, 2013

- -

ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ ỨNG DỤNG CÔNG NGHỆ MVC CỦA ASP.NET

Ngành: CÔNG NGHỆ THÔNG TIN

Chuyên ngành: HỆ THỐNG THÔNG TIN

Giảng viên hướng dẫn: ThS.NGUYỄN LƯƠNG ANH TUẤN Sinh viên thực hiện :

1 ĐỖ LONG HƯNG MSSV: 11L1120027 LỚP: CN11LT

2 PHẠM TIẾN TRUNG MSSV: 11L1120070 LỚP CN11LT

TP Hồ Chí Minh, 2013

LỜI CAM ĐOAN

Chúng em xin cam đoan đây là bài luận văn tốt nghiệp do chúng em tự tìm hiểu, tự viết ra sản phẩm, không hề sao chép của bất kỳ ai

Chúng em hoàn toàn chịu trách nhiệm về lời cam đoan của mình !

TP.Hồ Chí Minh, ngày 25 tháng 12 năm 2013

Sinh viên thực hiện

Đỗ Long Hƣng Phạm Tiến Trung

Trong suốt quá trình chúng em thực hiện Luận văn tốt nghiệp, chúng em luôn nhận được sự quan tâm giúp đỡ của quý thầy cô, ban chủ nhiệm Khoa Công nghệ thông tin và Nhà trường Chúng em xin chân thành cảm ơn sự giúp đỡ quý báu này

Chúng em xin bày tỏ lòng biết ơn sâu sắc tới ThS.Nguyễn Lương Anh Tuấn, người đã dành nhiều sự quan tâm, giúp đỡ, hướng dẫn chúng em hoàn thành luận văn tốt nghiệp

Nhóm chúng em xin gửi lời cám ơn đến các bạn trong lớp CN11LT đã giúp

đỡ trong quá trình làm luận văn tốt nghiệp

Chúng em cũng xin gửi lời cám ơn đến Công ty TNHH Thương mại Dịch vụ Viễn thông Quang Thành đã giúp đỡ nhóm hoàn thành đồ án tốt nghiệp

Do thời gian học tập và nghiên cứu có hạn, nhận thức còn hạn chế, nên đồ

án tốt nghiệp chắc chắc còn nhiều thiếu sót, kính mong được các thày cô chỉ bảo

và giúp đỡ

Chúng em xin chân thành cảm ơn!

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

TP HCM, Ngày….…tháng………năm 2013

NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN

TP HCM, Ngày….…tháng………năm 2013

1.4.1.Đặc điểm chung của mô hình ASP.NET MVC 8 1.4.2.So sánh mô hình MVC và mô hình 3 lớp thông thường 10 1.4.3 Kiến trúc 11 1.4.4.Định tuyến URL (URL Routing) 11 1.4.5.Mô hình MVC và Postback 11 1.4.6.Ưu điểm của MVC 13 1.4.7.Nhược điểm của MVC _ 13

1.7 Model(Data) 25

1.7.1.ORM(Object-Relational Mapping) 25 1.7.2.Entity Framework 25

1.8 AJAX trên ASP.NET MVC 26

1.8.1 AJAX 26

1.8.2.ASP.NET MVC AJAX Helpers _ 27

1.9.Giới thiệu mô hình ASP.NET MVC4 _ 28

1.9.1.Môi trường làm việc 29 1.9.2.Các tính năng mới của MVC4 _ 29

CHƯƠNG 2: MÔ HÌNH CƠ SỞ DỮ LIỆU _ 31 2.1.Bảng dữ liệu 31 2.2.Mô hình vật lý dữ liệu _ 33 2.3.Mô hình quan hệ dữ liệu _ 36 CHƯƠNG 3: CẤU TRÚC WEBSITE _ 38 3.1.Cấu trúc thiết kế của Website _ 38

3.1.1.Khởi tạo Website _ 38 3.1.2.Source code thực hiện _ 38

3.2.Mô hình chức năng _ 39 CHƯƠNG 4: DEMO SẢN PHẨM 41 4.1.Các thành phần chính của Website _ 41

4.1.1.Trang chủ _ 41 4.1.2.Trang bảo hành 42 4.1.3.Trang liên hệ 43 4.1.4.Trang quản trị _ 43 4.1.5.Trang chi tiết sản phẩm 44 4.1.6.Logo _ 45 4.1.7 Danh mục sản phẩm 45 4.1.8.Thanh menu và banner 46

4.2.Các trang trưng bày sản phẩm 47

4.2.1.Gian hàng tại trang chủ 47 4.2.2.Gian hàng theo hãng sản phẩm 48 4.2.3.Gian hàng bán chạy _ 49

4.3.Chức năng đăng ký, đăng nhập 50

4.3.1.Chức năng đăng ký _ 50 4.3.2.Chức năng đăng nhập _ 51

4.6.Chức năng quản trị _ 56

4.6.1.Quản lý đặt hàng _ 57 4.6.2.Quản lý danh mục 58 4.6.3.Quản lý sản phẩm 59 4.6.4.Quản lý tài khoản 60 4.6.5.Quản lý liên hệ 61

4.7.Các chức năng khác 62

4.7.1.Đếm số lượng truy cập 62 4.7.2.Hỗ trợ trực tuyến _ 62

KẾT LUẬN 63 TÀI LIỆU THAM KHẢO

DANH MỤC BẢNG BIỂU VÀ HÌNH VẼ

Bảng 1.1: Lịch sử phát triển của công nghệ ASP.NET MVC Trang 5 Bảng 1.2: So sánh mô hình Webform và MVC Trang 9 Bảng 1.3: Liệt kê các kiểu action result và các phương thức hỗ trợ để trả về Trang 16 Hình 1.1: Mô hình MVC Trang 5 Hình 1.2: Cách thức làm việc của mô hình MVC Trang 7 Hình 1.3: So sánh mô hình MVC và 3 Layer Trang 10 Hình 1.4: Cấu trúc của mô hình MVC4 Trang 12 Hình 1.5: Mô hình xử lý của MVC4 Trang 28 Hình 1.6: ASP.NET MVC4 trong Visual Stuido 2012 Trang 29 Hình 2.1: Mô hình quan hệ dữ liệu Trang 37 Hình 3.1: Dự án MVC 4 Trang 38 Hình 3.3: Mô hình chức năng của Website Trang 40 Hình 4.1: Trang chủ Trang 41 Hình 4.2: Trang bảo hành Trang 42 Hình 4.3: Trang liên hệ Trang 43 Hình 4.4: Trang quản trị Trang 43 Hình 4.5: Trang chi tiết sản phẩm Trang 44 Hình 4.6: Logo Trang 45 Hình 4.7: Danh mục sản phẩm Trang 45 Hình 4.8: Thanh menu và Banner Trang 46 Hình 4.9: Gian hàng tại trang chủ Trang 47 Hình 4.10: Gian hàng theo hãng sản phẩm Trang 48 Hình 4.11: Gian hàng bán chạy Trang 49 Hình 4.12: Đăng ký tài khoản Trang 50 Hình 4.13: Đăng nhập tài khoản Trang 51 Hình 4.14: Đăng nhập thành công Trang 51

Hình 4.15: Bắt đầu tìm kiếm theo tên Trang 51 Hình 4.16: Kết quả tìm kiếm theo tên Trang 52 Hình 4.17: Bắt đầu tìm kiếm nâng cao Trang 53 Hình 4.18: Kết quả tìm kiếm nâng cao Trang 53 Hình 4.19: Giỏ hàng Trang 54 Hình 4.20: Bắt đầu giỏ hàng Trang 54 Hình 4.21: Giỏ hàng của khách Trang 55 Hình 4.22: Tiến hành đặt hàng Trang 55 Hình 4.23: Đặt hàng thành công Trang 56 Hình 4.24: Trang quản trị Trang 56 Hình 4.25: Quản lý đơn hàng Trang 57 Hình 4.26: Chi tiết và xóa đơn hàng Trang 57 Hình 4.27: Quản lý danh mục, xóa danh mục Trang 58 Hình 4.28: Thêm và sửa danh mục Trang 59 Hình 4.29: Quản lý sản phẩm, xóa sản phẩm Trang 59 Hình 4.30: Thêm và sửa sản phẩm Trang 60 Hình 4.31: Quản lý đăng nhập, xóa tài khoản Trang 61 Hình 4.32: Thêm và sửa tài khoản Trang 61 Hình 4.33: Quản lý liên hệ Trang 62 Hình 4.34: Lƣợng truy cập Trang 62 Hình 4.35: Hỗ trợ trực tuyến Trang 62

DANH MỤC CÁC TỪ VIẾT TẮT

ASP Active Server Pages

HTML HyperText Markup Language

UI User Interface

VB Visual Basic

TDD Test Driven Development

URL Uniform Resource Locator

DI Dependency Injection

IOC Inversion Of Control

OMR Object-Relational Mapping

DF Database First

MF Model First

DDL Data Definition Language

CF Code First

API Application Programming Interface

CSS Cascading Style Sheets

DOM Doucument Object Model

EBML Extensible Binary Meta Language

XML Extensible Markup Language

CSDL Cơ sở dữ liệu

Nhưng Asp.net Webform lại có những nhược điểm, việc dùng các webcontrol sinh ra các event để thực hiện cho UI(user interface) khi có sự tương tác với người dùng thì tiến trình diễn ra chậm, gây ra các hạn chế Việc sử dụng ViewState để quan

lý các trang web đều có lifecycle, postback

Asp.net MVC chính là sự lựa chọn hợp lý thay thế cho Asp.net Webform, nó đã

và đang trở nên phổ biến và sẽ thành nền tảng để xây dựng website trong thời gian tới đây Những ưu điểm của Asp.net MVC là phân tích rõ ràng 3 thành phần chính là: Model(lớp dữ liệu), View(lớp giao diện), Controller(lớp điều khiển), cung cấp nhiều cơ chế xử lý Request khác nhau, dựa trên nền tảng Asp.net vốn đã rất mạnh mẽ, ngoài ra còn hỗ trợ nhiều View engine, cơ chế định tuyến Routing mềm dẻo giúp người phát triển có thể tạo các URL thân thiện với người dùng cũng như với SEO Với cấu trúc 3 lớp như trên thì việc nâng cấp, sữa chữa hay thay đổi các chức năng trở nên dễ dàng hơn và cũng giúp cho việc xây dựng website chặt chẽ, rõ ràng, dễ hiểu hơn

Vào giữa năm 2013 thì công nghệ mới nhất là ASP.NET MVC 4.0 đã ra đời, được tích hợp sẵn trong bản Visual Studio 2012 Nó còn rất mới mẻ đối với các bạn

sinh viên cũng như những người phát triển Website Chính vì thế, nhóm em đã mạnh

dạn chọn đề tài "Xây dựng Website thương mại điện tử ứng dụng công nghệ MVC

của ASP.NET" để làm đề tài báo cáo tốt nghiệp của mình

2 Tình hình nghiên cứu

Hiện nay các tài liệu về MVC là không nhiều và tài liệu về MVC4 bằng tiếng việt thì càng hiếm Vì thế chúng em gặp nhiều khó khăn trong việc tìm hiểu và hầu hết là tham khảo các tài liệu tiếng anh Nhưng quan trọng là chúng em cũng đã nắm được về công nghệ mới này

3 Mục đích nghiên cứu:

 Học hỏi công nghệ, kiến thức mới

 Phục vụ cho việc xây dựng website thương mại điện tử bằng công nghệ MVC 4

4 Nhiệm vụ nghiên cứu:

 ASP.NET MVC 4.0

 Xây dựng website thương mại điện tử

5 Phương pháp nghiên cứu:

 Nghiên cứu lý thuyết thông qua các bài báo, tài liệu trên mạng

 Thông qua các demo hướng dẫn trên internet

 Tổng hợp kiến thức và dữ liệu thực tế

6 Ý nghĩa khoa học và thực tiễn:

 Hiện nay ASP.NET MVC 4 là công nghệ mới nhất và có thể ít các bạn biết đến, chính vì thế khi hoàn thành luận văn tốt nghiệp này sẽ là một tài liệu nhỏ giúp các bạn sinh viên và những người đam mê thiết kế Website có thể nghiên cứu và phát triển

 Công nghệ ASP.NET MVC 4 có nhiều ưu điểm vượt trội và chắc chắn sẽ thay thế cho Asp.net Webform trong tương lai gần Vì thế áp dụng ASP.NET MVC 4 vào thực tiễn có một ý nghĩa rất lớn

7 Các kết quả đạt được

 Tìm hiểu được công nghệ ASP.NET MVC 4

 Xây dựng được Website thương mại điện tử theo công nghệ MVC4.0 với đầy đủ

các chức năng cần thiết

8 Cấu trúc của luận văn

 Chương 1: Tìm hiểu về mô hình ASP.NET MVC

 Chương 2: Mô hình cơ sở dữ liệu

 Chương 3: Cấu trúc của Website

 Chương 4: Demo sản phẩm

CHƯƠNG 1: TÌM HIỂU VỀ MÔ HÌNH ASP.NET – MVC

1.1 Lịch sử phát triển của ASP.NET MVC

Đầu năm 2002, Microsoft giới thiệu một kỹ thuật lập trình Web khá mới mẻ với tên gọi ban đầu là ASP+, tên chính thức sau này là ASP.NET Với ASP.NET, không những không cần đòi hỏi bạn phải biết các tab HTML, thiết kế web, mà nó còn hỗ trợ mạnh lập trình hướng đối tượng trong quá trình xây dựng và phát triển ứng dụng Web

ASP.NET là kỹ thuật lập trình và phát triển ứng dụng web ở phía Server (Server-side) dựa trên nền tảng của Microsoft Net Framework

Công nghệ ASP.NET MVC là công nghệ mới hiện nay, tuy nhiên nó có lịch sử lâu đời Nền tảng MVC được phát minh bởi Trygve Renskaug, ông đã viết trang giấy đầu tiên nói về MVC vào năm 1978 Ban đầu nó được gọi là Thing Model View Editor pattern, nhưng sau đó nó được đặt tên lại là Model View Controller pattern ASP.NET MVC lần đầu tiên xuất hiện đó là trong dự án mã nguồn mở MonoRail Và nguồn gốc thật sự để cho ra đời công nghệ Microsoft ASP.NET MVC là do Scott Guthrie(một trong những nhà sáng tạo ra ASP.NET) trên chuyến bay đến Austin, Texas để nói về hội thảo Alt.NET vào tháng 10-2007 Cuối cùng thì đầu năm 2009 phiên bản ASP.NET MVC 1.0 (released) được ra đời Các năm sau đó các phiên bản tiếp theo ra đời với những tính năng nổi trội

ASP.NET MVC là nền tảng công nghệ mới nhất của Microsoft hiện, nó được thiết kế từ suy nghĩ là làm thế nào để xây dựng một phần mềm tốt (phần mềm tốt là phần mềm bạn muốn tạo ra và nó dễ dàng được thay đổi -Stephen Walther) ASP.NET MVC được thiết kế để làm sao có thể bổ sung các nguyên lý và các patterns phát triển phần mềm khi xây dựng các ứng dụng web Bên cạnh đó, nó được thiết kế để hỗ trợ trong việc kiểm thử

Bảng 1: Lịch sử phát triển của công nghệ ASP.NET MVC

Năm ra đời Công nghệ

1996 ASP(Active Server Pages)

ứng dụng của họ ra 3 thành phần khác nhau Model, View và Controller (Hình 1.1)

Mỗi thành phần có một nhiệm vụ riêng biệt và độc lập với các thành phần khác

Hình 1.1 Mô hình MVC

 Controller

Giữ nhiệm vụ nhận điều hướng các yêu cầu từ người dùng và gọi đúng những phương thức xử lý chúng Chẳng hạn thành phần này sẽ nhận request từ url và form

để thao tác trực tiếp với Model

 MVC làm việc như thế nào ?

 Đây là một cách đơn giản để mô tả lại luồng sự kiện được xử lý trong MVC:

 User tương tác với View, bằng cách click vào button, user gửi yêu cầu đi

 Controller nhận, xử lý và điều hướng chúng đến đúng phương thức xử lý ở Model

 Model nhận thông tin và thực thi các yêu cầu

 Khi Model hoàn tất việc xử lý, View sẽ nhận kết quả từ Model và hiển thị lại cho người dùng

Hình 1.2: Cách thức làm việc của MVC

1.3.Mô hình ASP.NET truyền thống (mô hình Web Form)

Dựa trên nền NET hỗ trợ đa ngôn ngữ như C#, VB.NET,… Microsoft hướng đến việc giấu đi giao thức HTTP (ẩn đi bản chất bên trong) và code HTML bằng việc đưa ra mô hình UI (user interface) như là các đối tượng control phía server (mỗi control có trạng thái của riêng mình, tự động sinh mã HTML khi cần, và tự động kết nối với các sự kiện phía client) Các nhà phát triển Web không còn phải làm việc với các request và response trong từng HTTP độc lập Thay thế nó chính là thuật ngữ StateFull UI(tạm dịch là trạng thái giao diện người dùng) Các nhà phát triển Web chỉ cần kéo-thả, và tưởng tượng ra điều gì sẽ xảy ra trên server khi thiết kế giao diện Web

Nhược điểm:

 ViewState: là cơ chế chính để duy trì trạng thái qua mỗi lần request, điều này

dẫn đến một khối lượng dữ liệu lớn được truyền đi giữa client-server

 Chu kì sống của 1 trang web: là cơ chế kết nối giữa trình điều khiển sự kiện

client và server, điều này có thể trở nên phức tạp, và dễ phá vỡ

 Các control bị giới hạn trên mã HTML: vài control server sinh mã HTML,

nhưng đó không phải là mã HTML mà ta mong muốn Ví dụ vài control server sinh ra giá trị ID phức tạp, và khó truy xuất bởi JavaScript

 Cảm nhận sai trong việc phân tách code ra khỏi mã HTML bằng cách tạo

code-behind bên dưới trang: Trong thực tế thì các nhà phát triển Web đã khuyến khích nên trộn việc trình bày code (ví dụ: việc quản lý control phía server) với tính logic trong ứng dụng của họ (ví dụ: thao tác cơ sở dữ liệu) với nhau Tốt hơn hết là không nên tách riêng chúng ra vì kết quả thường là khó hiểu và dễ vỡ

 Không thể kiểm thử: Khi lần đầu tiên các nhà thiết kế ASP.NET đưa ra nền thiết

kế của họ, họ không thể lường trước việc kiểm thử sẽ trở thành xu hướng phát triển phần mềm hiện nay Và kiến trúc họ xây dựng không hoàn toàn thích hợp với việc kiểm thử tự động

1.4.Mô hình ASP.NET MVC

1.4.1.Đặc điểm chung của mô hình ASP.NET MVC

 Tách biệt các thành phần của ứng dụng(logic đầu vào, logic nghiệp vụ và logic giao diện), hỗ trợ kiểm thử và test-driven development (TDD)

 Mô hình mở và tùy biến cao Các thành phần của ASP.NET MVC được thiết kế

để có thể dễ dàng thay thế và tùy biến Người dùng có thể thiết lập theo cách riêng của mình bằng việc sử dụng engineer view riêng, định tuyến URL(routing), và các thành phần khác ASP.NET MVC cũng hỗ trợ việc sử dụng Dependency Injection (DI) và Inversion of Control (IOC) DI cho phép người lập trình thêm các đối tượng vào class thay vì từ class tạo ra các đối tượng của chính nó IOC quy định rằng nếu một đối tượng truy vấn đến một đối tượng

khác, đối tượng thứ nhất sẽ coi như đối tượng thứ 2 là một tập tin cấu hình Điều này giúp việc kiểm thử dễ dàng hơn

 Hỗ trợ việc tùy biến URL mạnh mẽ thông qua việc định tuyến URL không cần đuôi mở rộng, ánh xạ đến các contronller Giúp tăng cường các hoạt động SEO

 Thừa kế các tính năng của ASP.NET truyền thống, hỗ trợ xác thực form, phân quyền, tạo phiên đăng nhâp…

Bảng 1.2: So sánh mô hình Webform và MVC

Tính năng ASP.NET ASP.NET MVC

Kiến trúc chương trình Kiến trúc mô hình 3 lớp

WebForm: Presentation Business - Data Access

-Kiến trúc sử dụng việc phân chia chương trình thành Controllers, Models,

Truy cập dữ liệu Sử dụng hầu hết các công

nghệ truy cập dữ liệu trong ứng dụng

Phần lớn dùng LINQ to SQL class để tạo mô hình truy cập đối tượng

Debug Debug chương trình phải

thực hiện tất cả bao gồm các lớp truy cập dữ liệu, sự hiển thị, điều khiển các controls

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

Tốc độ tải Tốc độ tải chậm khi trong

trang có quá nhiều các controls vì ViewState quá lớn

Tải nhanh hơn do không phải quản lý ViewState để quản lý các control trong trang

Tương tác với Javascript Khó khăn Dễ dàng

URL Address Cấu trúc địa chỉ URL có

dạng

<filename>.aspx?&<tên tham số=tham số>

Cấu trúc địa chỉ rành mạch

Controllers/Action/Id

1.4.2.So sánh mô hình MVC và mô hình 3 lớp thông thường

Giống nhau: Tách rời Programming core/business logic ra khỏi những phụ thuộc về tài

nguyên và môi trường

Presentation Layer thể hiện giống như chức năng của View và Controller

Business Layer và Data Access Layer thể hiện giống như chức năng của Model

Khác nhau

Hình 1.3: So sánh mô hình MVC và 3 Layer

Trong mô hình 3 lớp thông thường, việc xử lý sẽ đi từ trên xuống dưới rồi từ dưới đi lên, đi qua lần lượt các tầng, nên việc thực thi sẽ phưc tạp hơn,

Còn trong mô hình MVC, Model-View-Controller sẽ thực thi các thao tác với nhau mà không cần phải qua lần lượt các tầng

1.4.3 Kiến trúc

Trong mô hình ASP.NET truyền thống, URL thường được ánh xạ đến các file

cụ thể có trên server(ví dụ như file aspx) Những file này chứa các mã xử lý yêu cầu từ client

Ở ASP.NET MVC, việc ánh xạ URL hoàn toàn khác với mô hình truyền thống Thay vì ánh xạ URL đến một trang aspx cụ thể, nó được ánh xạ đến 1 lớp Controller Lớp này xử lí yêu cầu gửi đến, sau đó chuyển kết quả xử lí này đến một giao diện HTML để hiển thị cho người dùng

ASP.NET MVC phân tách hệ thống thành ba phần Model, View và Controller Model đại diện cho logic xử lí nghiệp vụ/phạm vi của ứng dụng, thường gắn liền với

cơ sở dữ liệu View được gọi từ Controller, là giao diện tương tác với người dùng Mặc định ASP.NET MVC sử dụng các trang aspx, master page master) hay user control (.ascx) để hiển thị phía trình duyệt Controller nhận giá trị gửi lên từ client, từ đấy chọn

action method phù hợp để xử lí

1.4.4.Định tuyến URL (URL Routing)

Mô hình ASP.NET MVC sử dụng các engine định tuyến ASP.NET, cung cấp linh hoạt các ánh xạ các URL đến các Controller Người dùng có thể đặt ra các quy tắc định tuyến riêng của mình để xử lí các URL theo các Controller mong muốn

1.4.5.Mô hình MVC và Postback

ASP.NET MVC không sử dụng mô hình postback của ASP.NET Web Form để tương tác với server Thay vào đó tất cả các tương tác vủa người dùng được chuyển đến một Controller Điều này tách biệt giữa giao diện và xử lí nghiệp vụ, tăng cường

khả năng kiểm thử Đỗng nghĩa với việc View state của ASP.NET và vòng đời trong Web Form không được tích hợp vào mô hình MVC

Mặc định, một ứng dụng MVC sẽ bao gồm các thư mục sau:

Hình 1.4: Cấu trúc mô hình MVC 4

 App_Data, thư mục lưu trữ dữ liệu, chẳng hạn như CSDL

 Content, được khuyến nghị dùng để lưu các file css, hình ảnh…

 Controllers, thư mục lưu các Controller ASP.NET MVC đặt tên các controller

có kết thúc là Controller, chẳng hạn như HomeController, LoginController, hay ProductController

 Models, lưu các class đại diện cho các đối tượng của ứng dụng

 Scripts, lưu các file java script hỗ trợ cho ứng dụng, mặc định nó đã chức các

file có sẵn của Asp.NET MVC

 Views, lưu các file hiển thị giao dện người dùng, như HTML, CSHTML,

.aspx…

Ngoài ra trong thư mục mặc định còn có các file Global.asax để định tuyến URL, file Web.config để cấu hình ứng dụng

1.4.6.Ưu điểm của MVC

 Phát triển phần mềm: có tính chuyên nghiệp hóa, có thể chia cho nhiều nhóm

được đào tạo nhiều kỹ năng khác nhau, từ việc thiết kế cho đến lập trình tổ chức database Giúp phát triển ứng dụng nhanh hơn, đơn giản hơn, dễ nâng cấp

 Bảo trì: Với các lớp được phân chia như đã nói, thì các thành phần của một hệ

thống dễ dàng được thay đổi, nhưng sự thay đổi có thể được cô lập trong từng lớp hoặc chỉ ảnh hưởng nhỏ tới lớp ngay gần kề nó chứ không làm phát tán, náo loạn cho cả chương trình

 Mở rộng: Với các lớp được phân chia như đã nói, việc thêm chức năng mới vào

từng lớp sẽ dễ dàng hơn Vì các lớp này hoạt động dường như độc lập

1.4.7.Nhược điểm của MVC

 Đối với các dự án nhỏ thì việc áp dụng mô hình MVC là một sự lãng phí

1.5.Controller và Routing

1.5.1 Controller và Action Method

 Controller

ASP.NET MVC ánh xạ URL đến các lớp gọi là Controller Controller xử lý yêu cầu gửi đến, các đầu vào của người dùng và tương tác, trả về các giao diện sử dụng thích hợp Một Controller thường gọi đến một thành phần View để sinh mã HTML trả

về

Lớp cơ sở cho tất cả các Controller là lớp ControllerBase, cung cấp các xử lí MVC Controller kế thừa từ ControllerBase Controller chịu trách nhiêm cho các giai đoạn xử lí sau đây:

 Định vị các Action Method thích hợp để gọi và xác nhận rằng nó có thể được gọi

 Nhận các giá trị để sử dụng như tham số của Action Method

 Xử lí các lỗi xảy ra trong khi thực hiện Action Method

 Cung cấp lớp WebFormViewEngine để sinh thành phần View

Tất cả Controller đều phải đặt tên có hậu tố “Controller” Ví dụ sau đây mô tả HomeController, Controller này chứa các Action Method, sinh ra các View

 Action Method

Trong các ứng dụng ASP.NET không sử dụng nền tảng MVC, sự tương tác của người dùng được tổ chức theo các trang và theo việc phát ra và quản lý các sự kiện của trang và các điều khiển trên trang đó Để so sánh, thì với các mô hình MVC, sự tương tác với người dùng được tổ chức theo các controllers và các action của chúng Lớp controller sẽ định nghĩa các phương thức action Các controller có thể có bao nhiêu

action tùy nhu cầu

Các phương thức action thường được ánh xạ 1-1 với các tương tác của người dùng Ví dụ như người dùng điền một URL vào trình duyệt, hoặc nhấn vào một liên kết, hoặc gởi lên một form Các tương tác nói trên tạo ra request được gởi lên cho server Khi đó, URL của request được gởi lên sẽ có các thông tin mà nền tảng MVC sẽ

sử dụng để tìm kiếm và thực thi phương thức action

Khi người dùng gõ một URL vào trình duyệt, ứng dụng MVC sẽ sử dụng các quy tắc định tuyến (routing rules) được định nghĩa ở tập tin Global.asax để phân tích URL và xác định đường dẫn của controller Sau đó controller sẽ xác định action tương ứng để xử lý request Ví dụ như, trong trường người dùng gõ vào địa chỉ URL là

http://contoso.com/MyWebSite/Products/Categories thì đường dẫn con sẽ như sau: /Products/Categories Tuyến mặc định (default routing) sẽ xem Products như là phần

tiền tố của tên controller, nghĩa là controller được chọn có tên là ProductsController

Và “Categories” được xem như là tên của action, như vậy thì phương thức Categories của ProductsController sẽ được thực thi để xử lý request Nếu URL kết thúc bằng

/Products/Detail/5 tuyến mặc định sẽ xem như Detail là tên của Acion, và phương thức

Detail của ProductController sẽ được gọi để xử lú request Theo tuyến mặc định, thì giá trị “5” trong URL sẽ được truyền vào phương thức Detail như là một tham số

Ví dụ dưới đây cho thấy cài đặt của một action có tên là CN11LT

public class MyController : Controller

{

public ActionResult CN11LT() {

ViewBag["Message"] = "Công nghệ thông tin liên thông khóa 11!";

kế thừa từ lớp ActionResult trước khi chúng được trả về cho Response Stream

Bảng 1.3: Liệt kê các kiểu action result và các phương thức hỗ trợ để trả về

Action Result Helper Method Mô tả

ViewResult View Trả về view như là một trang web PartialViewResult PartialView Trả về như là một phần của trang web

RedirectResult Redirect Chuyển đến các action khác bằng cách

sử dụng URL của chúng RedirectToRouteResult RedirectToAction

RedirectToRoute

Chuyển đến một action khác

ContentResult Content Trả về một kiểu dữ liệu do người dùng

định nghĩa JsonResult Json Trả về một đối tượng được kết xuất

theo định dạng JSON JavaScriptResult JavaScript Trả về đoạn mã javascript để có thể

thực thi được ở client FileResult File Trả về kết quả nhị phân để ghi lên kết

quả trả về EmptyResult (None) Đại diện cho giá trị trả về mà nó được

dùng khi phương thức action phải trả

về một giá trị null

 Đánh dấu các phương thức Public để chúng không được xem là các action

Mặc định, MVC sẽ xem tất cả các phương thức public của controller như là action Nếu lớp controller của bạn có chứa phương thức public như bạn lại không muốn nó là một action, bạn phải sử dụng thuộc tính NonActionAttribute để quy định

 Các tham số truyền vào Action Method

Các giá trị được truyền qua tham số của các action được lấy từ tập dữ liệu của đối tượng request, từ đối tượng RouteData và từ form dữ liệu được gửii lên Nếu giá trị tham số không được truyền vào, và nếu kiểu dữ liệu của tham số là một kiểu tham

chiếu (reference type) hoặc là một kiểu dữ liệu có thể chấp nhận giá trị null, thì null sẽ

được gửii vào như là giá trị của tham số Ngược lại, sẽ có ngoại lệ được ném ra Ngoài

cách truy xuất bằng cách tham số được định nghĩa một cách tường mình, bạn có thể sử dụng các thuộc tính Response và Request của lớp Controller để truy xuất đến các tham

số Hai tham số này chính là hai đối tượng HttpRequestvà HttpResponse trong mô hình ASP.NET truyền thống Đoạn mã ví dụ dưới đây cho thấy cách sử dụng đối tượng Request để lấy về giá trị của tham số có tên là id:

public void Detail()

{

int id = Convert.ToInt32(Request["id"]);

}

 Tự động ánh xạ các tham số của action

Nền tảng ASP.NET MVC có thể tự động ánh xạ tham số từ URL đến các tham

số của action Khi bạn định nghĩa action có tham số, MVC sẽ kiểm tra dữ liệu của request và xác định xem có giá trị nào trùng tên với các tham số không, nếu có thì sẽ lấy các giá trị đó để truyền vào các tham số Ví dụ dưới đây sẽ không sử dụng Request[“id”] như ở phương thức ví dụ ở trên, thay vào đó, action sẽ được quy định tham số id một cách tường minh, và MVC sẽ tự động ánh xạ giá trị của Request[“id”] vào tham số id:

public ResultAction Detail(int id)

{

ViewData["DetailInfo"] = id;

return View();

}

Bạn cũng có thể thêm tham số như là một phần của URL thay vì sử dụng các

chuỗi truy vấn Ví dụ, thay vì sử dụng /Products/Detail?id=3, bạn có thể sử dụng một URL có dạng /Products/Detail/3 Quy tắc ánh xạ tuyến mặc định có định dạng là

/{controller}/{action}/{id} Và lúc đó 3 sẽ là giá trị của tham số id Ngoài ra bạn cũng

có thể quy định kiểu chấp nhận giá trị (null-able type) để truyền các tham số có thể không có giá trị đƣợc gửi lên nhƣ sau:

public ActionResult ShowArticles(DateTime? date)

{

if(!date.HasValue) {

Index Segment đầu tiên là một controller, segment thứ 2 là một action Pattern của url

này là: {controller}/{action}

Khi xử lý những incoming url, công việc của routing system là tìm pattern nào khớp với url Sau khi routing system tìm đƣợc pattern phù hợp, nó bắt đầu tiến hành chiết những giá trị từ url cho các biến segment đƣợc định nghĩa trong pattern Chúng ta dùng cặp dấu {} để “đóng dấu” các biến segment

Có nhiều route trong ứng dụng của chúng ta Routing system sẽ tìm cho tới khi nào có một route khớp với pattern của incoming url

Khi ứng dụng MVC chạy, hàm Application_Start() sẽ đƣợc gọi, hàm này gọi lại hàm

RegisterRoutes() Hàm RegisterRoutes() sẽ tạo ra bảng ánh xạ Routing

1.6.View

1.6.1.Razor View Engine

ASP.NET MVC hỗ trợ khái niệm “View Engine”, đó là các Module cài đặt các mẫu tùy chọn cú pháp khác nhau View Engine mặc định đƣợc sử dụng là các mẫu nhƣ file aspx, ascx nhƣ trong mô hình Web Form cũ Bên cạnh đấy còn có Spark View Engine và Nhaml Hiện tại View Engine mới nhất dành cho ASP.NET là Razor, đây là Engine đƣợc đánh giá là tối ƣu mạnh code HTML, cú pháp thân thiện cho lập trình viên Trong nội dung chuyên đề này, chúng ta sẽ tìm hiểu kỹ về Razor

Những điểm mạnh của Razor:

 Nhỏ gọn: Razor giảm thiểu số lƣợng ký tự và thao tác gõ phím cần thiết trong

một tệp tin Không giống nhƣ phần lớn các cú pháp khác, bạn không cần ngắt các đoạn code để chỉ thị thực hiện câu lệnh ở Server, cú pháp đƣợc phân tích thông minh để thực hiện điều này

 Dễ học: Razor rất dễ học, bạn có thể nhanh chóng làm quen với cú pháp này, tất

cả bạn cần là sử dụng những kỹ năng code HTML và các ngôn ngữ khác mà bạn biết

 Không phải ngôn ngữ mới: Razor là sự kết hợp của HTML và các ngôn ngữ

lập trình xử lý trong NET nhƣ C# và VB

 Làm việc với nhiều trình soạn thảo: Razor không đòi hỏi một công cụ soạn

thảo cụ thể nào, bạn có thể sử dụng bất kỳ công cụ nào mình thích kể cả Notepad

 Khả năng nhắc lệnh (Intellisense): Nếu sử dụng Razor cùng Visual Studio,

bạn có thể sử dụng khả năng gợi ý lệnh tuyệt vời này

 Hỗ trợ Unit Test: Razor cho phép kiểm thử từng thành phần mà không yêu cầu

thông qua Controller hay một Web server

Razor View Engine có đuôi mở rộng là cshtml

1.6.2.Master Page

Master Page là một khái niệm đã có trong lập trình Web Form, trong MVC thì

nó có tên là Layout Mục đích thì giống nhau, nhằm bố cục cho toàn bộ Website

<div id="header_wrap" class="row">

<p id="logo"><a href="/">Lost and<span class="semi">

Found</span></a><span id="tagline">Found Any things</span></p>

Với code trên, chú ý đến RenderBody() chính là vị trí mà code HTML của các

site con đƣợc chèn vào Có thể có nhiều file Layout vì thế ở site phải đƣợc định nghĩa

nó đƣợc kế thừa từ site nào, mặc định là sẽ ké thừa từ _Layout.cshtml:

1.6.3.Partial View

Trong đoạn code phía trên, chúng ta thấy có dòng lệnh @Html.Partial

("_LogOnPartial”) đây là cách gọi đến 1 Partial View Thực chất đây là một đoạn

(fragment) có thể tái sử dụng gồm nội dung và mã lệnh được nhúng vào trong một View và cải thiện khả năng sử dụng của một trang web đồng thời giảm bớt khả năng trùng viết mã trùng lặp hay phải viết lại mã lệnh đã có trước, khái niệm này tương đương với UserControl trong lập trình Web Form

dễ dàng thao tác hơn trong việc code HTML

HTML Link có thể được tạo ra như sau :

@Html.ActionLink("About this Website", "About")

Ngoài ra, HTML Helper có thể dùng để sinh ra các thành phần HTML như

1.6.5.Validation Form Data

Validation form data cho phép chúng ta kiểm tra xem liệu người dùng đã nhập đúng dữ liệu được yêu cầu hay chưa Và trong ASP.NET MVC, chúng ta miêu tả lỗi

hợp lệ (validation errors) của form bởi thuật ngữ Model State Dictionary

Model state, bản thân nó giống như một cuốn từ điển, chứa một tập các trạng thái mẫu (Model state), nhằm biểu diễn trạng thái của các thuộc tính đặc biệt Chúng ta truyền lỗi hợp lệ từ Action Controller đến View và ngược lại, bằng việc truyền thông qua từ điển miêu tả trạng thái mẫu (Model State Dictionary) Cả hai lớp controller và view đều chứa thuộc tính được đặt tên là ModelSate, thuộc tính này triển khai từ điển trạng thái mẫu

Validation Helpers:là một trong số các cách bạn có thể sử dụng để phát hiện tính không hợp lệ do người dùng nhập sai

1.7 Model(Data)

1.7.1.ORM(Object-Relational Mapping)

Bên cạnh cách truy vấn dữ liệu thông qua các SQL query truyền thống , ASP.NET còn hỗ trợ việc truy vấn dữ liệu thông qua mô hinh ORM(Object-Relational Mapping) ORM là một phương pháp lập trình để chuyển đổi từ mô hình database sang

 Tăng tốc độ thực thi của hệ thống

Ở ASP.NET MVC, ORM được cụ thể hóa bằng Entity Framework

 Database First (DF)

Nếu bạn đã có cơ sở dữ liệu, DF có thể sinh ra mô hình dữ liệu bao gồm các lớp

và các thuộc tính tương ứng với các đối tượng trọng CSDL như bảng và cột Các thông tin về cấu trúc CSDL (Schema), dữ liệu và liên kết giữa chúng được lưu thành một cấu trúc XML trong file edmx Visual Studio cho phép bạn có thể chỉnh sửa các nội dung này

 Model First (MF)

Nếu chưa có CSDL, bạn có thể tạo ra một mô hình dữ liệu quan hệ bằng cách sử dụng công cụ thiết kế trong Visual Studio Khi tạo xong, có thể sinh DDL(data definition language hay ngôn ngữ định nghĩa dữ liệu) Cách tiếp cận này cũng sử dụng file edmx để lưu trữ mô hình dữ liệu quan hệ mà các thông tin liên kết

 Code First (CF)

Dù bạn có CSDL hay không, bạn hoàn toàn có thể tạo ra các lớp và các thuộc tính tương ứng với các bảng và cột trong CSDL mà không cần file edmx Đó là nguyên tắc của cách tiếp cận Code First Bạn viết các lớp để định nghĩa dữ liệu, CSDL

sẽ được sinh ra khi hệ thống thực thi Cấu trúc của CSDL và dữ liệu thực được xử lý theo một ánh xạ API đặc biệt

1.8 AJAX trên ASP.NET MVC

1.8.1 AJAX

AJAX(Asynchronous JavaScript and XML) là một nhóm các công nghệ phát triển web được sử dụng để tạo các ứng dụng web động hay các ứng dụng giàu tính Internet (rich Internet application) Ajax là một kỹ thuật phát triển web có tính tương tác cao bằng cách kết hợp các ngôn ngữ:

 HTML (hoặc XHTML) với CSS trong việc hiển thị thông tin

 Mô hình DOM (Document Object Model), được thực hiện thông qua JavaScript, nhằm hiển thị thông tin động và tương tác với những thông tin được hiển thị