Introduction to ASP.NET MVC

Web လောကမှာ MVC Framework တွေ ခေတ်စားလာတဲ့ အချိန်မှာ Asp.net မှာလည်း MVC Framework တွေ ထွက်ပေါ် လာပါတယ်။ အခုဆိုရင် Asp.net MVC 2.0 ထိတောင် ရောက်လာပါပြီ။ Asp.net MVC ကို Microsoft ရဲ့ တခြား Web Development Platform တွေလို မဟုတ်ပဲ Open Source လုပ်လာပါတယ်။ Visual Studio 2010 မှာတော့ Asp.net MVC 2.0 ပါ၀င်လာပြီး Visual Studio 2008(sp1) မှာ MVC သုံးချင်တယ် ဆိုရင်တော့ www.asp.net/mvc အောက်မှာ ဒေါင်းလုပ် ရယူနိုင်ပါတယ်။

MVC ဆိုတာဘယ်လိုမျိုးလဲဆိုတာကို Myanmaritpros မှာ ကိုအိမောင်ရေးခဲ့ဖူးပါတယ်။ ကျွန်တော်ရေးရင်လည်း ဒါတွေပဲ ပြန်ရေးရမှာပါ။ အောက်က Link မှာ သွားရောက်ဖတ်ရှု့ကြည့်နိုင်ပါတယ်။

http://www.myanmaritpro.com/profiles/blogs/use-mvc-pattern-right-now

MVC Framework ကို လေ့လာရာမှာ အဲဒီ MVC ကို အသုံးပြုပြီးတော့ Application တွေ ရေးကြည့် လိုက်တာက အမြန်ဆုံးနဲ့ အထိရောက်ဆုံး နည်းလမ်းပါ။

Creating a new ASP.NET MVC Project

Visual Studio 2010 ရဲ့ File -> New -> Project -> ASP.NET MVC 2 Empty Web Application ကိုရွေးပါ။ Name, Location တွေ ကိုယ့် စိတ်ကြိုက် ရွေးပြီးသွားရင် OK နှိပ်ပါ။

Solution Explorer မှာ content, controllers, models, scripts, views, global.asa, web.config စတာတွေကို မြင်တွေ့ရမှာပါ။

User input တွေကို အဓိက ကိုင်တွယ် ပေးမယ့် controller ကနေပဲ စလိုက်ရအောင်။ Controller အသစ်ကို ယူပါမယ်။ Solution Explorer ထဲက Controllers ပေါ်မှာ right click နှိပ်ပြီးတော့ Add ကနေတဆင့် Controller ကိုရွေးချယ်ရမှာပါ။ ControllerName ကို လာတောင်းတဲ့ နေရာမှာတော့ Default1Controller ဆိုပြီးတော့ Default1 ကို highlight လုပ်ထားတဲ့ အနေအထားနဲ့ တွေ့ရမှာပါ။ Default1 နေရာမှာ Home လို့ ပြင်လိုက်ပါ။ အပြည့်အစုံ အနေနဲ့ ဆိုရင်တော့ HomeController ဆိုပြီး ပြနေမှာပါ။ Add action methods for Create, Update, Delete and Detail scenarios ဆိုတဲ့ check mark လေးကိုတော့ ဒီအတိုင်း ထားခဲ့ပါ။ ပြီးရင်တော့ Add ကို နှိပ်လိုက်ပါ။

Public Class HomeController
        Inherits System.Web.Mvc.Controller

        '
        ' GET: /Home

        Function Index() As ActionResult
            Return View()
        End Function

    End Class

အပေါ်မှာ ပြထားတဲ့ coding အတိုင်း မြင်ရမှာ ဖြစ်ပါတယ်။ Function Index() မှာ အောက်က coding အတိုင်း ပြန်ပြင် ရေးကြည့်ရအောင်။

Function Index() As String
     Return "Hello! Asp.net MVC"
End Function

Function Index ရဲ ့ Return type ကို ActionResult အစား String ပြောင်းပြီးတော့ Return View() အစား Return “Hello! Asp.net MVC” လို့ ပြောင်းလိုက်တာပါ။ ဒါကို run ကြည့်လိုက်ရင်တော့ web browser ပေါ်မှာ “Hello!Asp.net MVC” လို့ပေါ်လာမှာပါ။

ဘယ်လို အလုပ်လုပ်သွားသလဲ ဆိုတာ ကြည့်ရအောင်။ controller ဆိုတာ User Input တွေကို ကိုင်တွယ်တာလို့ အပေါ်မှာ ကျွန်တော် ပြောခဲ့ဖူးပါတယ်။ တနည်းအားဖြင့် ပြောရင်တော့ URL တွေကို ကိုင်တွယ်တာ လို့လည်း ပြောလို့ရပါတယ်။ Asp.net MVC မှာ route လုပ်မယ့် သတ်မှတ်ချက်တွေကို Global.asa မှာရှိတဲ့ RegisterRoutes ဆိုတဲ့ function က အဓိက လုပ်ပေးနေတာပါ။

Shared Sub RegisterRoutes(ByVal routes As RouteCollection)
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}")

        ' MapRoute takes the following parameters, in order:
        ' (1) Route name
        ' (2) URL with parameters
        ' (3) Parameter defaults
        routes.MapRoute( _
            "Default", _
            "{controller}/{action}/{id}", _
            New With {.controller = "Home", .action = "Index", .id = UrlParameter.Optional} _
        )

    End Sub

{controller}/{action}/{id}

ဆိုတဲ့ တစ်ကြောင်းက အဓိကပါ။ ပထမဆုံး controller နာမည်ကို ကြည့်ပါမယ်။ နောက် controller ထဲမှာရှိတဲ့ action ကို ကြည့်ပါမယ်။ နောက်ဆုံး တစ်ခုကတော့ action ရဲ့ parameter လို့ ပြောလို့ရတဲ့ id ကို ဆက်ကြည့်ပါမယ်။

New With {.controller=”Home”,.action=”Index”,.id=UrlParameter.optional)

ဆိုတဲ့ တစ်ကြောင်းကတော့ default အနေနဲ့ HomeController ထဲမှာရှိတဲ့ Index ဆိုတဲ့ function ကို အလုပ်လုပ်ပါမယ့်လို့ ပြောထားတာပါ။ အဲဒါတွေကြောင့် ကျွန်တော်တို့ run လိုက်တဲ့ asp.net mvc application က HomeController ထဲမှာရှိတဲ့ Index ဆိုတဲ့ function က အလုပ်လုပ် သွားတာပါ။

http://localhost:1033/

http://localhost:1033/home

http://localhost:1033/home/index

အပေါ်က ၃ ခုလုံးက အဖြေတူတူ ထွက်မှာပါ။ 1033 ဆိုတာက Visual Studio ရဲ့ portable web server က random ချပေးထားတဲ့ port နံပါတ်ပါ။ တစ်ယောက်နဲ့ တစ်ယောက် မတူညီနိုင်ပါဘူး။

နောက်ထပ် action(function) တစ်ခုကို Homecontroller ထဲမှာ ထည့်ကြည့်ရအောင်။

Public Class HomeController
        Inherits System.Web.Mvc.Controller

        '
        ' GET: /Home

        Function Index() As String
            Return "Hello!Asp.net MVC"
        End Function

        Function Explorer() As String
            Return "I'm Explorer Action"
        End Function

    End Class

Explorer ဆိုတဲ့ Action တစ်ခုကို ထပ်ထည့် ထားတာပါ။ run လိုက် browser မှာ စမ်းရိုက်ကြည့်လိုက် လုပ်ရတာ ကြာပါတယ်။ web browser ကို မပိတ်ပါနဲ့။ coding မှာ တခုခ ုပြင်ပြီးစမ်းကြည့်ချင်ရင် Solution Explorer ပေါ်မှာရှိတဲ့ ကိုယ့် project ပေါ်မှာ right click နှိပ်ပြီး Build ဆိုတာကို နှိပ်လိုက်ပါ။ ပြီးရင် web browser မှာ url ကို ပြောင်းရိုက် လိုက်ရင် ရပါတယ်။

Browser မှာ

http://localhost:1033/home/explorer

လို့ ရိုက်လိုက်ရင် “I’m Explorer Action” လိ်ု့ပေါ်လာမှာပါ။

နောက်ထပ် Controller အသစ်တခု ထပ်ယူပါမယ်။ ဒီတခါ Controller နာမည်ကို Item လို့ပေးပါမယ်။ အပြည့်အစုံ ဆိုရင်တော့ ItemController လို့ ပေါ်နေမှာပါ။ ItemController ထဲမှာ ရှိတဲ့ Coding တွေက အောက်က လိုပြင်လိုက်ပါမယ်။

Public Class ItemController
       Inherits System.Web.Mvc.Controller

       '
       ' GET: /Item

       Function Index() As String
              Return "I'm Itemcontroller and Index action"
       End Function

       Function Detail(ByVal id As Integer) As String
              Return "Item:" + cstr(id)
       End Function
End Class

Browser မှာ

http://localhost:1033/item

(or)

http://localhost:1033/item/index

လို့ ရိုက်လိုက်ရင် “I’m Itemcontroller and Index action” ဆိုပြီး ပေါ်လာမှာပါ။ Itemcontroller ထဲမှာ Detail ဆိုတဲ့ action တစ်ခုလည်း ရှိပါသေးတယ်။ အဲဒီ action ထဲမှာ parameter အဖြစ် id ကို pass လုပ်ထားပါတယ်။

Browser မှာ

http://localhost:1033/item/detail/3

အဖြေအနေနဲ့ Item:3 ဆိုပြီး ထွက်လာမှာပါ။

item ဆိုတာက controller ကို ကိုယ်စားပြုပါတယ်။ detail ဆိုတာက itemcontroller ထဲမှာ ရှိတဲ့ action(function) ကို ကိုယ်စားပြုပါတယ်။ 3 ဆိုတာက action ရဲ့ id(parameter) အဖြစ် ကိုယ်စားပြုပါတယ်။

ဆက်ရန်…..

Facebook comments:

3 Responses

  1. [...] Zwar has written 11 posts. ShareIntroduction to ASP.NET MVC Part I ကို ဒီမှာ [...]

  2. [...] Introduction to ASP.NET MVC [...]

  3. အကိုရေကျေးဇူးတင်ပါတယ် ။ မြန်မာလို ဖတ်ရတော.ပိုပြီး ရှင်းလင်းပါတယ်။ နောက်လည်း ဆက်အားပေးနေပါမယ်။

Leave a comment


*