MVC viết tắt của các chữ cái đầu của Models, Views, Controllers. MVC chia giao diện UI thành 3 phần tương ứng: đầu vào của controller là các điều khiển thông qua HTTP request, model chứa các miền logic, view là những thứ được sinh ra trả về cho trình duyệt.
22 trang |
Chia sẻ: admin | Lượt xem: 7575 | Lượt tải: 1
Bạn đang xem trước 20 trang tài liệu Tổng quan về ASP.NET MVC Framework, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
Bài số 3
Tổng quan về ASP.NET MVC Framework
Table of Contents
1 Tại sao sử dụng ASP.NET MVC ............................................................................................ 2
1.1 ASP.NET MVC là gì ................................................................................................................. 2
1.1.1 Mô hình MVC cơ bản .................................................................................................... 2
1.1.2 Một vài đặc tính trong ASP.NET MVC ........................................................................... 2
1.2 Sự khác biệt với WebForm ..................................................................................................... 3
2 Ví dụ xây dựng ứng dụng với ASP.NET MVC Framework ................................................ 4
2.1 Tạo Project với ASP.NET MVC Web Application ........................................................................ 4
2.2 Tìm hiểu định tuyến URL ............................................................................................................ 8
2.3 Xây dựng mô hình dữ liê ̣u .......................................................................................................... 9
2.3.1 Tạo cơ sở dữ liê ̣u .......................................................................................................... 9
2.3.2 Sử dụng mô hình LINQ to SQL ..................................................................................... 10
2.4 Tìm hiểu về Controllers ............................................................................................................ 14
2.5 Tìm hiểu về Views ..................................................................................................................... 16
2.6 Tìm hiểu về Models .................................................................................................................. 18
2.7 Cấu trúc Views\Shared\Site.Master ......................................................................................... 20
2.8 Kết quả ...................................................................................................................................... 21
3 Câu hỏi ôn tập ....................................................................................................................... 21
4 Tài liệu tham khảo ................................................................................................................ 22
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 2
1 Tại sao sử dụng ASP.NET MVC
1.1 ASP.NET MVC là gì
1.1.1 Mô hình MVC cơ bản
MVC viết tắt của các chữ cái đầu của Models, Views, Controllers. MVC chia giao diện UI thành 3 phần tương
ứng: đầu vào của controller là các điều khiển thông qua HTTP request, model chứa các miền logic, view là những
thứ được sinh ra trả về cho trình duyệt.
Figure 1. Mô hình MVC cơ bản
Lợi ích của việc dùng phương pháp MVC là sự phân đoạn rõ ràng giữa models, views, controllers bên trong ứng
dụng. Cấu trúc sạch sẽ giúp cho việc kiểm tra lỗi ứng dụng trở nên dễ dàng hơn.
1.1.2 Một vài đặc tính trong ASP.NET MVC
Tách rõ ràng các mối liên quan, mở khả năng test TDD (test driven developer). Có thể test unit trong ứng
dụng mà không cần phải chạy Controllers cùng với tiến trình của ASP.NET và có thể dùng bất kỳ một unit
testing framework nào như NUnit, MBUnit, MS Test, v.v…
Có khả năng mở rộng, mọi thứ trong MVC được thiết kế cho phép dễ dàng thay thế/tùy biến ( ví dụ: có thể
lựa chọn sử dụng engine view riêng, routing policy, parameter serialization, v.v…).
Bao gồm một ánh xạ URL mạnh mẽ cho phép xây dựng ứng dụng với những URL sạch, các URL không
cần cs phần mở rộng ( ví dụ: có thể ánh xạ địa chỉ /Products/Edit/4 để thực hiện hành động “Edit” của lớp
điều khiển ProductControllers hoặc ánh xạ địa chỉ /Blog/SomeTopic để thực hiện hành động “Display
Topic” của lớp điều khiển BlogEngineController )
ASP.NET MVC Framework cũng hỗ trợ những file ASP.NET như .ASPX .ASCX và .Master, đánh dấu các
tập tin này như một “view template” ( có thể dễ dàng dùng các tính năng của ASP.NET như lồng các trang
Master, snippets, mô tả server controls, template, data-binding, localization, v.v… ). Tuy nhiên sẽ
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 3
không còn postback và interactive back server và thay vào đó là interactive end-user tới một Controller
class ( không còn viewstate, page lifecycle )
ASP.NET MVC Framework hỗ trợ đầy đủ các tính năng bảo mật của ASP.NET như forms/windows
authenticate, URL authorization, membership/roles, output và data caching, session/profile state,
configuration system, provider architecture v.v…
1.2 Sự khác biệt với WebForm
ASP.NET WebForm sử dụng ViewState để quản lý, các trang ASP.NET đều có lifecycle, postback và dùng các
web controls, các events để thực hiện các hành động cho UI khi có sự tương tác với người dùng nên hầu hết
ASP.NET WebForm xử lý chậm.
ASP.NET MVC Framework chia ra thành 3 phần: Models, Views, Controllers. Mọi tương tác của người dùng với
Views sẽ được thực hiện hành động trong Controllers, không còn postback, không còn lifecycle không còn
events.
Việc kiểm tra ( test ), gỡ lỗi ( debug ) với ASP.NET đều phải chạy tất cả các tiến trình của ASP.NET và mọi sự
thay đổi ID của bất kỳ controls nào cũng ảnh hưởng đến ứng dụng. Đối với ASP.NET MVC Framework thì việc
có thể sử dụng các unit test có thể thẩm định rất dễ dàng các Controller thực hiện như thế nào.
Tính năng ASP.NET 2.0 ASP.NET MVC
Kiến trúc chương trình Kiến trúc mô hình WebForm
Business Database
Kiến trúc sử dụng việc phân chia
chương trình thành Controllers,
Models, Views
Cú pháp chương trình Sử dụng cú pháp của webform, tất
các sự kiện và controls do server
quản lý
Các sự kiện được điều khiển bởi
controllers, các controls không do
server do server quản lý
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 độ phân tải Tốc độ phân tải chậm khi trong
trang có quá nhiều các controls vì
ViewState quá lớn
Phâ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 Tương tác với javascript khó khăn
vì các controls được điều khiển bởi
server
Tương tác với javascript dễ dàng vì
các đối tượng không do server quản
lý điều khiển không khó
URL Address Cấu trúc địa chỉ URL có dạng
.aspx?&
Cấu trúc địa chỉ rành mạch theo
dạng Controllers/Action/Id
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 4
2 Ví dụ xây dựng ứng dụng với ASP.NET MVC Framework
Tính năng ASP.NET MVC Framework hiện giờ mới là bản Beta trong .NET Framework 3.5. Để xây dựng ứng
dụng với ASP.NET MVC Framework cần có môi trường hoạt động .NET Framework 3.5 ( cụ thể chương trình
sau sẽ xây dựng với Visual Studio 2008 ), tiếp theo cần một MVC Framework. Mặc định trong Visual Studio
2008 chưa có sẵn ASP.NET MVC Web Applications. Có thể download ASP.NET MVC Framework tại địa chỉ
2362BDDE0766&displaylang=en. Cài đặt Visual Studio 2008 sau đó cài đặt ASP.NET MVC Framework. Bây
giờ có thể bắt đầu xây dựng ứng dụng với MVC.
2.1 Tạo Project với ASP.NET MVC Web Application
Trong chương trình Visual Studio 2008 đã cài đặt ASP.NET MVC Framework: File New Project Windows
C# ASP.NET MVC Web Application ( xem Figure 2).
Figure 2. Tạo một Projects ASP.NET MVC
Khi tạo một ASP.NET MVC Framework thì một hộp thoại Unit Test xuất hiện. Chọn Yes nếu muốn tạo một
Project Test, chọn No nếu không muốn tạo một Unit Test. ( xem Figure 3)
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 5
Figure 3. Tạo Unit Test cho ASP.NET MVC
Sau khi một ứng dụng ASP.NET MVC Web Application được tạo, nhìn vào trong mục Solution Explorer sẽ thấy
xuất hiện mặc định 3 thư mục: Models, Views, Controllers chứa các đối tượng tương ứng với các thành phần
Models, Views, Controllers trong mô hình MVC.
Mở rộng folder Controllers sẽ thấy HomeController.cs, mở rộng Views sẽ thấy folder Home, Shared và Account.
Mở rộng folder Home sẽ thấy About.aspx và Index.aspx ( xem hình Figure 4 )
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 6
Figure 4. Solution Explorer MVC
Chạy ứng dụng bằng cách ấn F5. Nếu là ứng dụng mới tạo lần đầu thì sẽ có thông báo hỏi có cho phép mở chế độ
Debug hay không? Nếu đồng ý chọn “Modify the Web.config file to enable debugging”, ko muốn debug chọn
“Run without debugging”. ( xem Figure 5).
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 7
Figure 5. Mở Debug trong Web.config ASP.NET MVC
Kết quả khi chạy ứng dụng ( xem Figure 6) là ứng dụng được load vào browser. Trong ví dụ này chỉ có 2 trang là
Index và About.
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 8
Figure 6. Thực thi ứng dụng mẫu ASP.NET MVC
2.2 Tìm hiểu định tuyến URL
Browser yêu cầu một địa chỉ từ controller action trong ASP.NET MVC Framework được gọi là định tuyến URL (
URL routing). Url routing sẽ chỉ định request tới controller action. URL routing sử dụng một bảng định tuyến để
điều khiển các request. Bảng định tuyến được tạo khi ứng dụng bắt đầu được chạy lần đầu tiên. Bảng định tuyến
được thiết lập trong file Global.asax
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace HiTest
{
// Note: For instructions on enabling IIS6 or IIS7 classic mode,
// visit
public class MvcApplication : System.Web.HttpApplication
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // Route
name
"{controller}/{action}/{id}", // URL with
parameters
new { controller = "Home", action = "Index", id = "" } //
Parameter defaults
);
}
protected void Application_Start()
{
RegisterRoutes(RouteTable.Routes);
}
}
}
Khi ứng dụng chạy lần đầu tiên, phương thức Application_Start() được gọi, phương thức này gọi một phương
thức khác RegisterRoutes(RouteTable.Routes) để tạo ra bảng định tuyến.
Định tuyến mặc định chia một request thành 3 phân đoạn, mỗi phân đoạn nằm giữa 2 dấu “/”. Phân đoạn đầu tiên
chứa tên một controller, phân đoạn thứ 2 chứa tên controller action, phân đoạn thứ 3 là tham số đầu vào của
controller action.
Ví dụ: với địa chỉ /Product/Details/3 được hiểu là:
Controller = ProductController
Action = Detail
Id = 3
Controller mặc định sẽ là HomeController, Action mặc định là Index, Id mặc định là “”
Ví dụ: với địa chỉ /Employee:
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 9
Controller = EmployeeController
Action = Index
Id = “”
2.3 Xây dự ng mô hiǹh dữ liệ u
2.3.1 Tạo cơ sở dữ liệu
Từ App_Data click phải chuôṭ choṇ Add New Item SQL Server Database đăṭ tên Database.mdf
Figure 7. Tạo cơ sở dữ liệu Database.mdf trong App_Data
Trong cơ sở dữ liêụ Database.mdf taọ 2 table: ( xem Figure 8, Figure 9 )
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 10
Figure 8. Bảng SanPham trong cơ sở dữ liêụ Database.mdf
Figure 9. Bảng LoaiSanPham trong cơ sở dữ liệu Database.mdf
2.3.2 Sử dụng mô hiǹh LINQ to SQL
Trong Solution Explorer click phải chuôṭ vảo Models Add New Item LINQ to SQL Classes (Figure 10)
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 11
Figure 10. Tạo LINQ to SQL Classes
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 12
Từ Server Explorer Kéo thả 2 tables LoaiSanPham, SanPham vào file DataClasses.dbml
Figure 10. Tạo file DataClasses.dbml sử duṇg 2 bảng LoaiSanPham và SanPham
Trong file DataClasses.dbml click phải chuôṭ choṇ Add Association để tạo liên kết giữa 2 table. (Figure 11)
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 13
Figure 11. Tạo liên kết giữa các bảng trong DataClasses.dbml
Kết quả đươc̣ như Figure 12 dưới đây.
Figure 12. Cấu trúc của DataClasses.dbml
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 14
2.4 Tìm hiểu về Controllers
Controller chịu trách nhiệm điều khiển các tương tác của người dùng bên trong ứng dụng MVC. Controller sẽ
quyết định cái gì được trả về cho người dùng khi người dùng tạo ra một request trên browser.
Một controller là một class ( C# class hoặc VB class). Trong ví dụ ứng dụng ASP.NET MVC Web Application
mâũ luôn tồn taị 2 controller là AccountController.cs và HomeController.cs nằm trong folder Controllers
HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
namespace HiTest.Controllers
{
[HandleError]
public class HomeController : Controller
{
public ActionResult Index()
{
ViewData["Title"] = "Home Page";
ViewData["Message"] = "Welcome to ASP.NET MVC!";
return View();
}
public ActionResult About()
{
ViewData["Title"] = "About Page";
return View();
}
}
}
Trong HomeController.cs có 2 phương thức là Index() và About(). Hai phương thức này là 2 action trong
controller HomeController.cs nó thực hiện khi được gọi bằng địa chỉ /Home/Index và /Home/About. Bất kỳ
phương thức nào có thuộc tính public đều là một action trong controller.
Tạo một Controller mới
Trong folder Controllers phải chuột chọn Add New Item MVC Controller Class ( Figure 13)
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 15
Figure 13. Tạo controller tên là SanPhamController.cs
SanPhamController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
using BanHang.Models;
namespace BanHang.Controllers
{
public class SanPhamController : Controller
{
DataClassesDataContext data = new DataClassesDataContext();
public ActionResult Index()
{
// Add action logic here
ViewData["Title"] = "Sản phẩm";
return RedirectToAction("DanhMucLoaiSanPham");
}
public ActionResult DanhMucLoaiSanPham()
{
// Code cua ban o day
ViewData["Title"] = "Danh muc̣ loaị san̉ phâm̉";
List lsp = data.LoaiSanPhams.ToList();
return View("DanhMucLoaiSanPham", lsp);
}
public ActionResult DanhSachSanPham(string loaisanpham)
{
ViewData["Title"] = "Danh saćh san̉ phâm̉ trong loaị san̉ phâm̉";
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 16
List sp = data.LaySanPhamTuLoaiSanPham(loaisanpham);
return View("DanhSachSanPham", sp);
}
public ActionResult ChiTietSanPham(int id)
{
ViewData["Title"] = "Chi tiêt́ san̉ phâm̉";
SanPham ctsp = data.LaySanPhamQuaID(id);
return View("ChiTietSanPham", ctsp);
}
}
}
2.5 Tìm hiểu về Views
Trong controller HomeController.cs, cả hai phương thức Index() và About() đều trả về một view. Một view chứa
các thẻ HTML và được trả về cho browser. Trong mô hình MVC thì một view tương ứng với một trang .aspx
trong WebForm.
View phải được tạo đúng vị trí đường dẫn. Ví dụ với controller HomeController.cs thì hành động
HomeController.Index() trả về một view nằm ở vị trí đường dẫn \Views\Home\Index.aspx và
HomeController.About() sẽ trả về một view nằm ở vị trí đường dẫn \Views\Home\About.aspx
View About.aspx
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
AutoEventWireup="true" CodeBehind="About.aspx.cs"
Inherits="HiTest.Views.Home.About" %>
About Us
TODO: Put about content here.
View Index.aspx
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
AutoEventWireup="true" CodeBehind="Index.aspx.cs"
Inherits="HiTest.Views.Home.Index" %>
To learn more about ASP.NET MVC visit <a href=""
title="ASP.NET MVC Website">
Tất cả các thuộc tính nằm giữa 2 thẻ đều có định dạng HTML và có thể tùy ý sửa
đổi theo ý muốn.
Tạo view cho controller SanPhamController.cs, trong SanPhamController.cs có 4 phương thức public là Index(),
DanhMucLoaiSanPham(), DanhSachSanPham() và ChiTietSanPham() nên trong Views phải taọ 4 view tương
ứng là Index.aspx, DanhMucLoaiSanPham.aspx, DanhSachSanPham.aspx, ChiTietSanPham.aspx bằng cách từ
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 17
folder Views click phải chuôṭ choṇ Add New Folder nhâp̣ tên folder mới taọ là SanPham. Từ folder SanPham
click phải chuôṭ choṇ Add View… (Figure 14) (ví dụ tạo view DanhMucLoaiSanPham)
Figure 14. Tạo view DanhMucLoaiSanPham trong folder SanPham
Index.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
AutoEventWireup="true" CodeBehind="Index.aspx.cs"
Inherits="BanHang.Views.SanPham.Index" %>
Đây la ̀trang chińh cuả san̉ phâm̉
DanhMucLoaiSanPham.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
AutoEventWireup="true"
CodeBehind="DanhMucLoaiSanPham.aspx.cs"
Inherits="BanHang.Views.SanPham.DanhMucLoaiSanPham" %>
<asp:Content ID="viewDanhMucLoaiSanPham" ContentPlaceHolderID="MainContent"
runat="server">
Đây la ̀danh muc̣ loaị san̉ phâm̉
<% foreach (var lsp in ViewData.Model)
{ %>
<%= Html.ActionLink(lsp.TenLoaiSanPham, "DanhSachSanPham/" +
lsp.TenLoaiSanPham, "SanPham") %>
DanhSachSanPham.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
AutoEventWireup="true" CodeBehind="DanhSachSanPham.aspx.cs"
Inherits="BanHang.Views.SanPham.DanhSachSanPham" %>
<asp:Content ID="viewDanhSachSanPham" ContentPlaceHolderID="MainContent"
runat="server">
Đây la ̀danh saćh san̉ phâm̉ co ́trong chuyên muc̣
ChiTietSanPham.aspx
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 18
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
AutoEventWireup="true" CodeBehind="ChiTietSanPham.aspx.cs"
Inherits="BanHang.Views.SanPham.ChiTietSanPham" %>
<asp:Content ID="viewChiTietSanPham" ContentPlaceHolderID="MainContent"
runat="server">
Đây la ̀Chi tiêt́ san̉ phâm̉
2.6 Tìm hiểu về Models
Một model trong ứng dụng ASP.NET MVC chứa tất cả các nghiệp vụ logic mà không có trong controllers và
views. Models chứa tất cả các tầng truy xuất dữ liệu logic và tầng nghiệp vụ logic. Ví dụ, nếu sử dụng LINQ to
SQL để truy nhập dữ liệu thì phải tạo LINQ to SQL class ( file định dạng dbml ) trong folder Models.
Mô hình dữ liêụ LINQ to SQL ( Figure 15 )
Figure 15. Mô hình dữ liêụ LINQ to SQL
Xây dựng lớp trợ giúp cho việc thao tác với dữ liệu thông qua LINQ to SQL
DataClasses.cs
using System;
using System.Collections.Generic;
using System.Linq;
namespace BanHang.Models
{
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 19
partial class DataClassesDataContext
{
public List LayCacLoaiSanPham()
{
return LoaiSanPhams.ToList();
}
public List LaySanPhamTuLoaiSanPham(string loaisanpham)
{
return SanPhams.Where(l => l.LoaiSanPham1.Id == loaisanpham).ToList();
}
public SanPham LaySanPhamQuaID(int id)
{
return SanPhams.Single(s => s.Id == id);
}
}
}
Với lớp trơ ̣giúp có thể thao tác dê ̃dàng hơn với cơ sở dữ