Hướng dẫn lập trình asp.net 3.5 microsoft - bài 3: asp.net mvc framework pdf

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 Tao cơ s dữ liệu 9
2.3.2 S du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 n







1.1.2 Mt 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 quu có lifecycle, postback và dùng các
 thc hing cho UI khi có s tác v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 dùng vi
Views s c thc hi  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u phi chy tt c các tin trình ca ASP.NET và mi s
i ID ca bt k n ng di vi ASP.NET MVC Framework thì vic
có th s dng các unit test có th thnh rt d dàng các Controller thc hi nào.
Tính năng
ASP.NET 2.0
ASP.NET MVC
Ki
Kin trúc mô hình WebForm 
Business  Database
Kin trúc s dng vic phân chia
   
Models, Views

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  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ng
Debug
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 u khin các
controls
Debug có th s dng các unit test
ki    thc trong
controller
T phân ti
T  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
qu    qun lý các
control trong trang
i javascript
  i javasc  
u khin bi
server
i javascript d dàng vì
ng không do server qun
u khin không khó
URL Address
C  a ch URL có dng
<filename>.aspx?&<các tham s>
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
n gi mi là b xây dng ng
dng vi ASP.NET MVC Framework cng hong .NET Framework 3.5 ( c th 
sau s xây dng vi Visual Studio 2008 ), tip theo cn mt MVC Framework. Mnh trong Visual Studio
n ASP.NET MVC Web Applications. Có th download ASP.NET MVC Framework ta ch
/>2362BDDE0766&displaylang=ent ASP.NET MVC Framework. Bây
gi có th bu xây dng ng dng vi MVC.
2.1 To 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 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. 
Sau khi mt ng dc to, nhìn vào trong mc Solution Explorer s thy
xut hin mc: Models, Views, Controllers ch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u thì s có thông báo hi có cho phép m ch 
Debug hay không? Nng ý chn debug chn
. ( xem Figure 5).
Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework
7


Figure 5. ET MVC
Kt qu khi chy ng dng ( xem Figure 6) là ng d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. 
2.2 Tìm hinh tuyn URL
Browser yêu cu ma ch t controller action troc gnh tuyn URL (
URL routing). Url routing s ch nh request ti controller action. URL routing s dng mt bnh tuy
u khin các request. Bnh tuyc to khi ng dng bc chy lu tiên. B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u tiên, phc gc này gi m
th to ra bnh tuyn.

nh tuyn mnh chia mn, mn nm gia 2 du tiên
cha tên mn th 2 chn th 3 là tham s u vào ca
controller action.
Ví d: va ch /Product/Details/3 c hiu là:
Controller = ProductController
Action = Detail
Id = 3
Controller mnh s là HomeController, Action mnh là Index, Id m  http://localhost:1727/
Ví d: v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 








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 hiu v Controllers
Controller chu trách nhiu khii dùng bên trong ng dng MVC. Controller s
quyc tr v 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




 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 là Index() và About()   c này là 2 action trong
controller HomeController.cs nó thc hi  c gi b a ch /Home/Index và /Home/About. Bt k
c nào có thuc tính public u là mt 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"] = "Sn phm";

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 hiu v Views
Trong controller HomeController.cs, c c Index() và About() u tr v mt view. Mt view cha
các th c tr v cho browser. Trong mô hình MVC thì mng vi mt trang .aspx
trong WebForm.
View ph c t    ng dn. Ví d vi controller HomeController.cs   ng
HomeController.Index() tr v mt view nm  v  ng dn \Views\Home\Index.aspx và
HomeController.About() s tr v mt view nm  v 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" %>

<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>
Tt c các thuc tính nm gia 2 th <asp:Content></asp:Content> nh dng HTML và có th tùy ý sa
i theo ý mun.
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 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
 truy nhp d liu thì phi to nh dng 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 cha tt c nhng gì hin th i dùng trên browser, Controllers ch cha các logic mà tr v
i dùng hong t n action khác. Còn li tt c c vit 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 &copy; 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 ca MVC có th s dng AJAX, javascript không?
Đáp c. V bn ch       t trang .aspx  vi mô hình
WebForm vì th có th thc hin các tác v . Vì th vic s dng jQuery, ASP.NET AJAX, và javascript
u có th thc hic.

Hỏi: Xây dng ng dng vi ASP.NET MVC Framework thì trang web s chi xây dng trên
n
Đápn là th. Nu xây dng trang web vi nn tng WebForm mà s dng ít các controls, usercontrols

hoc ít events thì giá tr ViewState và PostBack không ln nên s thc thi không hm. Trang web xây
dng theo nn WebForm ch thc hin chm khi giá tr ca ViewState là quá ln.

Hỏi: Có phi thc hin test và debug trên ASP.NET MVC Framework d i nn tng WebForm.
Đápc thc hin test và debug trên ASP.NET MVC Framework ch phi thc hin trên Controller
nên d dàng kii thc hin 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