Bagikan melalui

Bekerja dengan Formulir HTML di Situs Halaman Web (Razor) ASP.NET

oleh Tom FitzMacken

Artikel ini menjelaskan cara memproses formulir HTML (dengan kotak teks dan tombol) saat Anda bekerja di situs web ASP.NET Web Pages (Razor).

Yang akan Anda pelajari:

  • Cara membuat formulir HTML.
  • Cara membaca input pengguna dari formulir.
  • Cara memvalidasi input pengguna.
  • Cara memulihkan nilai formulir setelah halaman dikirimkan.

Ini adalah konsep pemrograman ASP.NET yang diperkenalkan dalam artikel:

  • Objek Request.
  • Validasi input.
  • Pengodean HTML.

Versi perangkat lunak yang digunakan dalam tutorial

  • ASP.NET Web Pages (Razor) 3

Tutorial ini juga berfungsi dengan ASP.NET Web Pages 2.

Membuat Formulir HTML Sederhana

  1. Buat situs web baru.

  2. Di folder akar, buat halaman web bernama Form.cshtml dan masukkan markup berikut:

    <!DOCTYPE html>
<html>
    <head>
        <title>Customer Form</title>
    </head>
    <body>
      <form method="post" >
        <fieldset>
          <legend>Add Customer</legend>
          <div>
            <label for="CompanyName">Company Name:</label>
            <input type="text" name="CompanyName" value="" />
          </div>
          <div>
            <label for="ContactName">Contact Name:</label>
            <input type="text" name="ContactName" value="" />
          </div>
          <div>
            <label for="Employees">Employee Count:</label>
            <input type="text" name="Employees" value="" />
          </div>
          <div>
            <label>&nbsp;</label>
            <input type="submit" value="Submit" class="submit" />
          </div>
        </fieldset>
      </form>
    </body>
</html>

  3. Luncurkan halaman di browser Anda. (Di WebMatrix, di ruang kerja File , klik kanan file lalu pilih Luncurkan di browser.) Formulir sederhana dengan tiga bidang input dan tombol Kirim ditampilkan.

    Cuplikan layar formulir dengan tiga kotak teks.

    Pada titik ini, jika Anda mengklik tombol Kirim , tidak ada yang terjadi. Untuk membuat formulir berguna, Anda harus menambahkan beberapa kode yang akan berjalan di server.

Membaca Input Pengguna dari Formulir

Untuk memproses formulir, Anda menambahkan kode yang membaca nilai bidang yang dikirimkan dan melakukan sesuatu dengannya. Prosedur ini memperlihatkan kepada Anda cara membaca bidang dan menampilkan input pengguna di halaman. (Dalam aplikasi produksi, Anda umumnya melakukan hal-hal yang lebih menarik dengan input pengguna. Anda akan melakukannya dalam artikel tentang bekerja dengan database.)

  1. Di bagian atas file Form.cshtml , masukkan kode berikut:

    @{
    if (IsPost) {
        string companyname = Request.Form["companyname"];
        string contactname = Request.Form["contactname"];
        int employeecount = Request.Form["employees"].AsInt();

        <text>
          You entered: <br />
          Company Name: @companyname <br />
          Contact Name: @contactname <br />
          Employee Count: @employeecount <br />
        </text>
    }
}

    Saat pengguna pertama kali meminta halaman, hanya formulir kosong yang ditampilkan. Pengguna (yang akan Anda) isi formulir lalu klik Kirim. Ini mengirimkan (posting) input pengguna ke server. Secara default, permintaan masuk ke halaman yang sama (yaitu, Form.cshtml).

    Saat Anda mengirimkan halaman kali ini, nilai yang Anda masukkan ditampilkan tepat di atas formulir:

    Cuplikan layar yang memperlihatkan nilai yang telah Anda masukkan ditampilkan di halaman.

    Lihat kode untuk halaman. Anda terlebih dahulu IsPost menggunakan metode untuk menentukan apakah halaman sedang diposting — yaitu, apakah pengguna mengklik tombol Kirim . Jika ini adalah postingan, IsPost mengembalikan true. Ini adalah cara standar dalam ASP.NET Web Pages untuk menentukan apakah Anda bekerja dengan permintaan awal (permintaan GET) atau postback (permintaan POST). (Untuk informasi selengkapnya tentang GET dan POST, lihat bilah samping "HTTP GET dan POST dan Properti IsPost" di Pengantar Pemrograman Halaman Web ASP.NET Menggunakan Sintaks Razor.)

    Selanjutnya, Anda mendapatkan nilai yang diisi pengguna dari Request.Form objek , dan Anda memasukkannya ke dalam variabel untuk nanti. Objek Request.Form berisi semua nilai yang dikirimkan dengan halaman, masing-masing diidentifikasi oleh kunci. Kuncinya setara dengan name atribut bidang formulir yang ingin Anda baca. Misalnya, untuk membaca companyname bidang (kotak teks), Anda menggunakan Request.Form["companyname"].

    Nilai formulir disimpan dalam Request.Form objek sebagai string. Oleh karena itu, ketika Anda harus bekerja dengan nilai sebagai angka atau tanggal atau beberapa jenis lainnya, Anda harus mengonversinya dari string ke jenis tersebut. Dalam contoh, AsInt metode digunakan Request.Form untuk mengonversi nilai bidang karyawan (yang berisi jumlah karyawan) menjadi bilangan bulat.

  2. Luncurkan halaman di browser Anda, isi bidang formulir, dan klik Kirim. Halaman menampilkan nilai yang Anda masukkan.

Tip

Pengodean HTML untuk Tampilan dan Keamanan

HTML memiliki kegunaan khusus untuk karakter seperti <, , >dan &. Jika karakter khusus ini muncul di mana mereka tidak diharapkan, mereka dapat merusak tampilan dan fungsionalitas halaman web Anda. Misalnya, browser menginterpretasikan < karakter (kecuali diikuti oleh spasi) sebagai awal elemen HTML, seperti <b> atau <input ...>. Jika browser tidak mengenali elemen , browser hanya membuang string yang dimulai dengan < sampai mencapai sesuatu yang kembali dikenalinya. Jelas, ini dapat mengakibatkan beberapa penyajian aneh di halaman.

Pengodean HTML menggantikan karakter khusus ini dengan kode yang ditafsirkan browser sebagai simbol yang benar. Misalnya, < karakter diganti dengan &lt; dan > karakter diganti dengan &gt;. Browser merender string pengganti ini sebagai karakter yang ingin Anda lihat.

Ada baiknya menggunakan pengodean HTML kapan saja Anda menampilkan string (input) yang Anda dapatkan dari pengguna. Jika tidak, pengguna dapat mencoba mendapatkan halaman web Anda untuk menjalankan skrip berbahaya atau melakukan sesuatu yang lain yang menyusui keamanan situs Anda atau itu bukan apa yang Anda inginkan. (Ini sangat penting jika Anda mengambil input pengguna, menyimpannya di suatu tempat, dan kemudian menampilkannya nanti - misalnya, sebagai komentar blog, ulasan pengguna, atau sesuatu seperti itu.)

Untuk membantu mencegah masalah ini, ASP.NET Halaman Web secara otomatis mengodekan konten teks apa pun yang Anda keluarkan dari kode Anda. Misalnya, saat Anda menampilkan konten variabel atau ekspresi menggunakan kode seperti @MyVar, ASP.NET Halaman Web secara otomatis mengodekan output.

Memvalidasi Input Pengguna

Pengguna membuat kesalahan. Anda meminta mereka untuk mengisi bidang, dan mereka lupa, atau Anda meminta mereka untuk memasukkan jumlah karyawan dan mereka mengetikkan nama sebagai gantinya. Untuk memastikan bahwa formulir telah diisi dengan benar sebelum Anda memprosesnya, Anda memvalidasi input pengguna.

Prosedur ini memperlihatkan cara memvalidasi ketiga bidang formulir untuk memastikan pengguna tidak membiarkannya kosong. Anda juga memeriksa bahwa nilai jumlah karyawan adalah angka. Jika ada kesalahan, Anda akan menampilkan pesan kesalahan yang memberi tahu pengguna nilai apa yang tidak lulus validasi.

  1. Dalam file Form.cshtml , ganti blok kode pertama dengan kode berikut:

    @{
    Validation.RequireField("companyname", "Company name is required.");
    Validation.RequireField("contactname", "Contact name is required.");
    Validation.RequireField("employees", "Employee count is required.");
    Validation.Add("employees", Validator.Integer());

    if (IsPost)  {
        var companyname = Request.Form["companyname"];
        var contactname = Request.Form["contactname"];
        var employeecount = Request.Form["employees"];
        if(Validation.IsValid()){
            <text>
              You entered: <br />
              Company Name: @companyname <br />
              Contact Name: @contactname <br />
              Employee Count: @employeecount <br />
            </text>
        }
    }
}

    Untuk memvalidasi input pengguna, Anda menggunakan pembantu Validation . Anda mendaftarkan bidang yang diperlukan dengan memanggil Validation.RequireField. Anda mendaftarkan jenis validasi lain dengan memanggil Validation.Add dan menentukan bidang untuk divalidasi dan jenis validasi yang akan dilakukan.

    Saat halaman berjalan, ASP.NET melakukan semua validasi untuk Anda. Anda dapat memeriksa hasilnya dengan memanggil Validation.IsValid, yang mengembalikan true jika semuanya lulus dan salah jika ada bidang yang gagal validasi. Biasanya, Anda memanggil Validation.IsValid sebelum melakukan pemrosesan apa pun pada input pengguna.

  2. <body> Perbarui elemen dengan menambahkan tiga panggilan ke Html.ValidationMessage metode , seperti ini:

    <body>
  <form method="post">
    <fieldset>
      <legend>Add Customer</legend>
      <div>
         <label for="CompanyName">Company Name:</label>
         <input type="text" name="CompanyName" value="" />
         @Html.ValidationMessage("companyname")
      </div>
      <div>
         <label for="ContactName">Contact Name:</label>
         <input type="text" name="ContactName" value="" />
         @Html.ValidationMessage("contactname")
      </div>
      <div>
         <label for="Employees">Employee Count:</label>
         <input type="text" name="Employees" value="" />
         @Html.ValidationMessage("employees")
      </div>
      <div>
         <label>&nbsp;</label>
         <input type="submit" value="Submit" class="submit" />
      </div>
    </fieldset>
  </form>
</body>

    Untuk menampilkan pesan kesalahan validasi, Anda dapat memanggil Html. ValidationMessage dan berikan nama bidang yang Anda inginkan pesannya.

  3. Jalankan halaman. Biarkan bidang kosong dan klik Kirim. Anda melihat pesan kesalahan.

    Cuplikan layar yang memperlihatkan pesan kesalahan ditampilkan jika input pengguna tidak lulus validasi.

  4. Tambahkan string (misalnya, "ABC") ke bidang Jumlah Karyawan dan klik Kirim lagi. Kali ini Anda melihat kesalahan yang menunjukkan bahwa string tidak dalam format yang tepat, yaitu bilangan bulat.

    Cuplikan layar yang memperlihatkan pesan kesalahan ditampilkan jika pengguna memasukkan string untuk bidang Karyawan.

ASP.NET Web Pages menyediakan lebih banyak opsi untuk memvalidasi input pengguna, termasuk kemampuan untuk melakukan validasi secara otomatis menggunakan skrip klien, sehingga pengguna mendapatkan umpan balik langsung di browser. Lihat bagian Sumber Daya Tambahan nanti untuk informasi selengkapnya.

Memulihkan Nilai Formulir Setelah Postback

Ketika Anda menguji halaman di bagian sebelumnya, Anda mungkin telah memperhatikan bahwa jika Anda memiliki kesalahan validasi, semua yang Anda masukkan (bukan hanya data yang tidak valid) hilang, dan Anda harus memasukkan kembali nilai untuk semua bidang. Ini menggambarkan poin penting: saat Anda mengirimkan halaman, memprosesnya, lalu merender halaman lagi, halaman dibuat ulang dari awal. Seperti yang Anda lihat, ini berarti bahwa nilai apa pun yang ada di halaman saat dikirimkan hilang.

Namun, Anda dapat memperbaikinya dengan mudah. Anda memiliki akses ke nilai yang dikirimkan (dalam Request.Form objek , sehingga Anda dapat mengisi nilai tersebut kembali ke bidang formulir saat halaman dirender.

  1. Dalam file Form.cshtml , ganti value atribut <input> elemen menggunakan value atribut .:

    <!DOCTYPE html>
<html>
  <head>
    <title>Customer Form</title>
  </head>
  <body>
    <form method="post">
      <fieldset>
        <legend>Add Customer</legend>
        <div>
          <label for="CompanyName">Company Name:</label>
          <input type="text" name="CompanyName"
                 value="@Request.Form["companyname"]"  />
          @Html.ValidationMessage("companyname")
        </div>
        <div>
         <label for="ContactName">Contact Name:</label>
         <input type="text" name="ContactName"
                value="@Request.Form["contactname"]" />
         @Html.ValidationMessage("contactname")
        </div>
        <div>
         <label for="Employees">Employee Count:</label>
         <input type="text" name="Employees"
                value="@Request.Form["employees"]" />
         @Html.ValidationMessage("employees")
        </div>
        <div>
          <label>&nbsp;</label>
          <input type="submit" value="Submit" class="submit" />
        </div>
    </fieldset>
  </form>
</body>

    Atribut value<input> elemen telah diatur untuk membaca nilai bidang secara dinamis dari Request.Form objek. Pertama kali halaman diminta, nilai dalam Request.Form objek semuanya kosong. Ini baik-baik saja, karena dengan begitu formulir kosong.

  2. Luncurkan halaman di browser Anda, isi bidang formulir atau biarkan kosong, dan klik Kirim. Halaman yang memperlihatkan nilai yang dikirimkan ditampilkan.

    forms-5

Sumber Daya Tambahan