Harder, Faster, Better, Stronger

September 20, 2011

Asp.Net MVC 3 – Exploring Controller

Filed under: .Net — wrach @ 8:34 am

ในการใช้งาน MVC ให้เรามองที่ Controller เป็นหลัก เพราะ Controller จะเป็นตัวกำหนดว่าจะเอา Data อะไร (Model) ไปแสดงผลยังไงที่ไหน (View)

Routing System

เป็นการ Mapping ไปยัง Controller และ Action มองได้ง่ายๆว่า Controller คือ Class และ Action คือ Method ที่อยู่ใน Class นั้นๆ โดยค่า Default ของ Routing จะอยู่ใน Global.asax

  • Host/{Controller}/{Action} เช่น http://localhost/Home/About
    • จะมาจาก Controller Class ชื่อ HomeContrller และ Method ชื่อ About
  • Host/{Controller} จะเป็นการเข้า Action ชื่อ Index เพราะว่ากำหนด Default จะ Routing ไว้ เช่น http://localhost/Home
  • Host/ จะเข้าที่ Host/Home

การ Customize Routhing จะว่ากันใน Course Advance

First Controller

ลองสร้าง Controller กับ Action โดย Click ขวาที่ Controller Folder แล้ว Add Controller ตั้งชื่อ TaskController ใช้ Template แบบ Empty Controller

imageimage

สร้าง Method ชื่อ Hello return เป็น string แล้ว Code ตามนี้

image

เมื่อ Run แล้วเข้า URL /Task/Hello จะได้เป็นหน้า Page ที่มีเป็น string ที่ return มาจาก Controller ตรงๆ

image

First View

แต่ถ้าต้องการแสดงผลผ่าน View จะต้องให้ Method return เป็น ViewResult หรือ ActionResult ซึ่ง ActionResult จะครอบคุมมากกว่าโดยจะ Return ได้เป็น View, PartialView, Redirect, RedirectToAction, Content, Json, Javascript, File, EmptyResult

ลองเขียน Method ชื่อ ListData โดยให้ return เป็น ActionResult ตามตัวอย่างนี้

image

เมื่อ Run แล้วเข้า URL /Task/ListData จะได้ Error Page เนื่องจากว่าหา View ที่จะให้ Render ไม่เจอ

image

ดังนั้นเราจะต้องสร้าง View มาเพื่อรับ ActionResult จาก Controller โดยที่จะใช้การ Click ขวาที่ Action แล้วเลือก Add View แล้วใส่ชื่อ View ใน Dialog ตามรูป

imageimage

จะได้ /Views/Task/ListData.cshtml ซึ่งจะเป็น File ที่รวม Html กับ Razor Syntax ซึ่งจะ Render เป็น Html ที่ Browser แสดงผลได้ในตอน Runtime

image

เมื่อ Run อีกครั้งเข้าที่ URL /Task/ListData จะได้ Page ที่แสดงผลตามใน View โดยขณะที่ Run อยู่เราสามารถแก้ไข View ได้ แต่ไม่สามารถแก้ Controller ได้

image

Pass Data ระหว่าง Controller กับ View

เราสามารถ Pass Data ซึ่งหมายถึง Objects, Model, Value, etc. จาก Controller ไปยัง View ได้ด้วย

  • ViewBag เป็น Dynamic Collection ที่เก็บ Object ใดๆ จะเขียนแบบ Dynamic Property หรือเป็น Array ก็ได้
    • Controller
      ViewBag.TestData1="My Test Data1"; //ViewBag["TestData1"]="My Test Data1"; 
      
      • ViewBag.TestData1="My Test Data1"; //ViewBag["TestData1"]="My Test Data1";
    • View
      • @ViewBag.TestData
  • Model Binding เป็นการส่ง Data Object ผ่านไปกับ View โดยที่ View จะใส่ keyword @model {Full Name Class} หรือ @model IList<> เพื่อส่งเป็น List ไปก็ได้ และใช้ Keyword @Model ในการแสดงผล
    • View
      • @model MvcApplication1.Models.RegisterModel
      • User Name: @Model.UserName
      • หรือ
      • @model List<MvcApplication1.Models.RegisterModel>
      • @Model[0].UserName
  • AJAX ใช้ technique AJAX รับส่ง Data

จะใช้ ViewBag เพื่อแทน Model Binding ก็ได้ แต่ว่าจะไม่มี CodeC Intellisense ขึ้นให้

ตัวอย่าง ViewBag

Controller View
แก้ใน Method ListData

image

แก้ /Views/Task/ListData.cshtml

image

ตัวอย่าง @Model

Controller View
เพิ่ม Method ShowDataimage สร้าง /Views/Task/ShowData.cshtmlimage

ตัวอย่าง @Model IList

Controller View
เพิ่ม Method ListTaskimage สร้าง /Views/Task/ListTask.cshtmlimage

การส่ง Data จาก View มา Controller

เหมือนการ Post จะรับจาก Request หรือจากที่ Parameter ของ Action เลยก็ได้

จาก Request

imageimage

แบบ Parameter ของ Action

imageimage

จะเห็นว่าแบบเป็น Parameter ของ Action จะสวยงามกว่า เขียน Code สั้น กระชับ เห็นชัดเจนว่า Action นี้ต้องการ Parameter อะไรบ้าง และยังใส่ค่า Default ลงไปได้ทันที

Return View

โดย Default ถ้า Actionใน Controller Return View โดยไม่มี Parameter ใดๆ ASP.Net Engine ก็จะใช้ชื่อของ Action ไปหา View ใน Folder ของ Controller แต่ถ้าต้องการให้ไปหา View ชื่ออื่นก็ทำได้โดยใส่ Path ของ View ที่จะให้ Render หรือใช้ RedirectToAction เช่นตัวอย่าง

image

Advertisement

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Theme: Rubric. Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.