ASP.NET Razor - C # และ VB Code Syntax
Razor รองรับทั้ง C # (C คม) และ VB (Visual Basic)
กฎไวยากรณ์มีดโกนหลักสำหรับ C #
- บล็อกรหัสมีดโกนอยู่ใน @{ ... }
- นิพจน์อินไลน์ (ตัวแปรและฟังก์ชัน) เริ่มต้นด้วย @
- คำสั่งรหัสลงท้ายด้วยอัฒภาค
- ตัวแปรถูกประกาศด้วย var คำสำคัญ
- สตริงถูกปิดด้วยเครื่องหมายคำพูด
- รหัส C# คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
- ไฟล์ C# มีนามสกุล .cshtml
C# ตัวอย่าง
<!-- Single statement block -->
@{ var myMessage = "Hello World"; }
<!-- Inline expression or variable -->
<p>The value of myMessage is: @myMessage</p>
<!-- Multi-statement block -->
@{
var greeting = "Welcome to our site!";
var weekDay = DateTime.Now.DayOfWeek;
var greetingMessage = greeting + " Here in Huston it is: " + weekDay;
}
<p>The greeting is: @greetingMessage</p>
กฎไวยากรณ์มีดโกนหลักสำหรับVB
- บล็อกรหัสมีดโกนอยู่ใน @Code ... End Code
- นิพจน์อินไลน์ (ตัวแปรและฟังก์ชัน) เริ่มต้นด้วย @
- ตัวแปรถูกประกาศด้วยคีย์เวิร์ด Dim
- สตริงถูกปิดด้วยเครื่องหมายคำพูด
- รหัส VB ไม่คำนึงถึงขนาดตัวพิมพ์
- ไฟล์ VB มีนามสกุล .vbhtml
ตัวอย่าง
<!-- Single statement block -->
@Code dim myMessage = "Hello World" End Code
<!-- Inline expression or variable -->
<p>The value of myMessage is: @myMessage</p>
<!-- Multi-statement block -->
@Code
dim greeting = "Welcome to our site!"
dim weekDay = DateTime.Now.DayOfWeek
dim greetingMessage = greeting & " Here in Huston it is: " & weekDay
End Code
<p>The greeting is: @greetingMessage</p>
มันทำงานอย่างไร?
Razor เป็นไวยากรณ์การเขียนโปรแกรมอย่างง่ายสำหรับการฝังโค้ดเซิร์ฟเวอร์ในหน้าเว็บ
ไวยากรณ์ Razor อิงตามเฟรมเวิร์ก ASP.NET ซึ่งเป็นส่วนหนึ่งของ Microsoft.NET Framework ที่ออกแบบมาโดยเฉพาะสำหรับการสร้างเว็บแอปพลิเคชัน
ไวยากรณ์ Razor ให้พลังทั้งหมดของ ASP.NET แก่คุณ แต่ใช้รูปแบบที่เรียบง่าย ซึ่งง่ายต่อการเรียนรู้หากคุณเป็นมือใหม่ และทำให้คุณมีประสิทธิผลมากขึ้นหากคุณเป็นผู้เชี่ยวชาญ
หน้าเว็บมีดโกนสามารถอธิบายได้ว่าเป็นหน้า HTML ที่มีเนื้อหาสองประเภท: เนื้อหา HTML และโค้ดมีดโกน
เมื่อเซิร์ฟเวอร์อ่านหน้าเว็บ เซิร์ฟเวอร์จะรันโค้ด Razor ก่อน ก่อนส่งหน้า HTML ไปยังเบราว์เซอร์ รหัสที่ทำงานบนเซิร์ฟเวอร์สามารถทำงานที่ไม่สามารถทำได้ในเบราว์เซอร์ เช่น การเข้าถึงฐานข้อมูลเซิร์ฟเวอร์ รหัสเซิร์ฟเวอร์สามารถสร้างเนื้อหา HTML แบบไดนามิกได้ทันที ก่อนส่งไปยังเบราว์เซอร์ เมื่อดูจากเบราว์เซอร์ HTML ที่สร้างโดยรหัสเซิร์ฟเวอร์ก็ไม่ต่างจากเนื้อหา HTML แบบคงที่
หน้าเว็บ ASP.NET ที่มีไวยากรณ์ Razor มีนามสกุลไฟล์พิเศษ cshtml (มีดโกนโดยใช้ C #) หรือ vbhtml (มีดโกนที่ใช้ VB)
การทำงานกับวัตถุ
การเข้ารหัสเซิร์ฟเวอร์มักเกี่ยวข้องกับอ็อบเจ็กต์
ออบเจ็กต์ "DateTime" เป็นอ็อบเจ็กต์ ASP.NET ที่มีอยู่แล้วภายใน แต่อ็อบเจ็กต์ยังสามารถกำหนดด้วยตัวเองได้ เช่น หน้าเว็บ กล่องข้อความ ไฟล์ บันทึกฐานข้อมูล ฯลฯ
ออบเจ็กต์อาจมีวิธีที่สามารถทำได้ บันทึกฐานข้อมูลอาจมีวิธีการ "บันทึก", วัตถุรูปภาพอาจมีวิธีการ "หมุน", วัตถุอีเมลอาจมีวิธีการ "ส่ง" เป็นต้น
ออบเจ็กต์ยังมีคุณสมบัติที่อธิบายคุณลักษณะของมันด้วย บันทึกฐานข้อมูลอาจมีคุณสมบัติ FirstName และ LastName (อื่นๆ)
วัตถุ ASP.NET DateTime มีคุณสมบัติ Now (เขียนเป็น DateTime.Now) และคุณสมบัติ Now มีคุณสมบัติ Day (เขียนเป็น DateTime.Now.Day) ตัวอย่างด้านล่างแสดงวิธีเข้าถึงคุณสมบัติบางอย่างของวัตถุ DateTime:
ตัวอย่าง
<table border="1">
<tr>
<th
width="100px">Name</th>
<td width="100px">Value</td>
</tr>
<tr>
<td>Day</td><td>@DateTime.Now.Day</td>
</tr>
<tr>
<td>Hour</td><td>@DateTime.Now.Hour</td>
</tr>
<tr>
<td>Minute</td><td>@DateTime.Now.Minute</td>
</tr>
<tr>
<td>Second</td><td>@DateTime.Now.Second</td>
</tr>
</td>
</table>
ถ้าและเงื่อนไขอื่น
คุณลักษณะที่สำคัญของหน้าเว็บแบบไดนามิกคือคุณสามารถกำหนดได้ว่าจะทำอย่างไรตามเงื่อนไข
วิธีทั่วไปในการทำเช่นนี้คือการใช้คำสั่ง if ... else:
ตัวอย่าง
@{
var txt = "";
if(DateTime.Now.Hour > 12)
{txt = "Good Evening";}
else
{txt = "Good Morning";}
}
<html>
<body>
<p>The message is @txt</p>
</body>
</html>
กำลังอ่านอินพุตของผู้ใช้
คุณลักษณะที่สำคัญอีกประการของหน้าเว็บแบบไดนามิกคือคุณสามารถอ่านข้อมูลของผู้ใช้ได้
อินพุตถูกอ่านโดยฟังก์ชัน Request[] และการโพสต์ (อินพุต) ถูกทดสอบโดยเงื่อนไข IsPost:
ตัวอย่าง
@{
var totalMessage = "";
if(IsPost)
{
var num1 = Request["text1"];
var num2 = Request["text2"];
var total = num1.AsInt() + num2.AsInt();
totalMessage =
"Total = " + total;
}
}
<html>
<body
style="background-color: beige; font-family: Verdana, Arial;">
<form
action="" method="post">
<p><label for="text1">First Number:</label><br>
<input type="text" name="text1" /></p>
<p><label for="text2">Second
Number:</label><br>
<input type="text" name="text2" /></p>
<p><input
type="submit" value=" Add " /></p>
</form>
<p>@totalMessage</p>
</body>
</html>