Introduction to ASP.NET MVC Part II
Introduction to ASP.NET MVC Part I ကို ဒီမွာ ဖတ္ႏိုင္ပါတယ္။
Controller နဲ႔ View နဲ႔ဆက္ႏြယ္ပံုေလးကိုရွင္းျပပါမယ္။ Homecontroller ရဲ ႔ Index action(function) ကို အခုလိုျပင္ေရးလိုက္ပါမယ္။
Function Index() As ActionResult
Return View()
End Function
Index action(function) ရဲ႔ return ကို string ကေန ActionResult လို႔ျပင္လိုက္ျပီး Return value ကိုလည္း “Hello!Asp.net MVC” ကေန View() လို႔ ျပင္လိုက္တာပါ။ တနည္းအားျဖင့္ Homecontroller ထဲက Index action ကိုလာ run ရင္ Views Folder ထဲက Page ကို ေခၚတင္မယ္လို႔ ေျပာလိုက္တာပါ။ Action နဲ႔ Views နဲ႔တြဲတဲ့ ေနရာမွာ လိုက္နာရမယ့္ အခ်က္ေလးေတြ ရွိပါတယ္။ Views folder ထဲမွာ Controller နာမည္အတိုင္း sub folder ရွိရပါမယ္။ အဲဒီ sub folder ထဲမွာ Action နာမည္အတိုင္း Page ရွိရပါမယ္။ Views folder ေပၚမွာ Right click ႏွိပ္ျပီးေတာ့ Add ထဲကေနတဆင့္ New Folder ကိုေရြးေပးပါ။ Folder နာမည္ကိုလည္း Home လို႔ေပးရမွာပါ။ ေနာက္တခါ Home Folder ေပၚမွာ Right click ႏွိပ္ျပီးေတာ့ Add ထဲကေနတဆင့္ View ကို ႏွိပ္ေပးပါ။ View Name ကိုေတာ့ HomeController ထဲက Action နာမည္ ျဖစ္တဲ့ Index လို႔ေပးရမွာပါ။ ျပီးရင္ Select Master page ဆိုတဲ့ CheckMark ကိုျဖဳတ္ျပီး Add ကို Click ႏွိပ္ပါ။ View ရဲ႔ page ကလည္း တနည္းအားျဖင့္ ေျပာရရင္ aspx ဖိုင္ပါပဲ။ Asp.net Server Control ေတြကိုလည္း ယူသံုးႏိုင္ပါတယ္။ ဒါေပမယ့္ မ်ားေသာအားျဖင့္ေတာ့ HtmlHelper Class ေတြကို ယူသံုးတာ မ်ားပါတယ္။ Home ထဲက Index.aspx မွာ ေအာက္ကလို ျပင္ေရး လိုက္ပါမယ္။
<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Home Controller's Index Page</title>
</head>
<body>
<div>
<h2>Welcome To Home</h2>
</div>
</body>
</html>
Save လုပ္ျပီး Run ၾကည့္လိုက္ရင္ အရင္ “Hello!Asp.net MVC” လို႔ ေပၚေနရာကေန Views folder ရဲ႔ ွSub folder ျဖစ္တဲ့ Home folder ထဲက Index.aspx page အစားထိုးျပေပးမွာပါ။ ဒီတစ္ခါ ItemController ရဲ႔ detail action ကိုျပင္ၾကည့္ရေအာင္။
Function Detail(ByVal id As Integer) As ActionResult
Return View()
End Function
အဲဒါဆိုရင္ ကြ်န္ေတာ္တို႔ Views folder ထဲမွာ Item ဆိုတဲ့ နာမည္နဲ႔ Folder အသစ္ေဆာက္ေပးရမွာျဖစ္ျပီး။ Item ေအာက္မွာမွ Detail ဆိုတဲ့ နာမည္နဲ႔ View page တစ္ခုယူေပးဖို႔လိုအပ္ပါတယ္။
- Right Click Views Folder -> Add -> New Folder (Folder Name – Item)
- Right Click Item Folder -> Add -> View… (View Name – Detail)
Detail View ထဲမွာ ေအာက္ကလိုျပင္ေရးလိုက္ပါမယ္။
<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Detail</title>
</head>
<body>
<div>
<h3>Item id:<%: Page.RouteData.Values("id")%></h3>
</div>
</body>
</html>
Save လုပ္ျပီး Compile လုပ္ျပီးရင္ browser မွာ
http://localhost:1033/item/detail/20 လို႔ရိုက္ၾကည့္လိုက္ရင္ Item id:20 ဆိုျပီးေတာ့ ထြက္လာမွာပါ။
Page.RouteData.Values(“id”) ကေတာ့ Detail ေနာက္က id တန္ဖိုးကို ဆိုလိုတာပါ။
Model နဲ႔ View ရဲ႔ ဆက္ႏြယ္မႈေလးကိုၾကည့္လုိက္ရေအာင္။ Models ဆိုတဲ့ Folder ေပၚမွာ right click ႏွိပ္ျပီးေတာ့ Add ကေန Class… ကိုေရြးပါ။ class name ကို ItemModel လို႔ေပးလိုက္ပါ။ အဲဒီ class ထဲမွာ ေအာက္က coding ေတြေရးလိုက္ပါ။
Public Class ItemModel
Private mID As Integer
Private mName As String
Public Property ID As String
Public Property Name As String
End Class
Property ေတြက Set,Get ၂ ခုစလံဳးသူ႔ဟာသူ အလုပ္လုပ္ပါတယ္။ Itemcontroller ထဲက Index Action ကိုျပင္ၾကည့္ရေအာင္
Function Index() As ActionResult
Dim Im As New ItemModel
Im.ID = 1
Im.Name = "Monitor"
Return View(Im)
End Function
Return View(Im) ဆိုတဲ့တစ္ေၾကာင္းက အရင္အေရွ႔ကလို ရိုးရုိး View page မဟုတ္ေတာ့ပါဘူး။ View မွာ model ပါလာပါျပီ။ တနည္းအားျဖင့္ Views ထဲက Index View page ဟာ Models ထဲ က ItemModel class နဲ႔ relation ရွိသြားတဲ့သေဘာပါ။ အခု ကြ်န္ေတာ္တို႔မွာ Itemcontroller ရဲ႔ Index action အတြက္ Index View page မေဆာက္ရေသးပါဘူး။ Views folder ထဲက Item Folder ေပၚမွာ right click ႏွိပ္ပါ။ Add ထဲက View.. ကိုေရြးပါ။ View name ကို Index လို႔ေပးျပီး။ Create a Strong-type view ကို check mark လုပ္ေပးပါ။ View Data Class ကိုၾကည့္လုိက္ရင္ Models ထဲမွာ ရွိတဲ့ class ItemModel ဆိုတာကို ေတြ႔ရမွာပါ။(Build လုပ္ေပးဖို႔လိုအပ္ပါတယ္။ Build မလုပ္ရင္ ItemModel ဆိုတာ ေပၚလာမွာ မဟုတ္ပါဘူး။) အဲဒါကိုေရြးေပးလိုက္ပါ။ ျပီးရင္ေတာ့ Add ကို ႏွိပ္ေပးပါ။ Item ရဲ႔ index.aspx မွာေတာ့ ေအာက္က code ကိုေရးလိုက္ပါ။
<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage(Of MvcApplication2.ItemModel)" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Index</title>
</head>
<body>
<div>
<h2><%: Model.ID%></h2>
<h2><%: Model.Name %></h2>
</div>
</body>
</html>
Model.ID,Model.Name ဆိုတာက Itemcontroller ထဲက Index action ထဲမွာ ItemModel class ထဲကို ထည့္ထားတဲ့ 1,Monitor ဆိုတာကိုျပေပးမွာျဖစ္ပါတယ္။
အခု ဥပမာေလးက ရိုးရွင္းပါတယ္။ ဒါေပမယ့္ Model,View,Controller ကိုျခံဳငံုမိမယ္လို႔ ယူဆပါတယ္။ တကယ့္ လက္ေတြ႔မွာ LINQ, Sql Server, Ado.net Entity Data Model စတာေတြနဲ႔ လုပ္ရင္ ဒီထက္ အမ်ားၾကီး ရွဳပ္ေထြးပါတယ္။
Facebook comments:
One Response
Leave a comment
About the Author
Ads
[...] Introduction to ASP.NET MVC Part II [...]