ASP.Net MVC 3 – View and Razor Engine

 

Razor Engine

ASP.Net MVC มีความสามารถรองรับ concept ของ View Engine
View Engine เป็น Render หน้า web ที่ Browser ทั่วไป โดย View Engine จะมี Syntax และความสามารถแตกต่างกันไป
ASP.Net MVC จะมี View Engine มาให้อยู่แล้วสองตัวคือ Razor และ ASP.Net แต่จะมีที่ Support อยู่อีกคือ Spark และ nhaml (นิยมใช้ใน Ruby)

ใน Course นี้จะใช้ Razor เป็นหลัก โดย Razor นี้เพิ่งเพิ่มมาใน ASP.Net และ ASP.Net MVC version 4
นอกจาก ใน ASP.Net MVC แล้ว Razor ยังใช้ได้ใน ASP.Net Web Form ได้ด้วย

Razor ถูกออกแบบมาให้
    – Compact, Expressive, and Fluid กระทัดรัด มี syntax น้อย เวลาเขียนใช้ร่วมกับ html ได้สะดวกไม่กระโดดข้ามไปมา อยู่รวมกันอย่างสวยงามเป็นระเบียบ
    – Easy to Learn
    – Is not a new language
    – Works with any Text Editor
    – Has great Intellisense

Guide to Razor Syntax

1. ขึ้นต้นบรรทัดด้วย @ แล้วจะเป็น Single Statement หรือ Multi-Statement

2. ปิด Block ของ Statement ด้วย {…}

3. Multi-Statement ขั้นด้วย Semi Colon ;

4. ใช้ var ได้ ในการประกาศตัวแปร และเรียกใช้ Class ต่างๆของใน .Net และใน Project

5. ใช้ " " (Double Quotation Mark) เวลา Assign String
6. Case sensitive
7. โดยแล้วมากจะใช้เพื่อแสดง Value ของ Object และ HtmlHelper
8. เขียนเงื่อนไขได้

http://www.asp.net/webmatrix/tutorials/2-introduction-to-asp-net-web-programming-using-the-razor-syntax

HtmlHelper

เป็น Class ที่ช่วยสร้าง Tag HTML โดยมีที่ใช้บ่อยๆเช่น

Method	Example	HTML Tag
@Html.TextBox	@Html.TextBox("Text1","value")	<input id="Text1" name="Text1" type="text" value="value" />
@Html.TextArea	@Html.TextArea("textarea1","value line1\n value line 2")	<tr><td></td><td><textarea cols="20" id="textarea1" name="textarea1" rows="2"> value line1 value line 2</textarea></td></tr>
@Html.CheckBox	@Html.CheckBox("check1",true)	<input checked="checked" id="check1" name="check1" type="checkbox" value="true" />
@Html.ActionLink	@Html.ActionLink("List","List","Home")	<a href="/Home/List">List</a>
@Html.Hidden	@Html.Hidden("Hidden1","hidden value")	<input name="check1" type="hidden" value="false" />
@Html.Label	@Html.Label("EditText","Label Text")	<label for="EditText">Label Text</label>
@Html.RadioButton	@Html.RadioButton("Radio1","r1")	<input id="Radio1" name="Radio1" type="radio" value="r1" />
@Html.DropDownList*	@Html.DropDownList("Select1", new[]  {     new SelectListItem {             Text = "Option 1",                    Value = "opt1"              },              new SelectListItem {                   Text = "Option 2",                    Value = "opt2"              },              new SelectListItem {                    Text = "Option 3",                    Value = "opt3"          }     })	<select id="Select1" name="Select2"> <option value="opt1">Option 1</option> <option value="opt2">Option 2</option> <option value="opt3">Option 3</option> </select>

* @Html.DropDownList ปกติใช้ กับ SelectListItem ซึ่งแปลงจาก IEnumerable

Asp.Net MVC 3 – Exploring Controller

ในการใช้งาน 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

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

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

First View

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

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

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

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

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

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

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	แก้ /Views/Task/ListData.cshtml

ตัวอย่าง @Model

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

ตัวอย่าง @Model IList

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

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

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

จาก Request

แบบ Parameter ของ Action

จะเห็นว่าแบบเป็น 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 เช่นตัวอย่าง

ASP.Net MVC 3 – Over View

ก่อนจะไป ASP.Net MVC ขอพูดถึง ASP.Net Web Form ก่อนสักนิด เพื่อให้เห็นความแตกต่าง

ASP.Net Web Form

เขียน Code ในแบบของ Event Driven

ข้อดี

1. Rapid Application Development สร้าง Web App. ได้เร็ว
2. ถ้าเคยเขียน Windows Form มาก่อน จะเรียนรู้ได้ทันที
3. Designer เป็น WYSIWYG
4. มี Server Side Controls ให้ใช้ในแบบ Drag and Drop

ข้อเสีย

1. เกิด network traffic มากจาก Viewstate และ Postback
2. Page Life Cycle ซับซ้อน
3. Control Client Script ได้ไม่สะดวก

ASP.Net ก็มีทั้งข้อดีและข้อเสียอยู่ แต่แล้วด้วยกระแส MVC จาก Ruby On Rails, Struts, JSF, etc. ทาง Microsoft จึงออก ASP.Net MVC ขึ้นมาเป็นทางเลือกเพื่อให้ Developer เลือกใช้ตามความเหมาะสมของ Project

ASP.Net MVC

เขียนในแบบ MVC

ข้อดี

1. แบ่งส่วนการทำงานอย่างชัดเจน เป็น Model, View และ Controller
2. ควบคุม
3. เรียบง่าย

MVC คืออะไร

Model – “Data” ที่วิ่งผ่านไปมาใน Application ทั้งที่เป็นการ View และInput รวมถึง Database และ Data Rules, Business Logic View – ส่วนของการแสดงผลติดต่อกับ User Controller – ส่วนของการควบคุม Flow การทำงานระหว่าง View และ Model

Asp.Net MVC 3 Pattern

View Engine, Controller, Model

 

First Asp.Net MVC 3 Project

สิ่งที่่ต้องมี

1. Visual Studio 2010 หรือ Visual Studio 2010 Express Web Development
   http://www.microsoft.com/visualstudio/en-us/products/2010-editions/express-iso
2. Asp.Net MVC 3
   http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=1491

ตอนนี้เราจะมาเริ่มสร้าง Project แรกกัน

1. ไปที่เมนู File –> New Project ที่ Dialog New Project เลือก Visual C# –> ASP.Net MVC 3 Web Application (ใส่ชื่อและเลือก Location ตามต้องการ) แล้ว OK
   
2. เลือก Project Template เป็น Internet Application และ View Engine เป็น Razor แล้ว OK
   

   

3. ที่ขั้นตอนนี้เราจะได้ Project Asp.Net MVC 3 โดยที่ Solution Explorer จะเห็น Structure ของ Project ดังนี้

• App_Data เหมาะสำหรับใส่ Physical Data เช่น MDB, SDF, SQL Lite, etc.
• Content สำหรับพวก CSS, Image อะไรๆที่เป็น static
• Controllers เป็นที่เก็บ code ในส่วน Controller โดยปกติ Class ที่ทำหน้าที่เป็น Controller จะลงท้ายด้วย Controller ใน Template Project จะมีตัวอย่างมาให้คือ AccountController.cs กับ HomeController.cs
• Models เป็นที่เก็บ code ที่เกี่ยวก้องกับ Model เช่น Entity Class, Data Access
• Scripts เป็นส่วนของ Client Scripts จาก Template จะใส่ jQuery 1.5.1 และ jQuery UI 1.8.11 และ scripts อื่นๆของทาง MS มา
• Views เก็บส่วน View การแสดงผล ถ้า View Engine เป็น Razor จะเป็น .cshtml ส่วน ASPX ก็จะเป็น .aspx
  • View จะแยก Folder ตาม Controller
  • Shared จะเก็บสิ่งที่ View ใช้ร่วมกันอย่าง Master Page (_Layout.cshtml), Partial Page
  • _ViewStart.cshtml จะเป็น

กด F5 เพื่อ Run ก็จะเห็น Default Project ของ Asp.Net MVC ตามรูป

ใน Part ต่อไปและอธิบายการทำงานของ Controller