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 n
1.1.2 Mt vài c tính trong ASP.NET MVC
.
, các URL không
ASP.NET
-
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework
3
end-
class ( không còn viewstate, page lifecycle )
authenticate, URL authorization, membership/roles, output và data caching, session/profile state,
1.2 Sự khác biệt với WebForm
ASP.NET WebForm s d quu có lifecycle, postback và dùng các
thc hing cho UI khi có s tác vi dùng nên hu ht
ASP.NET WebForm x lý chm.
ASP.NET MVC Framework chia ra thành 3 phn: Models, Views, Controllers. Mi dùng vi
Views s c thc hi ng trong Controllers, không còn postback, không còn lifecycle không còn
events.
Vic kim tra ( test ), g li ( debug ) vu phi chy tt c các tin trình ca ASP.NET và mi s
i ID ca bt k n ng di vi ASP.NET MVC Framework thì vic
có th s dng các unit test có th thnh rt d dàng các Controller thc hi nào.
Tính năng
ASP.NET 2.0
ASP.NET MVC
Ki
Kin trúc mô hình WebForm
Business Database
Kin trúc s dng vic phân chia
Models, Views
S dng cú pháp ca webform, tt
các s kin và controls do server
qun lý
Các s ki u khin bi
controllers, các controls không do
server do server qun lý
Truy cp d liu
S dng hu ht các công ngh truy
cp d liu trong ng dng
Phn ln dùng LINQ to SQL class
to mô hình truy cng
Debug
i thc hin
tt c bao gm các lp truy cp d
liu, s hin th u khin các
controls
Debug có th s dng các unit test
ki thc trong
controller
T phân ti
T phân ti chm khi trong
trang có quá nhiu các controls vì
ViewState quá ln
Phân t i
qu qun lý các
control trong trang
i javascript
i javasc
u khin bi
server
i javascript d dàng vì
ng không do server qun
u khin không khó
URL Address
C a ch URL có dng
<filename>.aspx?&<các tham s>
C a ch rành mch theo
dng 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
n gi mi là b xây dng ng
dng vi ASP.NET MVC Framework cng hong .NET Framework 3.5 ( c th
sau s xây dng vi Visual Studio 2008 ), tip theo cn mt MVC Framework. Mnh trong Visual Studio
n ASP.NET MVC Web Applications. Có th download ASP.NET MVC Framework ta ch
/>2362BDDE0766&displaylang=ent ASP.NET MVC Framework. Bây
gi có th bu xây dng ng dng vi MVC.
2.1 To Project
.NET MVC Web Application
t ASP.NET MVC Framework: File New Project Windows
C# ASP.NET MVC Web Application ( xem Figure 2).
Figure 2.
Khi to mt ASP.NET MVC Framework thì mt hp thoi Unit Test xut hin. Chn Yes nu mun to mt
Project Test, chn No nu không mun to mt Unit Test. ( xem Figure 3)
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework
5
Figure 3.
Sau khi mt ng dc to, nhìn vào trong mc Solution Explorer s thy
xut hin mc: Models, Views, Controllers chng vi các thành phn
Models, Views, Controllers trong mô hình MVC.
M rng folder Controllers s thy HomeController.cs, m rng Views s thy folder Home, Shared và Account.
M rng folder Home s thy 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
Chy ng dng bng cách n F5. Nu là ng dng mi to lu thì s có thông báo hi có cho phép m ch
Debug hay không? Nng ý chn debug chn
. ( xem Figure 5).
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework
7
Figure 5. ET MVC
Kt qu khi chy ng dng ( xem Figure 6) là ng dc 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.
2.2 Tìm hinh tuyn URL
Browser yêu cu ma ch t controller action troc gnh tuyn URL (
URL routing). Url routing s ch nh request ti controller action. URL routing s dng mt bnh tuy
u khin các request. Bnh tuyc to khi ng dng bc chy lu tiên. Bnh tuyn
c thit lp 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 dng chy lu tiên, phc gc này gi m
th to ra bnh tuyn.
nh tuyn mnh chia mn, mn nm gia 2 du tiên
cha tên mn th 2 chn th 3 là tham s u vào ca
controller action.
Ví d: va ch /Product/Details/3 c hiu là:
Controller = ProductController
Action = Detail
Id = 3
Controller mnh s là HomeController, Action mnh là Index, Id m http://localhost:1727/
Ví d: va 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
2.3.1
_
New Item
.mdf
Figure 7. .mdf trong App_Data
.
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.
.mdf
Figure 9. .mdf
2.3.2
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.
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework
12
2 tables LoaiSanPham,
.dbml
Figure 10. .
2
Trong file DataClasses.
dd Association
2 table. (Figure 11)
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework
13
Figure 11. .dbml
12
.
Figure 12.
DataClasses.dbml
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework
14
2.4 Tìm hiu v Controllers
Controller chu trách nhiu khii dùng bên trong ng dng MVC. Controller s
quyc tr v i dùng to ra mt request trên browser.
Mt controller là mt class ( C# class hoc VB class). Trong ví d ng dng ASP.NET MVC Web Application
2 controller là AccountController.cs và HomeController.cs nm 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 là Index() và About() c này là 2 action trong
controller HomeController.cs nó thc hi c gi b a ch /Home/Index và /Home/About. Bt k
c nào có thuc tính public u là mt action trong controller.
T
Trong folder Controllers 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. .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"] = "Sn phm";
return RedirectToAction("DanhMucLoaiSanPham");
}
public ActionResult DanhMucLoaiSanPham()
{
// Code cua ban o day
ViewData["Title"] = "Danh mục loại sản phẩm";
List<LoaiSanPham> lsp = data.LoaiSanPhams.ToList();
return View("DanhMucLoaiSanPham", lsp);
}
public ActionResult DanhSachSanPham(string loaisanpham)
{
ViewData["Title"] = "Danh sách sản phẩm trong loại sản phẩm";
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework
16
List<SanPham> sp = data.LaySanPhamTuLoaiSanPham(loaisanpham);
return View("DanhSachSanPham", sp);
}
public ActionResult ChiTietSanPham(int id)
{
ViewData["Title"] = "Chi tiết sản phẩm";
SanPham ctsp = data.LaySanPhamQuaID(id);
return View("ChiTietSanPham", ctsp);
}
}
}
2.5 Tìm hiu v Views
Trong controller HomeController.cs, c c Index() và About() u tr v mt view. Mt view cha
các th c tr v cho browser. Trong mô hình MVC thì mng vi mt trang .aspx
trong WebForm.
View ph c t ng dn. Ví d vi controller HomeController.cs ng
HomeController.Index() tr v mt view nm v ng dn \Views\Home\Index.aspx và
HomeController.About() s tr v mt view nm v ng dn \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" %>
<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
<h2>About Us</h2>
<p>
TODO: Put <em>about</em> content here.
</p>
</asp:Content>
View Index.aspx
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
AutoEventWireup="true" CodeBehind="Index.aspx.cs"
Inherits="HiTest.Views.Home.Index" %>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<p>
To learn more about ASP.NET MVC visit <a href="
title="ASP.NET MVC Website">
</p>
</asp:Content>
Tt c các thuc tính nm gia 2 th <asp:Content></asp:Content> nh dng HTML và có th tùy ý sa
i theo ý mun.
view cho controller SanPhamController.cs, trong SanPhamController.cs 4
public Index(),
DanhMucLoaiSanPham(), DanhSachSanPham() ChiTietSanPham()
4 vie
Index.aspx, DanhMucLoaiSanPham.aspx, DanhSachSanPham.aspx, ChiTietSanPham.aspx
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework
17
folder Views cli
.
View (Figure 14) ()
Figure 14. 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" %>
<asp:Content ID="viewIndex" ContentPlaceHolderID="MainContent" runat="server">
<h1>Đây là trang chính của sản phẩm</h1>
</asp:Content>
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">
<h1>
Đây là danh mục loại sản phẩm</h1>
<% foreach (var lsp in ViewData.Model)
{ %>
<li>
<%= Html.ActionLink(lsp.TenLoaiSanPham, "DanhSachSanPham/" +
lsp.TenLoaiSanPham, "SanPham") %>
</li>
<% } %>
</asp:Content>
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">
<h1>Đây là danh sách sản phẩm có trong chuyên mục</h1>
</asp:Content>
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">
<h1>Đây là Chi tiết sản phẩm</h1>
</asp:Content>
2.6 Tìm hiu v Models
Mt model trong ng dng ASP.NET MVC cha tt c các nghip v logic mà không có trong controllers và
views. Models cha tt c các tng truy xut d liu logic và tng nghip v logic. Ví d, nu s dng LINQ to
truy nhp d liu thì phi to nh dng dbml ) trong folder Models.
( Figure 15 )
Figure 15.
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<LoaiSanPham> LayCacLoaiSanPham()
{
return LoaiSanPhams.ToList();
}
public List<SanPham> LaySanPhamTuLoaiSanPham(string loaisanpham)
{
return SanPhams.Where(l => l.LoaiSanPham1.Id == loaisanpham).ToList();
}
public SanPham LaySanPhamQuaID(int id)
{
return SanPhams.Single(s => s.Id == id);
}
}
}
.
DataClasses.cs
, -
(DanhMucLoaiSanPham.aspx.cs trong folder Views):
Figure 16.
\DanhMucLoaiSanPham.aspx.cs
\DanhMucLoaiSanPham.
<%@ 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">
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework
20
<h1>
Đây là danh mục loại sản phẩm</h1>
<asp:ListView ID="listLoaiSanPham" runat="server">
<LayoutTemplate>
<ul>
<asp:PlaceHolder ID="itemPlaceHolder"
runat="server"></asp:PlaceHolder>
</ul>
</LayoutTemplate>
<ItemTemplate>
<li>
<%= Html.ActionLink(Eval("TenLoaiSanPham"), "DanhSachSanPham/" +
Eval("TenLoaiSanPham"), "SanPham") %>
</li>
</ItemTemplate>
</asp:ListView>
</asp:Content>
Views ch cha tt c nhng gì hin th i dùng trên browser, Controllers ch cha các logic mà tr v
i dùng hong t n action khác. Còn li tt c c vit trong Models.
2.7
Views\Shared\Site.Master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs"
Inherits="BanHang.Views.Shared.Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
<html xmlns="
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><%= Html.Encode(ViewData["Title"]) %></title>
<link href=" / /Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My Sample MVC Application</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LoginUserControl"); %>
</div>
<div id="menucontainer">
<ul id="menu">
<li><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li><%= Html.ActionLink("SanPham", "Index", "SanPham")%></li>
<li><%= Html.ActionLink("About Us", "About", "Home")%></li>
</ul>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework
21
<div id="footer">
My Sample MVC Application © Copyright 2008
</div>
</div>
</div>
</body>
</html>
2.8
Figure 17.
g ASP.NET MVC
3 Câu hỏi ôn tập
Hỏi: Views ca MVC có th s dng AJAX, javascript không?
Đáp c. V bn ch t trang .aspx vi mô hình
WebForm vì th có th thc hin các tác v . Vì th vic s dng jQuery, ASP.NET AJAX, và javascript
u có th thc hic.
Hỏi: Xây dng ng dng vi ASP.NET MVC Framework thì trang web s chi xây dng trên
n
Đápn là th. Nu xây dng trang web vi nn tng WebForm mà s dng ít các controls, usercontrols
hoc ít events thì giá tr ViewState và PostBack không ln nên s thc thi không hm. Trang web xây
dng theo nn WebForm ch thc hin chm khi giá tr ca ViewState là quá ln.
Hỏi: Có phi thc hin test và debug trên ASP.NET MVC Framework d i nn tng WebForm.
Đápc thc hin test và debug trên ASP.NET MVC Framework ch phi thc hin trên Controller
nên d dàng kii thc hin test và debug trên WebForm.
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework
22
4 Tài liệu tham khảo