Memperkenalkan Halaman Web ASP.NET - Dasar-Dasar Pemrograman

oleh Tom FitzMacken

Tutorial ini memberi Anda gambaran umum tentang cara memprogram di ASP.NET Web Pages dengan sintaks Razor.

Yang akan Anda pelajari:

Sintaks "Razor" dasar yang Anda gunakan untuk pemrograman di Halaman Web ASP.NET.

Beberapa C#dasar, yang merupakan bahasa pemrograman yang akan Anda gunakan.

Beberapa konsep pemrograman dasar untuk Halaman Web.

Cara menginstal paket (komponen yang berisi kode bawaan) untuk digunakan dengan situs Anda.

Cara menggunakan pembantu untuk melakukan tugas pemrograman umum.

Fitur/teknologi yang dibahas:

NuGet dan manajer paket.

Pembantu Gravatar .

Tutorial ini terutama merupakan latihan dalam memperkenalkan Anda ke sintaks pemrograman yang akan Anda gunakan untuk ASP.NET Halaman Web. Anda akan mempelajari tentang sintaksis dan kode Razor yang ditulis dalam bahasa pemrograman C#. Anda mendapat sekilas sintaks ini dalam tutorial sebelumnya; dalam tutorial ini kita akan menjelaskan sintaks lebih lanjut.

Kami berjanji bahwa tutorial ini melibatkan pemrograman terbanyak yang akan Anda lihat dalam satu tutorial, dan itu adalah satu-satunya tutorial yang hanya tentang pemrograman. Dalam tutorial yang tersisa dalam set ini, Anda benar-benar akan membuat halaman yang melakukan hal-hal menarik.

Anda juga akan mempelajari tentang pembantu. Pembantu adalah komponen — bagian kode yang dibungkus — yang dapat Anda tambahkan ke halaman. Pembantu melakukan pekerjaan untuk Anda yang mungkin melelahkan atau kompleks untuk dilakukan dengan tangan.

Membuat Halaman untuk Dimainkan dengan Razor

Di bagian ini Anda akan bermain sedikit dengan Razor sehingga Anda bisa merasakan sintaks dasar.

Mulai WebMatrix jika belum berjalan. Anda akan menggunakan situs web yang Anda buat di tutorial sebelumnya (Memulai Halaman Web). Untuk membukanya kembali, klik Situs Saya dan pilih WebPageMovies:

Cuplikan layar mulai Web Matrix memperlihatkan opsi Buka Situs dan Situs Saya disorot dengan persegi panjang merah.

Pilih ruang kerja File .

Di pita, klik Baru untuk membuat halaman. Pilih CSHTML dan beri nama halaman baru TestRazor.cshtml.

Klik OK.

Salin yang berikut ini ke dalam file, sepenuhnya menggantikan apa yang sudah ada di sana.

Catatan

Saat Anda menyalin kode atau markup dari contoh ke dalam halaman, indentasi dan perataan mungkin tidak sama seperti dalam tutorial. Namun, indentasi dan perataan tidak memengaruhi cara kode berjalan.

@{
   // Working with numbers
   var a = 4;
   var b = 5;
   var theSum = a + b;

   // Working with characters (strings)
   var technology = "ASP.NET";
   var product ="Web Pages";

   // Working with objects
   var rightNow = DateTime.Now;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax</title>
    <meta charset="utf-8" />
    <style>
    body {font-family:Verdana; margin-left:50px; margin-top:50px;}
    div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    span.bright {color:red;}
    </style>
  </head>
<body>
  <h1>Testing Razor Syntax</h1>
  <form method="post">

    <div>
      <p>The value of <em>a</em> is @a.  The value of <em>b</em> is @b.
      <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
      <p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
    </div>

    <div>
      <p>The technology is @technology, and the product is @product.</p>
      <p>Together they are <span class="bright">@(technology + " " + product)</span></p>
   </div>

   <div>
     <p>The current date and time is: @rightNow</p>
     <p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
   </div>

  </form>
</body>
</html>

Memeriksa Halaman Contoh

Sebagian besar yang Anda lihat adalah HTML biasa. Namun, di bagian atas ada blok kode ini:

@{
   // Working with numbers.
   var a = 4;
   var b = 5;
   var theSum = a + b;

   // Working with characters (strings).
   var technology = "ASP.NET";
   var product ="Web Pages";

   // Working with objects.
   var rightNow = DateTime.Now;
}

Perhatikan hal-hal berikut tentang blok kode ini:

Karakter @ memberi tahu ASP.NET bahwa yang berikut adalah kode Razor, bukan HTML. ASP.NET akan memperlakukan semuanya setelah karakter @ sebagai kode sampai mengalami beberapa HTML lagi. (Dalam hal ini, itu adalah <! Elemen DOCTYPE> .
Kurung kurawal ( { dan } ) mengapit blok kode Razor jika kode memiliki lebih dari satu baris. Kurung kurawal memberi tahu ASP.NET di mana kode untuk blok itu dimulai dan berakhir.
Karakter // menandai komentar — yaitu, bagian dari kode yang tidak akan dijalankan.
Setiap pernyataan harus diakhir dengan titik koma (;). (Tidak komentar, meskipun.)
Anda dapat menyimpan nilai dalam variabel, yang Anda buat (deklarasikan) dengan kata kunci var. Saat Anda membuat variabel, Anda memberinya nama, yang dapat menyertakan huruf, angka, dan garis bawah (_). Nama variabel tidak dapat dimulai dengan angka dan tidak dapat menggunakan nama kata kunci pemrograman (seperti var).
Anda mengapit string karakter (seperti "ASP.NET" dan "Halaman Web") dalam tanda kutip. (Mereka harus berupa tanda kutip ganda.) Angka tidak dalam tanda kutip.
Spasi kosong di luar tanda kutip tidak masalah. Pemisah garis sebagian besar tidak penting; pengecualiannya adalah Anda tidak dapat membagi string dalam tanda kutip di seluruh baris. Indentasi dan penyelarasan tidak penting.

Sesuatu yang tidak jelas dari contoh ini adalah bahwa semua kode peka huruf besar/kecil. Ini berarti bahwa variabel TheSum adalah variabel yang berbeda dari variabel yang mungkin diberi nama theSum atau thesum. Demikian pula, var adalah kata kunci, tetapi Var tidak.

Objek dan properti dan metode

Kemudian ada ekspresi DateTime.Now. Dalam istilah sederhana, DateTime adalah objek. Objek adalah hal yang dapat Anda programkan—halaman, kotak teks, file, gambar, permintaan web, pesan email, catatan pelanggan, dll. Objek memiliki satu atau beberapa properti yang menggambarkan karakteristiknya. Objek kotak teks memiliki properti Teks (antara lain), objek permintaan memiliki properti Url (dan lainnya), pesan email memiliki properti Dari dan properti Kepada, dan sebagainya. Objek juga memiliki metode yang merupakan "kata kerja" yang dapat mereka lakukan. Anda akan banyak bekerja dengan objek.

Seperti yang Anda lihat dari contoh, DateTime adalah objek yang memungkinkan Anda memprogram tanggal dan waktu. Ini memiliki properti bernama Now yang mengembalikan tanggal dan waktu saat ini.

Menggunakan kode untuk merender markup di halaman

Di isi halaman, perhatikan hal berikut:

<div>
  <p>The value of <em>a</em> is @a.  The value of <em>b</em> is @b.
  <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
  <p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>

<div>
  <p>The technology is @technology, and the product is @product.</p>
  <p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>

<div>
  <p>The current date and time is: @rightNow</p>
     <p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>

Sekali lagi, karakter @ memberi tahu ASP.NET bahwa yang berikut adalah kode, bukan HTML. Dalam markup, Anda dapat menambahkan @ diikuti dengan ekspresi kode, dan ASP.NET akan merender nilai ekspresi tersebut tepat pada saat itu. Dalam contoh, @a akan merender apa pun nilai variabel bernama, @product merender apa pun yang ada dalam variabel bernama produk, dan sebagainya.

Namun, Anda tidak terbatas pada variabel. Dalam beberapa instans di sini, karakter @ mendahului ekspresi:

@(a*b) merender produk apa pun yang ada dalam variabel a dan b. (Operator * berarti perkalian.)
@(technology + " " + product) merender nilai dalam teknologi variabel dan produk setelah menggabungkannya dan menambahkan spasi di antaranya. Operator (+) untuk menggabungkan string sama dengan operator untuk menambahkan angka. ASP.NET biasanya dapat mengetahui apakah Anda bekerja dengan angka atau dengan string dan melakukan hal yang benar dengan operator + .
@Request.Url merender properti Url objek Permintaan. Objek Permintaan berisi informasi tentang permintaan saat ini dari browser, dan tentu saja properti Url berisi URL permintaan saat ini.

Contohnya juga dirancang untuk menunjukkan kepada Anda bahwa Anda dapat melakukan pekerjaan dengan cara yang berbeda. Anda dapat melakukan perhitungan di blok kode di bagian atas, memasukkan hasilnya ke dalam variabel, lalu merender variabel dalam markup. Atau Anda dapat melakukan penghitungan dalam ekspresi tepat di markup. Pendekatan yang Anda gunakan tergantung pada apa yang Anda lakukan dan, sampai batas tertentu, pada preferensi Anda sendiri.

Melihat kode dalam tindakan

Klik kanan nama file lalu pilih Luncurkan di browser. Anda melihat halaman di browser dengan semua nilai dan ekspresi diselesaikan di halaman.

Cuplikan layar halaman Uji Razor yang berjalan di jendela browser, memperlihatkan tiga kotak dengan nilai dan ekspresi diselesaikan.

Lihat sumber di browser.

Cuplikan layar sumber halaman Uji Razor, membandingkan sumber halaman dengan output browser web yang dirender.

Seperti yang Anda harapkan dari pengalaman Anda di tutorial sebelumnya, tidak ada kode Razor di halaman. Yang Anda lihat adalah nilai tampilan aktual. Saat menjalankan halaman, Anda benar-benar membuat permintaan ke server web yang disertakan dalam WebMatrix. Saat permintaan diterima, ASP.NET menyelesaikan semua nilai dan ekspresi dan merender nilainya ke dalam halaman. Kemudian mengirimkan halaman ke browser.

Tip

Razor dan C#

Sampai sekarang kami telah mengatakan bahwa Anda bekerja dengan sintaks Razor. Itu benar, tapi itu bukan cerita lengkapnya. Bahasa pemrograman aktual yang Anda gunakan disebut C#. C# dibuat oleh Microsoft lebih dari satu dekade yang lalu dan telah menjadi salah satu bahasa pemrograman utama untuk membuat aplikasi Windows. Semua aturan yang telah Anda lihat tentang cara memberi nama variabel dan cara membuat pernyataan dan sebagainya sebenarnya adalah semua aturan bahasa C#.

Razor merujuk lebih khusus ke serangkaian kecil konvensi tentang bagaimana Anda menyematkan kode ini ke dalam halaman. Misalnya, konvensi penggunaan @ untuk menandai kode di halaman dan menggunakan @{ } untuk menyematkan blok kode adalah aspek Razor dari halaman. Pembantu juga dianggap sebagai bagian dari Razor. Sintaks razor digunakan di lebih banyak tempat daripada hanya di Halaman Web ASP.NET. (Misalnya, ini juga digunakan dalam tampilan MVC ASP.NET.)

Kami menyebutkan ini karena jika Anda mencari informasi tentang pemrograman ASP.NET Halaman Web, Anda akan menemukan banyak referensi ke Razor. Namun, banyak referensi tersebut tidak berlaku untuk apa yang Anda lakukan dan karenanya mungkin membingungkan. Dan pada kenyataannya, banyak pertanyaan pemrograman Anda benar-benar akan tentang bekerja dengan C# atau bekerja dengan ASP.NET. Jadi jika Anda mencari informasi khusus tentang Razor, Anda mungkin tidak menemukan jawaban yang Anda butuhkan.

Menambahkan Beberapa Logika Bersyarah

Salah satu fitur hebat tentang menggunakan kode di halaman adalah Anda dapat mengubah apa yang terjadi berdasarkan berbagai kondisi. Di bagian tutorial ini, Anda akan bermain-main dengan beberapa cara untuk mengubah apa yang ditampilkan di halaman.

Contohnya akan sederhana dan agak digabungkan sehingga kita dapat berkonsentrasi pada logika bersyarat. Halaman yang akan Anda buat akan melakukan ini:

Tampilkan teks yang berbeda di halaman tergantung pada apakah itu pertama kalinya halaman ditampilkan atau apakah Anda telah mengklik tombol untuk mengirimkan halaman. Itu akan menjadi tes bersyarat pertama.
Tampilkan pesan hanya jika nilai tertentu diteruskan dalam string kueri URL (http://...? show=true). Itu akan menjadi tes bersyarat kedua.

Di WebMatrix, buat halaman dan beri nama TestRazorPart2.cshtml. (Di pita, klik Baru, pilih CSHTML, beri nama file, lalu klik OK.)

Ganti konten halaman tersebut dengan yang berikut ini:

@{
   var message = "This is the first time you've requested the page.";
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax - Part 2</title>
    <meta charset="utf-8" />
    <style>
      body {font-family:Verdana; margin-left:50px; margin-top:50px;}
      div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    </style>
  </head>
  <body>
  <h1>Testing Razor Syntax - Part 2</h1>
  <form method="post">
    <div>
      <p>@message</p>
      <p><input type="submit" value="Submit" /></p>
  </div>
  </form>
</body>
</html>

Blok kode di bagian atas menginisialisasi variabel bernama pesan dengan beberapa teks. Di isi halaman, konten variabel pesan ditampilkan di dalam <elemen p> . Markup juga berisi <elemen input> untuk membuat tombol Kirim .

Jalankan halaman untuk melihat cara kerjanya sekarang. Untuk saat ini, ini pada dasarnya adalah halaman statis, bahkan jika Anda mengklik tombol Kirim .

Kembali ke WebMatrix. Di dalam blok kode, tambahkan kode yang disorot berikut setelah baris yang menginisialisasi pesan:

@{
    var message = "This is the first time you've requested the page.";

    if(IsPost) {
        message = "Now you've submitted the page.";
    }
}

Blok if { }

Apa yang baru saja Anda tambahkan adalah kondisi jika. Dalam kode, kondisi if memiliki struktur seperti ini:

if(some condition){
    One or more statements here that run if the condition is true;
}

Kondisi untuk menguji berada dalam tanda kurung. Ini harus berupa nilai atau ekspresi yang mengembalikan true atau false. Jika kondisinya benar, ASP.NET menjalankan pernyataan atau pernyataan yang ada di dalam kurung kurawal. (Itu adalah bagian dari logika if-then.) Jika kondisi salah, blok kode dilewati.

Berikut adalah beberapa contoh kondisi yang dapat Anda uji dalam pernyataan jika:

if(currentValue > 12) { ... }

if(dueDate <= DateTime.Today) { ... }

if(IsDone == true) { ... }

if(IsPost) { ... }

if(!IsPost) { ... }

if(a != 0) { ... }

if(fileProcessingIsDone != true && displayMessage == false) { ... }

Anda dapat menguji variabel terhadap nilai atau terhadap ekspresi dengan menggunakan operator logis atau operator perbandingan: sama dengan (==), lebih besar dari (>), kurang dari (<), lebih besar dari atau sama dengan (>=), dan kurang dari atau sama dengan (<=). Operator != berarti tidak sama dengan — misalnya, if(a != 0) berarti jika tidak sama dengan 0.

Catatan

Pastikan Anda melihat bahwa operator perbandingan untuk sama dengan (==) tidak sama dengan =. Operator = hanya digunakan untuk menetapkan nilai (var a=2). Jika Anda mencampur operator ini, Anda akan mendapatkan kesalahan atau Anda akan mendapatkan beberapa hasil yang aneh.

Untuk menguji apakah ada sesuatu yang benar, sintaks lengkapnya adalah if(IsDone == true). Tetapi Anda juga dapat menggunakan pintasan jika (IsDone). Jika tidak ada operator perbandingan, ASP.NET mengasumsikan bahwa Anda menguji benar.

! operator dengan sendirinya berarti NOT logis. Misalnya, kondisi if(! IsPost) berarti jika IsPost tidak benar.

Anda dapat menggabungkan kondisi dengan menggunakan operator LOGIS DAN (&& ) atau LOGIS OR (|| ). Misalnya, kondisi terakhir jika dalam contoh sebelumnya berarti jika FileProcessingIsDone tidak diatur ke true AND displayMessage diatur ke false.

Blok lain

Satu hal terakhir tentang jika blok: blok jika dapat diikuti oleh blok lain. Blok lain berguna adalah Anda harus menjalankan kode yang berbeda ketika kondisi salah. Berikut contoh sederhananya:

var message = "";
if(errorOccurred == true)
{
    message = "Sorry, an error occurred."; 
}
else
{
    message = "The process finished without errors!";
}

Anda akan melihat beberapa contoh dalam tutorial selanjutnya dalam seri ini di mana menggunakan blok lain berguna.

Menguji apakah permintaan adalah kiriman (posting)

Ada lebih banyak, tetapi mari kita kembali ke contoh, yang memiliki kondisi jika (IsPost){ ... }. IsPost sebenarnya adalah properti dari halaman saat ini. Pertama kali halaman diminta, IsPost mengembalikan false. Namun, jika Anda mengklik tombol atau mengirimkan halaman — yaitu, Anda mempostingnya — IsPost mengembalikan true. Jadi IsPost memungkinkan Anda menentukan apakah Anda berurusan dengan pengiriman formulir. (Dalam hal kata kerja HTTP, jika permintaan adalah operasi GET, IsPost mengembalikan false. Jika permintaan adalah operasi POST, IsPost mengembalikan true.) Dalam tutorial selanjutnya, Anda akan bekerja dengan formulir input, di mana pengujian ini menjadi sangat berguna.

Jalankan halaman. Karena ini adalah pertama kalinya Anda meminta halaman, Anda akan melihat "Ini adalah pertama kalinya Anda meminta halaman". String tersebut adalah nilai tempat Anda menginisialisasi variabel pesan. Ada pengujian if(IsPost), tetapi yang mengembalikan false saat ini, sehingga kode di dalam blok if tidak berjalan.

Klik tombol Kirim . Halaman diminta lagi. Seperti sebelumnya, variabel pesan diatur ke "Ini adalah pertama kalinya ...". Tetapi kali ini, pengujian if(IsPost) mengembalikan true, sehingga kode di dalam blok if berjalan. Kode mengubah nilai variabel pesan menjadi nilai yang berbeda, yang merupakan apa yang dirender dalam markup.

Sekarang tambahkan kondisi if di markup. <Di bawah elemen p> yang berisi tombol Kirim, tambahkan markup berikut:

@if(IsPost){
  <p>You submitted the page at @DateTime.Now</p>
}

Anda menambahkan kode di dalam markup, jadi Anda harus mulai dengan @. Kemudian ada pengujian jika mirip dengan yang Anda tambahkan sebelumnya di blok kode. Namun, di dalam kurung kurawal, Anda menambahkan HTML biasa - setidaknya, itu biasa sampai ke @DateTime.Now. Ini adalah sedikit kode Razor lainnya, jadi sekali lagi Anda harus menambahkan @ di depannya.

Intinya di sini adalah Anda dapat menambahkan jika kondisi di blok kode di bagian atas dan di markup. Jika Anda menggunakan kondisi if di isi halaman, baris di dalam blok dapat berupa markup atau kode. Dalam hal ini, dan apa adanya kapan saja Anda mencampur markup dan kode, Anda harus menggunakan @ untuk memperjelas ASP.NET di mana kode berada.

Jalankan halaman dan klik Kirim. Kali ini Anda tidak hanya melihat pesan yang berbeda ketika Anda mengirimkan ("Sekarang Anda telah mengirimkan ..."), tetapi Anda melihat pesan baru yang mencantumkan tanggal dan waktu.

Cuplikan layar halaman Uji Razor 2 yang berjalan di browser web dengan pesan tanda waktu yang ditampilkan setelah pengiriman halaman.

Menguji nilai string kueri

Satu tes lagi. Kali ini, Anda akan menambahkan blok if yang menguji nilai bernama show yang mungkin diteruskan dalam string kueri. (Seperti ini: http://localhost:43097/TestRazorPart2.cshtml?show=true) Anda akan mengubah halaman sehingga pesan yang telah Anda tampilkan ("Ini adalah pertama kalinya ...", dll.) hanya ditampilkan jika nilai acara benar.

Di bagian bawah (tetapi di dalam) blok kode di bagian atas halaman, tambahkan yang berikut ini:

var showMessage = false;
if(Request.QueryString["show"].AsBool() == true) {
    showMessage = true;
}

Blok kode lengkap sekarang terlihat seperti contoh berikut. (Ingat bahwa saat Anda menyalin kode ke halaman Anda, indentasi mungkin terlihat berbeda. Tetapi itu tidak memengaruhi cara kode berjalan.)

@{
   var message = "This is the first time you've requested the page.";

   if(IsPost) {
      message = "Now you've submitted the page.";
   }

   var showMessage = false;
   if(Request.QueryString["show"].AsBool() == true) {
     showMessage = true;
   }
}

Kode baru di blok menginisialisasi variabel bernama showMessage ke false. Kemudian melakukan pengujian jika untuk mencari nilai dalam string kueri. Ketika Anda pertama kali meminta halaman, halaman tersebut memiliki URL seperti ini:

http://localhost:43097/TestRazorPart2.cshtml

Kode menentukan apakah URL berisi variabel bernama show dalam string kueri, seperti versi URL ini:

http://localhost:43097/TestRazorPart2.cshtml?show=true

Pengujian itu sendiri melihat properti QueryString dari objek Permintaan. Jika string kueri berisi item bernama show, dan jika item tersebut diatur ke true, blok if menjalankan dan mengatur variabel showMessage ke true.

Ada trik di sini, seperti yang anda lihat. Seperti namanya, string kueri adalah string. Namun, Anda hanya dapat menguji true dan false jika nilai yang Anda uji adalah nilai Boolean (true/false). Sebelum Anda bisa menguji nilai variabel peragaan dalam string kueri, Anda harus mengonversinya menjadi nilai Boolean. Itulah yang dilakukan metode AsBool - dibutuhkan string sebagai input dan mengonversinya menjadi nilai Boolean. Dengan jelas, jika string adalah "true", metode AsBool mengonversi nilai tersebut menjadi true. Jika nilai string adalah yang lain, AsBool mengembalikan false.

Tip

Jenis Data dan Metode As()

Sejauh ini kami hanya mengatakan bahwa ketika Anda membuat variabel, Anda menggunakan kata kunci var. Itu bukan seluruh cerita, meskipun. Untuk memanipulasi nilai — untuk menambahkan angka, atau menggabungkan string, atau membandingkan tanggal, atau menguji true/false — C# harus bekerja dengan representasi internal nilai yang sesuai. C# biasanya dapat mencari tahu apa representasi itu (yaitu, jenis data apa) berdasarkan apa yang Anda lakukan dengan nilai. Sekarang dan kemudian, meskipun, itu tidak bisa melakukan itu. Jika tidak, Anda harus membantu dengan secara eksplisit menunjukkan bagaimana C# harus mewakili data. Metode AsBool melakukan itu — memberi tahu C# bahwa nilai string "true" atau "false" harus diperlakukan sebagai nilai Boolean. Metode serupa ada untuk mewakili string seperti jenis lain juga, seperti AsInt (diperlakukan sebagai bilangan bulat), AsDateTime (diperlakukan sebagai tanggal/waktu), AsFloat (diperlakukan sebagai angka floating-point), dan sebagainya. Saat Anda menggunakan metode As( ) ini, jika C# tidak dapat mewakili nilai string seperti yang diminta, Anda akan melihat kesalahan.

Di markup halaman, hapus atau komentari elemen ini (di sini diperlihatkan dikomentari):

<!-- <p>@message</p> -->

Tepat di mana Anda menghapus atau mengomentari teks tersebut, tambahkan yang berikut ini:

@if(showMessage) {
  <p>@message</p>
}

Jika pengujian mengatakan bahwa jika variabel showMessage benar, render <elemen p> dengan nilai variabel pesan.

Ringkasan logika bersyar anda

Jika Anda tidak sepenuhnya yakin dengan apa yang baru saja Anda lakukan, berikut adalah ringkasannya.

Variabel pesan diinisialisasi ke string default ("Ini adalah pertama kalinya ...").
Jika permintaan halaman adalah hasil kirim (posting), nilai pesan diubah menjadi "Sekarang Anda telah mengirimkan ..."
Variabel showMessage diinisialisasi ke false.
Jika string kueri berisi ?show=true, variabel showMessage diatur ke true.
Dalam markup, jika showMessage benar, <elemen p> dirender yang menunjukkan nilai pesan. (Jika showMessage salah, tidak ada yang dirender pada saat itu dalam markup.)
Dalam markup, jika permintaan adalah postingan, <elemen p> dirender yang menampilkan tanggal dan waktu.

Jalankan halaman. Tidak ada pesan, karena showMessage salah, jadi dalam markup, pengujian if(showMessage) mengembalikan false.

Klik Kirim. Anda melihat tanggal dan waktu, tetapi masih tidak ada pesan.

Di browser Anda, buka kotak URL dan tambahkan yang berikut ini ke akhir URL: ?show=true lalu tekan Enter.

Cuplikan layar halaman Uji Razor 2 di browser web memperlihatkan string kueri di kotak U R L.

Halaman ditampilkan lagi. (Karena Anda mengubah URL, ini adalah permintaan baru, bukan kirim.) Klik Kirim lagi. Pesan ditampilkan lagi, seperti tanggal dan waktunya.

Cuplikan layar halaman Uji Razor 2 di browser web setelah pengiriman halaman dengan string kueri di kotak U R L.

Di URL, ubah ?show=true ke ?show=false dan tekan Enter. Kirim halaman lagi. Halaman kembali ke cara Anda memulai — tidak ada pesan.

Seperti disebutkan sebelumnya, logika contoh ini sedikit digabungkan. Namun, jika akan muncul di banyak halaman Anda, dan akan mengambil satu atau beberapa formulir yang telah Anda lihat di sini.

Menginstal Helper (Menampilkan Gambar Gravatar)

Beberapa tugas yang sering ingin dilakukan orang di halaman web memerlukan banyak kode atau memerlukan pengetahuan tambahan. Contoh: menampilkan bagan untuk data; menempatkan tombol "Suka" Facebook di halaman; mengirim email dari situs web Anda; memangkas atau mengubah ukuran gambar; menggunakan PayPal untuk situs Anda. Untuk memudahkan melakukan hal-hal semacam ini, ASP.NET Web Pages memungkinkan Anda menggunakan pembantu. Pembantu adalah komponen yang Anda instal untuk situs dan memungkinkan Anda melakukan tugas umum hanya dengan menggunakan beberapa baris kode Razor.

ASP.NET Halaman Web memiliki beberapa pembantu bawaan. Namun, banyak pembantu tersedia dalam paket (add-in) yang disediakan menggunakan manajer paket NuGet. NuGet memungkinkan Anda memilih paket untuk diinstal dan kemudian mengurus semua detail penginstalan.

Di bagian tutorial ini, Anda akan menginstal pembantu yang memungkinkan Anda menampilkan gambar Gravatar ("avatar yang dikenali secara global"). Anda akan belajar dua hal. Salah satunya adalah cara menemukan dan menginstal pembantu. Anda juga akan mempelajari bagaimana pembantu memudahkan untuk melakukan sesuatu yang perlu Anda lakukan dengan menggunakan banyak kode yang harus Anda tulis sendiri.

Anda dapat mendaftarkan Gravatar Anda sendiri di situs web Gravatar di http://www.gravatar.com/, tetapi tidak penting untuk membuat akun Gravatar untuk melakukan bagian tutorial ini.

Di WebMatrix, klik tombol NuGet .

Cuplikan layar antarmuka pengguna Web Matrix memperlihatkan tombol Nu Get disorot dengan persegi panjang merah.

Ini meluncurkan manajer paket NuGet dan menampilkan paket yang tersedia. (Tidak semua paket adalah pembantu; beberapa menambahkan fungsionalitas ke WebMatrix itu sendiri, beberapa adalah templat tambahan, dan sebagainya.) Anda mungkin mendapatkan pesan kesalahan tentang ketidaksesuaian versi. Anda dapat mengabaikan pesan kesalahan ini dengan mengklik OK dan melanjutkan tutorial ini.

Cuplikan layar kotak dialog Galeri Get Nu di Web Matrix memperlihatkan daftar paket yang tersedia untuk diinstal.

Dalam kotak pencarian, masukkan "asp.net pembantu". NuGet menunjukkan paket yang cocok dengan istilah pencarian.

Cuplikan layar kotak dialog Galeri Get Nu di Web Matrix memperlihatkan item Pustaka Pembantu Web A S P dot N E T disorot dengan persegi panjang merah.

Pustaka ASP.NET Web Helpers berisi kode untuk menyederhanakan banyak tugas umum, termasuk penggunaan gambar Gravatar. Pilih paket Pustaka ASP.NET Web Helpers lalu klik Instal untuk meluncurkan alat penginstal. Pilih Ya saat ditanya apakah Anda ingin menginstal paket, dan menerima persyaratan untuk menyelesaikan penginstalan.

Itu saja. NuGet mengunduh dan menginstal semuanya, termasuk komponen tambahan apa pun yang mungkin diperlukan (dependensi).

Jika karena alasan tertentu Anda harus menghapus instalasi pembantu, prosesnya sangat mirip. Klik tombol NuGet , klik tab Terinstal , dan pilih paket yang ingin Anda hapus instalasinya.

Menggunakan Pembantu di Halaman

Sekarang Anda akan menggunakan pembantu yang baru saja Anda instal. Proses untuk menambahkan pembantu ke halaman mirip untuk sebagian besar pembantu.

Di WebMatrix, buat halaman dan beri nama GravatarTest.cshml. (Anda membuat halaman khusus untuk menguji pembantu, tetapi Anda dapat menggunakan pembantu di halaman mana pun di situs Anda.)

Di dalam elemen isi<>, tambahkan <elemen div>. <Di dalam elemen div>, ketik ini:

@Gravatar.

Karakter @ adalah karakter yang sama dengan yang anda gunakan untuk menandai kode Razor. Gravatar adalah objek pembantu yang sedang Anda kerjakan.

Segera setelah Anda mengetik periode (.), WebMatrix menampilkan daftar metode (fungsi) yang disediakan oleh pembantu Gravatar:

Cuplikan layar editor sumber memperlihatkan daftar drop-down IntelliSense pembantu Gravatar dengan item Dapatkan H T M L disorot dengan warna kuning.

Fitur ini dikenal sebagai IntelliSense. Ini membantu Anda membuat kode dengan memberikan pilihan yang sesuai konteks. IntelliSense bekerja dengan HTML, CSS, kode ASP.NET, JavaScript, dan bahasa lain yang didukung di WebMatrix. Ini adalah fitur lain yang memudahkan pengembangan halaman web di WebMatrix.

Tekan G pada keyboard, dan Anda melihat bahwa IntelliSense menemukan metode GetHtml. Tekan Tab. IntelliSense menyisipkan metode yang dipilih (GetHtml) untuk Anda. Ketik tanda kurung terbuka, dan perhatikan bahwa tanda kurung penutup ditambahkan secara otomatis. Ketik alamat email Anda dalam tanda kutip di antara dua tanda kurung. Jika Anda memiliki akun Gravatar, gambar profil Anda akan dikembalikan. Jika Anda tidak memiliki akun Gravatar, gambar default akan dikembalikan. Setelah selesai, garis terlihat seperti ini:

@Gravatar.GetHtml("john@contoso.com")

Sekarang lihat halaman di browser. Gambar Anda atau gambar default ditampilkan, tergantung pada apakah Anda memiliki akun Gravatar.

Cuplikan layar jendela browser web memperlihatkan gambar Gravatar yang dipilih pengguna dari seorang pria dengan kacamata.

Untuk mendapatkan gambaran tentang apa yang dilakukan pembantu untuk Anda, lihat sumber halaman di browser. Bersama dengan HTML yang Anda miliki di halaman Anda, Anda akan melihat elemen gambar yang menyertakan pengidentifikasi. Ini adalah kode yang dirender pembantu ke halaman di tempat Anda memiliki @Gravatar.GetHtml. Pembantu mengambil informasi yang Anda berikan dan menghasilkan kode yang berbicara langsung ke Gravatar untuk mendapatkan kembali gambar yang benar untuk akun yang disediakan.

Metode GetHtml juga memungkinkan Anda menyesuaikan gambar dengan menyediakan parameter lain. Kode berikut menunjukkan cara meminta gambar memiliki lebar dan tinggi 40 piksel, dan menggunakan gambar default tertentu bernama wavatar jika akun yang ditentukan tidak ada.

@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")

Kode ini menghasilkan sesuatu seperti hasil berikut (gambar default akan bervariasi secara acak).

Cuplikan layar halaman browser web memperlihatkan gambar default baru yang ditentukan dengan parameter yang ditetapkan dalam metode Dapatkan H T M L.

Berikutnya

Agar tutorial ini tetap singkat, kami harus fokus hanya pada beberapa dasar. Tentu saja, ada lebih banyak lagi untuk Razor dan C#. Anda akan mempelajari lebih lanjut saat Anda melalui tutorial ini. Jika Anda tertarik untuk mempelajari lebih lanjut tentang aspek pemrograman Razor dan C# saat ini, Anda dapat membaca pengenalan yang lebih menyeluruh di sini: Pengantar ASP.NET Pemrograman Web Menggunakan Sintaks Razor.

Tutorial berikutnya memperkenalkan Anda untuk bekerja dengan database. Dalam tutorial itu, Anda akan mulai membuat aplikasi sampel yang memungkinkan Anda mencantumkan film favorit Anda.

Daftar Lengkap untuk Halaman TestRazor

@{
   // Working with numbers
   var a = 4;
   var b = 5;
   var theSum = a + b;

   // Working with characters (strings)
   var technology = "ASP.NET";
   var product ="Web Pages";

   // Working with objects
   var rightNow = DateTime.Now;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax</title>
    <meta charset="utf-8" />
    <style>
    body {font-family:Verdana; margin-left:50px; margin-top:50px;}
    div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    span.bright {color:red;}
    </style>
  </head>
<body>
  <h1>Testing Razor Syntax</h1>
  <form method="post">

    <div>
      <p>The value of <em>a</em> is @a.  The value of <em>b</em> is @b.
      <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
      <p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
    </div>

    <div>
      <p>The technology is @technology, and the product is @product.</p>
      <p>Together they are <span class="bright">@(technology + " " + product)</span></p>
   </div>

   <div>
     <p>The current date and time is: @rightNow</p>
     <p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
   </div>

  </form>
</body>
</html>

Daftar Lengkap untuk Halaman TestRazorPart2

@{
   var message = "This is the first time you've requested the page.";

   if (IsPost) {
      message = "Now you've submitted the page.";
   }

   var showMessage = false;
   if (Request.QueryString["show"].AsBool() == true) {
     showMessage = true;
   }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax - Part 2</title>
    <meta charset="utf-8" />
    <style>
      body {font-family:Verdana; margin-left:50px; margin-top:50px;}
      div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    </style>
  </head>
  <body>
  <h1>Testing Razor Syntax - Part 2</h1>
  <form method="post">
    <div>
      <!--<p>@message</p>-->
      @if(showMessage){
        <p>@message</p>
      }
      <p><input type="submit" value="Submit" /></p>
      @if (IsPost) {
        <p>You submitted the page at @DateTime.Now</p>
      }
    </div>
  </form>
</body>
</html>

Daftar Lengkap untuk Halaman GravatarTest

@{
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div>
          @Gravatar.GetHtml("john@contoso.com")
          @Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
        </div>
    </body>
</html>

Sumber Tambahan

Sebelumnya Berikutnya

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2023-07-13