ASP.NET Razor - Sintaks Kode C# dan VB


Razor mendukung C# (C sharp) dan VB (Visual Basic).


Aturan Sintaks Razor Utama untuk C#

  • Blok kode silet diapit dalam @{ ... }
  • Ekspresi sebaris (variabel dan fungsi) dimulai dengan @
  • Pernyataan kode diakhiri dengan titik koma
  • Variabel dideklarasikan dengan kata kunci var
  • String diapit dengan tanda kutip
  • Kode C# peka huruf besar-kecil
  • File C# memiliki ekstensi .cshtml

Contoh 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>

Aturan Sintaks Razor Utama untuk VB

  • Blok kode silet terlampir di @Code ... End Code
  • Ekspresi sebaris (variabel dan fungsi) dimulai dengan @
  • Variabel dideklarasikan dengan kata kunci Dim
  • String diapit dengan tanda kutip
  • Kode VB tidak peka huruf besar-kecil
  • File VB memiliki ekstensi .vbhtml

Contoh

<!-- 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>


Bagaimana cara kerjanya?

Razor adalah sintaks pemrograman sederhana untuk menyematkan kode server di halaman web.

Sintaks Razor didasarkan pada kerangka ASP.NET, bagian dari Microsoft.NET Framework yang dirancang khusus untuk membuat aplikasi web.  

Sintaks Razor memberi Anda semua kekuatan ASP.NET, tetapi menggunakan sintaks yang disederhanakan yang lebih mudah dipelajari jika Anda seorang pemula, dan membuat Anda lebih produktif jika Anda seorang ahli.

Halaman web Razor dapat digambarkan sebagai halaman HTML dengan dua jenis konten: konten HTML dan kode Razor.

Saat server membaca halaman, server menjalankan kode Razor terlebih dahulu, sebelum mengirimkan halaman HTML ke browser. Kode yang dieksekusi di server dapat melakukan tugas yang tidak dapat dilakukan di browser, misalnya mengakses database server. Kode server dapat membuat konten HTML dinamis dengan cepat, sebelum dikirim ke browser. Dilihat dari browser, HTML yang dihasilkan oleh kode server tidak berbeda dengan konten HTML statis.

Halaman web ASP.NET dengan sintaks Razor memiliki ekstensi file khusus cshtml (Razor menggunakan C#) atau vbhtml (Razor menggunakan VB).


Bekerja Dengan Objek

Pengkodean server sering kali melibatkan objek.

Objek "DateTime" adalah objek ASP.NET bawaan yang khas, tetapi objek juga dapat didefinisikan sendiri, halaman web, kotak teks, file, catatan database, dll.

Objek mungkin memiliki metode yang dapat mereka lakukan. Catatan database mungkin memiliki metode "Simpan", objek gambar mungkin memiliki metode "Putar", objek email mungkin memiliki metode "Kirim", dan seterusnya.

Objek juga memiliki sifat yang menggambarkan karakteristiknya. Catatan database mungkin memiliki properti FirstName dan LastName (antara lain).

Objek ASP.NET DateTime memiliki properti Now (ditulis sebagai DateTime.Now), dan properti Now memiliki properti Day (ditulis sebagai DateTime.Now.Day). Contoh di bawah ini menunjukkan cara mengakses beberapa properti objek DateTime:

Contoh

<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>

Kondisi If dan Else

Fitur penting dari halaman web dinamis adalah Anda dapat menentukan apa yang harus dilakukan berdasarkan kondisi.

Cara umum untuk melakukannya adalah dengan pernyataan if ... else :

Contoh

@{
var txt = "";
if(DateTime.Now.Hour > 12)
  {txt = "Good Evening";}
else
  {txt = "Good Morning";}
}
<html>
<body>
<p>The message is @txt</p>
</body>
</html>

Membaca Masukan Pengguna

Fitur penting lainnya dari halaman web dinamis adalah Anda dapat membaca input pengguna.

Input dibaca oleh fungsi Request[], dan posting (input) diuji oleh kondisi IsPost:

Contoh

@{
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>