ASP.NET Razor - لغة البرمجة C# و VB

يدعم Razor كلاً من C# (C sharp) و VB (Visual Basic).

قواعد لغة برمجة Razor الرئيسية في C#

  • يُغلف كود Razor بكلمات المفتاح @{ ... }
  • تبدأ تعبيرات داخلية (المتغيرات والوظائف) بـ @
  • تنتهي جمل الكود بمكتبة
  • السلاسل محاطة بأقواس مزدوجة
  • كود C# حساس بالحروف الكبيرة والصغيرة
  • اسم النطاق المرفق للملفات C# هو .cshtml

مثال على C#

<!-- كتلة تعبيرات متسلسلة -->
@{ var myMessage =	"Hello World"; }
<!-- تعبيرات داخلية أو متغيرات -->
<p>قيمة myMessage هي: @myMessage</p> 
<!-- كتلة تعبيرات متعددة -->
@{
var greeting = "Welcome to our site!";
var weekDay = DateTime.Now.DayOfWeek;
var greetingMessage = greeting + " Here in Huston it is: " + weekDay;
}
<p>التحية هي: @greetingMessage</p>

運行實例

قواعد لغة برمجة Razor الرئيسية في VB

  • يُحاط كود Razor بكلمات المفتاح @Code ... End Code
  • تبدأ تعبيرات داخلية (المتغيرات والوظائف) بـ @
  • تُستخدم كلمة المفتاح Dim لتحديد المتغيرات
  • السلاسل محاطة بأقواس مزدوجة
  • VB غير حساس بالحروف الكبيرة والصغيرة
  • اسم النطاق المرفق للملفات VB هو .vbhtml

實例

<!-- كتلة تعبيرات متسلسلة -->
@Code dim myMessage = "Hello World" End Code
<!-- تعبيرات داخلية أو متغيرات -->
<p>قيمة myMessage هي: @myMessage</p> 
<!-- كتلة تعبيرات متعددة -->
@Code
dim greeting = "Welcome to our site!" 
dim weekDay = DateTime.Now.DayOfWeek 
dim greetingMessage = greeting & " Here in Huston it is: " & weekDay
انتهاء الكود 
<p>التحية هي: @greetingMessage</p>

運行實例

كيف يعمل؟

Razor هي لغة برمجة بسيطة تستخدم لدمج الكود على الجانب الخادم في الصفحات.

لغة برمجة Razor تعتمد على إطار ASP.NET، وهو جزء من إطار .NET الخاص بマイكروسوفت مصمم خصيصًا لتطوير تطبيقات الويب.

اللغة البرمجية Razor تمنحك جميع قدرات ASP.NET، ولكن باستخدام لغة برمجة مختصرة، مما يجعلها أسهل للتعلم إذا كنت مبتدئًا، وأكثر فعالية إذا كنت محترفًا.

يمكن وصف صفحات Razor كصفحات HTML تحتوي على نوعين من المحتوى: محتوى HTML وكود Razor.

عند قراءة الخادم لهذه الصفحات، قبل إرسال صفحة HTML إلى المتصفح، يتم تشغيل كود Razor أولاً. يمكن للكود الذي يتم تنفيذه على الخادم إنجاز مهام لا يمكن إنجازها في المتصفح، مثل الوصول إلى قاعدة البيانات على الخادم. يمكن للكود على الخادم إنشاء محتوى HTML ديناميكي قبل إرسال الصفحة إلى المتصفح. من وجهة نظر المتصفح، لا يوجد فرق بين HTML المولد من كود الخادم والHTML الثابت.

تملك صفحات ASP.NET التي تستخدم لغة Razor امتدادات ملفات خاصة: cshtml (استخدام لغة Razor الخاصة بكً#) أو vbhtml (استخدام لغة VB).

تعامل مع الكائنات

غالبًا ما تتضمن الكود على الخادم كائنات.

كائن "Date" هو كائن مدمج في ASP.NET، ولكن يمكن أيضًا تعريف كائنات جديدة، مثل صفحة الويب، ومدخل نصي، وملف، وسجل قاعدة البيانات، وما إلى ذلك.

يمكن للكائنات أن تملك طرق يمكن تنفيذها. يمكن أن يقدم سجل قاعدة البيانات طريقة "حفظ"، يمكن أن يكون لدي كائن صورة طريقة "تدوير"، يمكن أن يقدم كائن بريد إلكتروني طريقة "إرسال"، وما إلى ذلك.

يمكن أن يكون للكائنات خصائص توضح خصائصها. يمكن أن يكون لدي سجلات قاعدة البيانات خصائص FirstName و LastName.

يملك كائن ASP.NET لـ Date خاصية Now (مكتوبة كـ Date.Now)، وتملك خاصية Day (مكتوبة كـ Date.Now.Day). على سبيل المثال، يوضح هذا الكود كيفية الوصول إلى بعض خصائص كائن Date:

實例

<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

أهم خاصية للصفحات الديناميكية هي اتخاذ الإجراءات بناءً على الشروط.

لتحقيق هذا الهدف، يُستخدم عادة جملة 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>

運行實例