tổng quan về asp.net mvc framework

Bi s 3

Tng quan v ASP.NET MVC Framework

Table of Contents

1 Ti sao s dng ASP.NET MVC.......................................................................................... 21.1 ASP.NET MVC l g................................................................................................................................2

1.1.1 M hnh MVC c bn................................................................................................................................... 2

1.1.2 Mt vi c tnh trong ASP.NET MVC................................................................................................... 2

1.2 S khc bit vi WebForm....................................................................................................................3

2 V d xy dng ng dng vi ASP.NET MVC Framework................................................ 4

2.1 To Project vi ASP.NET MVC Web Application...............................................................................................4

2.2 Tim hiu nh tuyn URL............................................................................................................................................. 8

2.3 Xy dng m hnh d liu...........................................................................................................................................9

2.3.1 Tao c s d liu...........................................................................................................................................9

2.3.2 S dng m hnh LINQ to SQL................................................................................................................ 10

2.4 Tim hiu v Controllers............................................................................................................................................. 14

2.5 Tim hiu v Views.........................................................................................................................................................16

2.6 Tim hiu v Models..................................................................................................................................................... 18

2.7 Cu trc Views\Shared\Site.Master..................................................................................................................... 20

2.8 Ktqu............................................................................................................................................................................. 21

3 Cu hi n tp......................................................................................................................214 Ti liu tham kho......................................................................................................................... 22

1 Ti sao s dng ASP.NET MVC

1.1.1 M hnh MVC c bn

MVC vit tt ca cc ch ci u ca Models, Views, Controllers. MVC chia giao din UI thnh 3 phn tng ng: u vo ca controller l cc iu khin thng qua HTTP request, model cha cc mien logic, view l nhng th c sinh ra tr v cho trnh duyt.

Li ch ca vic dng phng php MVC l s phn on r rng gia models, views, controllers bn trong ng dng. Cu trc sch s gip cho vic kim tra li ng dng tr nn d dng hn.

1.1.2 Mt vi c tnh trong ASP.NET MVC

Tch r rng cc mi lin quan, m kh nng test TDD (test driven developer). C the test unit trong ng dng m khng cn phi chy Controllers cng vi tin trnh ca ASP.NET v c th dng bt k mt unit testing framework no nh NUnit, MBUnit, MS Test, v.v...

C kh nng m rng, mi th trong MVC c thit k cho php d dng thay th/ty bin ( v d: c th la chn s ng engine view ring, routing policy, parameter serialization, v.v..

Bao gm mt nh x URL mnh m cho php xy dng ng dng vi nhng URL sch, cc URL khng cn cs phn m rng ( v d: c th nh x a chi /Products/Edit/4 thc hin hnh ng Edit ca lp iu khin ProductControllers hoc nh x a ch /Blog/SomeTopic thc hin hnh ng Display Topic ca lp iu khin BlogEngineController)

ASP.NET MVC Framework cng h tr nhng file ASP.NET nh .ASPX .ASCX v .Master, nh du cc tp tin ny nh mt view template ( c th d dng dng cc tnh nng ca ASP.NET nh lng cc trang Master, snippets, m t server controls, template, data-binding, localization, v.v... ). Tuy nhin s

Figure 1. M hnh MVC c bn

Microsoft Vietnam -D P E Team IBi s 3: Tng quan v ASP.NET MVC Framework 2

khng cn postback v interactive back server v thay vo l interactive end-user ti mt Controller class ( khng cn viewstate, page lifecycle )

ASP.NET MVC Framework h tr y cc tnh nng bo mt ca 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 khc bit vi WebForm

ASP.NET WebForm s dng ViewState qun l, cc trang ASP.NET u c lifecycle, postback v dng cc web controls, cc events thc hin cc hnh ng cho UI khi c s tng tc vi ngi dng nn hu ht ASP.NET WebForm x l chm.

ASP.NET MVC Framework chia ra thnh 3 phn: Models, Views, Controllers. Mi tng tc ca ngi dng vi Views s c thc hin hnh ng trong Controllers, khng cn postback, khng cn lifecycle khng cn events.

Vic kim tra ( test ), g li ( debug ) vi ASP.NET u phi chy tt c cc tin trnh ca ASP.NET v mi s thay i ID ca bt k controls no cng nh hng n ng dng. i vi ASP.NET MVC Framework th vic c th s dng cc unit test c th thm nh rt d dng cc Controller thc hin nh th no.

Tnh nng ASP.NET 2.0 ASP.NET MVC

Kin trc chng trnh Kin trc m hnh WebForm -> Business -> Database

Kin trc s dng vic phn chia chng trnh thnh Controllers, Models, Views

C php chng trnh S dng c php ca webform, tt cc s kin v controls do server qun l

Cc s kin c iu khin bi controllers, cc controls khng do server do server qun l

Truy cp d liu S dng hu ht cc cng ngh truy cp d liu trong ng dng

Phn ln dng LINQ to SQL class to m hnh truy cp i tng

Debug Debug chng trnh phi thc hin tt c bao gm cc lp truy cp d liu, s hin th, iu khin cc controls

Debug c th s dng cc unit test kim tra cc phng thc trong controller

Tc phn ti Tc phn ti chm khi trong trang c qu nhiu cc controls v ViewState qu ln

Phn ti nhanh hn do khng phi qun l ViewState qun l cc control trong trang

Tng tc vi javascript Tng tc vi javascript kh khn v cc controls c iu khin bi server

Tng tc vi javascript d dng v cc i tng khng do server qun l iu khin khng kh

URL Address Cu trc a ch URL c dng .aspx?&

Cu trc a ch rnh mch theo dng Controllers/Action/Id


2 V d xy dng ng dng vi ASP.NET MVC Framework

Tnh nng ASP.NET MVC Framework hin gi mi l bn Beta trong .NET Framework 3.5. e xy dng ng dng vi ASP.NET MVC Framework cn c mi trng hot ng .NET Framework 3.5 (c the chng trinh sau s xy dng vi Visual Studio 2008 ), tip theo cn mt MVC Framework. Mc nh trong Visual Studio 2008 cha c sn ASP.NET MVC Web Applications. C th download ASP.NET MVC Framework ti a chi http://www.microsoft.com/downloads/details.aspx ?Familyd=A24DlE00-CD35-4F66-BAA0- 2362BDDE0766&displaylang=en. Ci t Visual Studio 2008 sau ci t ASP.NET MVC Framework. By gi c th bt u xy dng ng dng vi MVC.

2.1 To Project vi ASP.NET MVC Web Application

Trong chng trnh Visual Studio 2008 ci t ASP.NET MVC Framework: File -> New Project -> Windows c# ASP.NET MVC Web Application ( xem Figure 2).

S ta rt P a g e - M icro soft V isu a l S tu d io

F ie Edit View Tools T e s t W indow Help

a - i * u aW \ s t a r t P a g e

c .C o n ten t

I Microsoft*

VisuRecent Projects

XHTest

P ro ject types:

O pen:C rea te :

Pr.Kr http://localhost: 1727/

V d: vi a ch /Employee:

Microsoft Vietnam DPE Team IJBi s 3: Tng quan v ASP.NET MVC Framework 8

Controller = EmployeeController Action = Index Id = ""

2.3 Xy dng m hnh d liu

2.3.1 To cd s d liu

T AppJData click phi chut chn Add -> New Item -> SQL Server Database t tn Databasemdf

Odd N e w H e m - Ban Hang 7 X

Categories: Templates: m BS Visual C# Visual Studio installed templates

CodeData J SQL Server Database Jj] Text FileGeneral j/ ] XML File XML Schema

S. WebWindows Forms My TemplatesWPF

. j Search Online Templates...ReportingWorkflow

An empty SQL Server database

Name: Databaselmdf ]

I Add 1 Cancel Ir y n n n j r l u i ' i r t r i n u r a r

Figure 7. To c s d liu Database.mdf trong App_Data

Trong c s d liu Database.mdf to 2 table: ( xem Figure 8, Figure 9 )

Microsoft Vietnam -D P E Team IBi s 3: Tng quan v ASP.NET MVC Framework

BanH anq - M icroso ft V isu a l S tu d io

File Ecfct Vtew P ro je c t Build D ebug D a ta

S ' ' 3 a m [ H a a .

Table D esigner Tools T e s t

D ebug

W indow Help

- Any CPU c .C o n te n t Add -> New Item ->LINQ to SQL Classes (Figure 10)

Microsoft VieCnum DPE Team IBi su 3: Tng quun v ASP.NET MVC Framework 10

T Server Explorer -> Ko th 2 tables LoaiSanPham, SanPham vo file DataClasses.dbmI

Bon Han g - M icrosoft V isu a l S tu d io - * X

File Edit View P ro jec t Build D ebug Tools T e s t Window Help

. J3 - - 3 & * f*buoS erv e r Explorer T ? X33 %1

B

S Ut D a ta b a se .m d f$ [_ J D a ta b a se D iagram s

S ^ 3 TablesJ LoaiSc'-Pham

j u2 ] TenLoaiSanPham

" 3 SanPham

SI IdS 3 T enSanPham [ | ] D onG a GO SoLuong

S 3 LoaiSanPham

V*ws$ S to red P ro ced u res$ FunctionsS Synonym s

a LA T ypesa U Assem blies

.*5^ S ervers

a 4 g'3* ^

S erv e r Explorer

R eady

T he O b jec t R e la tio n a l D e s ig re r a llo w s y o u to v isual c la s s e s In y o u r c o d e .

S e rv e rE x p lo re rT o o lb o x

C re a te m e th o d s by d ra g g in g item s from

S e rv e r E xp lo rer itolesign surface.

A

Solution E xplorer - Solution "BanHang' (2 p r . ..

a j > a a m !=| B a n H a n g

ffl P ro p er b e s

a R e fe re n c e s S xJi App_D ata

S I j j D a ta b a se .m d f ffl [ _ J C o n ten t

E) LJS' C on tro le rs^ AccountControU er.cs

cJSj) H om eC on tro le r.es SanPham C ontro ller.es

B Models

Ia f a sen p ts -

1=1 Views

5 Ld A ccounta U C h an g eP assw o rd .a sp xa I d C h angeP assw ordS uccess .ca 2 i Login, asp xa R eg is te r.a sp x

e L J r H o m e

a q ] A bout, asp x

a l i In d e x .a sp x S Ld SanPham

a liiJ In d e x .a sp x

| B LJ S hareda ~]j Err o r. asp x

a .3- L oginU serC ontrol.ascxa [ j S ite .M aster

W eb.config ffi D efau lt, a sp x

El G lobal.asaxlij) G Iobal.asax .es W eb.config

3 ^ B anH ang .T ests , l+i -^1 Prnnertw*:

Figure 10. To file DataClasses.dbml s dng 2 bng LoaiSanPham v SanPham

Trong file DataCIasses.dbml click phi chut chn Add - Association to lin kt gia 2 table. (Figure 11)

Microsoft Vienum DPE Team IBi su 3: Tng quun v ASP.NET MVC Framework 12

2.4 Tm hiu v Controllers

Controller chu trch nhim iu khin cc tng tc ca ngi dng bn trong ng dng MVC. Controller s quyt nh ci g c tr v cho ngi dng khi ngi dng to ra mt request trn browser.

Mt controller l mt class ( c# class hoc VB class). Trong v d ng dng ASP.NET MVC Web Application mu lun tn ti 2 controller l AccountController.es v HomeControIIer.es nm trong folder Controllers

HomeController.es

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 Index 0{

ViewData["Title"] = "Home Page";ViewData["Message"] = "Welcome to ASP.NET MVC!";

return ViewO;I

public ActionResuit About 0I

ViewData["Title"] = "About Page";

return ViewO;1

I}

Trong HomeController.es C 2 phng thc l IndexO v About(). Hai phng thc ny l 2 action trong controller HomeControlIer.es n thc hin khi c gi bng a ch /Home/Index v /Home/About. Bt k phng thc no c thuc tnh public u l mt action trong controller.

To mt Controller mi

Trong folder Controllers phi chut chn Add -> New Item -> MVC Controller Class ( Figure 13)

Microsoft VieCnum DPE Team IBi SU 3: Tng quun v ASP.NET MVC Framework 14

Rdd Ne LU Item - Ban Hang ? X

Categories: Templates: m & Visual C S

Code Data General

ffl WebWindows Forms WPFReportingWorkflow

visual btuoto installer templates

rrf] Web Form j : Web User Controli t ] MVC Controller Class 'J * n ^ ^ ie w Master Page ill) MVC View User Control -SjAJAX Client Control

n AJAX Master PageAJAX-enabled WCF Service

erf] Assembly Information File Class Code File

^Debugger Visualizer HTML Page

1 . r_____________________________________

I " ! Master Page l|2l Web Content Form ~ | MVC View Content Page nil MVC View Page .3 ] AJAX Client Behavior SjjA JAX Client Library f ]^ AJAX Web Form

Application Manifest File ^ B ro w se r File ^j Class Diagram [|3| DataSet ^ Generic Handler j] Installer Class

MVC Application Controller Class (Beta) (ASP.NET MVC Framework requires Controller names to be suffixed with "Controller")

Name: f SanPhamConfr oller, es

Add Cancel

Figure 13. To controller tn l SanPhamController.es

SanPhamContxoller.es

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 Sanl-hamControllei : Controller {

DataClassesDataContext data = new DataClassesDataContext();

public Index(){

>

// Add action logic here ViewData["Title"] = "Sn phm";

return RedirectToAction("DanhMucLoaiSanPham");

public I DanhMucLoaiSanPham(){

// Code cua ban o dayViewData["Title"] = "Eanh mu loa San phm";

< > Isp = data.LoaiSanPhams.ToList();

return View("DanhMucLoaiSanPham", Isp);}

public DanhSachSanPham(string loaisanpham){

ViewData["Title"] = "Canh sach San phm trong loai San phm";Microsoft Vielnum DPE Team \Bi su 3: Tng quan v ASP.NET MVC Framework

< > sp = data.LaySanPhamTuLoaiSanPham(loaisanpham);

return View("DanhSachSanPham", sp);}

public ChiTietSanPham(int id)I

ViewData["Title"] = "Chi tit San phm";

ctsp = data.LaySanPhamQualD(id);

return view("ChiTietSanPham", ctsp);1

I}

2.5 Tm hiu v Views

Trong controller HomeController.es, c hai phng thc IndexO v About() u tr v mt view. Mt view cha cc th HTML v c tr v cho browser. Trong m hnh MVC th mt view tng ng vi mt trang .aspx trong WebForm.

View phi c to ng v tr ng dn. V d vi controller HomeController.es th hnh ng HomeController.IndexO tr v mt view nm v tr ng dn \Views\Home\Index.aspx v HomeController.AboutO s tr v mt view nm v tr ng dn \Views\Home\About.aspx

View About.aspx

About Us

TODO: Put about content here.

View Index.aspx

To learn more about ASP.NET MVC visit http://asp.net/mvc.

Tat c cc thuc tnh nm gia 2 th u c nh dng HTML v c th ty sa i theo mun.

To view cho controller SanPhamController.es, trong SanPhamController.es c 4 phng thc public l Index(), DanhMucLoaiSanPhamO, DanhSachSanPhamO v ChiTietSanPhamO nn trong Views phi to 4 view tng ng l Index.aspx, DanhMucLoaiSanPham.aspx, DanhSachSanPham.aspx, ChiTietSanPham.aspx bng cch t


folder Views click phi chut chn Add -> New Folder nhp tn folder mi to l SanPham. T folder SanPham click phi chut chn Add -> View... (Figure 14) (v d to view DanhMucLoaiSanPham)

R dd VieLU ? X

View name:

DanhMucLoaiSanPhaml

~1 Create a strongly-typed view

View data dass:

0 Select master page

-/Views/Shared/Site. Master QAdd Cancel I

Figure 14. To view DanhMucLoaiSanPham trong folder SanPham

Index.aspx

la'trang chinh cu san phm< /a sp :C o n te n t>

DanhMucLoaiSanPham.aspx

y la'danh mu loa san phr

DanhSachSanPham.aspx

y la'danh sach san phm co'trong chuyn mu

ChiTietSanPham.aspx


la'Chi tit San phm

2.6 Tm hiu v Models

Mt model trong ng dng ASP.NET MVC cha tt c cc nghip v logic m khng c trong controllers v views. Models cha tt c cc tng truy xut d liu logic v tng nghip v logic. V d, nu s dng LINQ to SQL truy nhp d liu th phi to LINQ to SQL class ( file nh dng dbml) trong folder Models.

M hnh d liu LINQ to SQL ( Figure 15 )

Solution Explorer - Solution 'BanHang' (2 projects) -B X

I u? m I m m *Solution 'BanHang' (2 projects)

BanHang cl Properties ^ References (1 uQ App_Data Content Conollers

:*v) AccountController. cs c*y HomeContoiler.cs

SanPhamConfroller.es s 1^ 5 Models

^ DataClasses.es ^ DataClasses.dbml.layout

DataClasses. designer. csffl Scripts s Views

AccountIB ChangePassword.aspx ifil ChangePasswordSuccess.aspx ll Login.aspxS3 Register.aspx

a HomeSI lH About, aspx SI iH Index.aspx

0 {I SanPhamIB Lfj ChiTietSanPham.aspx DanhMucLoaiSanPham. aspx DanhSachSanPham.aspxS3 i n Index.aspX

Figure 15. M hnh d liu LINQ to SQL

Xy dng Ip tr gip cho vic thao tc vdi d liu thng qua LINQ to SQL

DataClasses.es

using System;using System.Collections.Generic; using System.Linq;

namespace BanHang.Models


partial class DataClassesDataContext {

public < > LayCacLoaiSanPham()

return LoaiSanThams.ToList();

public < > LaySanPhamTuLoaiSanPham(string loaisanpham)

return SanPhams.Where(1 => 1.LoaiSanPhaml.Id == loaisanpham) .ToList ();

public LaySanPhamQualD(int id)

return SanPhams.Single(s => s.Id == id);

Vi lp tr gip c th thao tc d dng hn vi CO' s d liu khi cn . Chng hn vi lp DataClasses.es trn khi cn truy nhp ly thng tin v sn phm c m Id , c th vit nh sau trong bt k mt code -behind no ca Views (v d vi view DanhMucLoaiSanPham.aspx.es trong folder Views):

BanHang - Microsoft V isual Studio

File Edit View Refactor Project Build Debug Tools Test Window Help

3 ' A ' 3 A & A A * ) ' - Debug * Any CPUm % b . " & I 1 t d m

Start Page DanhMucLoaiSanPham.aspx.cs DanhMud.oa.SanPham.aspx SanPhamController.es

Sgt;

BanHang. Views. SanPham. DanhMucLoaiSanPham V VPage_LoadO

Q using System;using System.Collections.Generic; using System.Linq; using System.Web; using System. Web .Mvc;

Lusing BanHang.Models;

namespace BanHang.Views.SanPham{

public partial class DanhMucLoaiSanPham : ViewPage {

public void Page_Load()}

>

Figure 16. Binding data vo trong ViewADanhMucLoaiSanPham.aspx.es

Khi ta phi sa i li file Views\DanhMucLoaiSanPham.aspx cho ph hp vi code trn

Microsoft Vietnam -D P E Team IBi sd 3: Tng quan v ASP.NET MVC Framework 19

la'danh mu loa San phm

Views ch cha tt c nhng g hin th cho ngi dng trn browser, Controllers ch cha cc logic m tr v view no cho ngi dng hoc hng t action ny n action khc. Cn li tt c u c vit trong Models.

2.7 Cu trc Views\Shared\Site.Master

My Sample MVC Application


My Sample MVC Application Scopy; Copyright 2008

>3- O a n h m u c lo a i s a n p h m - M o z il la F i re fo x --------------------------------------------------------------------------------------------------------------------------- :

0 e Edit View sto ry Bookmarks Tools Help

QP c \AJ 1 http://localhost:2430/SanPham/DanhMud.oaiSanPham * |G|- TMVCFrameworkretui\Jk Most Visited ^ Getting s tarted L Latest Headknes

L_ ASP.NETMVCFr... ASP.TMVCNo . 32BmldmgaSmple ... [p] ASP.NETMVCFt... [ i ] ASP.NET MVC Ft... 1_3 Developer Notes . ASP.NET MVC Fr. 1_J D anh m .[ L o g in ]

My Sample MVC Application

Figure 7. Ket qu chy ng dng khi thm SanPham vo ng dng ASP.NETMVC

3 Cu hi n tp

Hi: Views ca MVC c th s dng AJAX, javascript khng?p: c, v bn chat, view trong ASP.NET MVC Framework cng l mt trang .aspx nh vi m hnh WebForm v th c th thc hin cc tc v tng t. V th vic s dng jQuery, ASP.NET AJAX, v javascript u c th thc hin c.

Hi: Xy dng ng dng vi ASP.NET MVC Framework th trang web s chy nhanh hn so vi xy dng trn nn WebForm c?p: Cha hn l th. Neu xy dng trang web vi nn tng WebForm m s dng t cc controls, usercontrols hoc t events th gi tr ViewState v PostBack khng ln nn s thc thi khng hn chm. Trang web xy dng theo nn WebForm ch thc hin chm khi gi tr ca ViewState l qu ln.

Hi: C phi thc hin test v debug n ASP.NET MVC Framework d dng hn so vi nn tng WebForm. p: ng. V vic thc hin test v debug trn ASP.NET MVC Framework ch phi thc hin trn Controller nn d dng kim sot hn so vi thc hin test v debug trn WebForm.


4 Ti liu tham kho

http://www.asp.nehttp://weblogs.asp.netyscottgu/archive/2007/l 0/14/asp-net-mvc-framework.aspx

Microsoft Vietnam -D P E Team IBi s 3: Tng quan v ASP.NET MVC Framework 2 2

tổng quan về asp.net mvc framework

Documents