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. เขียนเงื่อนไขได้
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[] { |
<select id="Select1" name="Select2"> <option value="opt2">Option 2</option> <option value="opt3">Option 3</option> </select> |
* @Html.DropDownList ปกติใช้ กับ SelectListItem ซึ่งแปลงจาก IEnumerable
