Pengenalan ASP.NET Menggunakan Razor Syntax

0

Ditulisan sebelumnya kita sudah meng-instal ASP.Net Web Helper Library, pada kesempatan kali ini saya akan memberikan Anda gambaran pemrograman ASP.NET menggunakan Razor syntax. ASP.NET merupakan teknologi Microsoft untuk menjalankan halaman web dinamis pada server web.

Kita akan membuat sebuah halaman yang menggunakan kode sederhana untuk waktu dan tanggal. Contoh di sini akan memperkenalkan kepada anda Razor syntax yang memungkinkan Anda masukkan kode ke dalam HTML pada Halaman ASP.NET.

Buka default.cshtml dan tambahkan markup berikut ini :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Belajar Menggunakan WebMatrix</title>
</head>
<body>
<h1>Hello World</h1>
<p>Saya berhasil membuat halaman web dengan WebMatrix</p>
<p>Waktu Menunjukan @DateTime.Now</p>
</body>
</html>

Simpan kemudian jalankan.

clip_image002

Pada gambar di atas terlihat bahwa @DateTime.Now akan menampilkan waktu saat ini pada server. Selanjutnya kita sisipkan beberapa baris kode berikut :

@{ var nama = "Iqbal"; }
@{ var umur = 19; }
<p>Nama Saya: @nama </p>
<p>Umur Saya: @umur</p>

Maka akan tampil sebagi berikut :

clip_image004

Misal anda ingin membuat yang lebih kompleks dalam halaman yang anda buat, kita coba membuat halaman untuk menampilkan list tweet user tertentu.

Anda buat file baru dengan nama twit.cshtml, Kemudian replace dengan kode berikut :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Twitter Feed</title>
</head>
<body>
<h1>Twitter Feed</h1>
<form action="" method="POST">
<div>
Enter the name of another Twitter feed to display:
<input type="text" name="TwitterUser" value=""/>
<input type="submit" value="Submit" />
</div>
<div>
@if (Request["TwitterUser"].IsEmpty()) {
@Twitter.Search("mugi_org")
}
else {
@Twitter.Profile(Request["TwitterUser"])
}
</div>
</form>
</body>
</html>

Dari kode di atas terdapat baris kode Request["TwitterUser"].IsEmpty dan @Twitter.Search("mugi_org") yang akan menampikan jika form kosong akan menampilkan twit dari mugi_org.

clip_image006

Misal saya masukan user twitter ciebal, maka semua twit ciebal akan tampil.

clip_image008

Hot smile

Leave a Reply