Memperkenalkan Halaman Web ASP.NET - Dasar-Dasar Formulir HTML

2023-07-13

Tutorial ini menunjukkan dasar-dasar cara membuat formulir input dan cara menangani input pengguna saat Anda menggunakan ASP.NET Web Pages (Razor). Dan sekarang setelah Anda memiliki database, Anda akan menggunakan keterampilan formulir untuk memungkinkan pengguna menemukan film tertentu dalam database. Ini mengasumsikan Anda telah menyelesaikan seri melalui Pengantar Menampilkan Data Menggunakan Halaman Web ASP.NET.

Yang akan Anda pelajari:

Cara membuat formulir dengan menggunakan elemen HTML standar.

Cara membaca input pengguna dalam formulir.

Cara membuat kueri SQL yang secara selektif mendapatkan data dengan menggunakan istilah pencarian yang disediakan pengguna.

Cara memiliki bidang di halaman "ingat" apa yang dimasukkan pengguna.

Fitur/teknologi yang dibahas:

Objek Request.

Klausa SQL Where .

Apa yang akan Anda Bangun

Dalam tutorial sebelumnya, Anda membuat database, menambahkan data ke dalamnya, lalu menggunakan pembantu WebGrid untuk menampilkan data. Dalam tutorial ini, Anda akan menambahkan kotak pencarian yang memungkinkan Anda menemukan film dengan genre tertentu atau judulnya berisi kata apa pun yang Anda masukkan. (Misalnya, Anda akan dapat menemukan semua film yang genrenya adalah "Action" atau yang judulnya berisi "Harry" atau "Adventure.")

Setelah selesai dengan tutorial ini, Anda akan memiliki halaman seperti ini:

Halaman Film dengan Pencarian Genre dan Judul

Bagian daftar halaman sama seperti di tutorial terakhir — kisi. Perbedaannya adalah bahwa kisi hanya akan menampilkan film yang Anda cari.

Tentang Formulir HTML

(Jika Anda memiliki pengalaman dengan membuat formulir HTML dan dengan perbedaan antara GET dan POST, Anda dapat melewati bagian ini.)

Formulir memiliki elemen input pengguna — kotak teks, tombol, tombol radio, kotak centang, daftar drop-down, dan sebagainya. Pengguna mengisi kontrol ini atau membuat pilihan lalu mengirimkan formulir dengan mengklik tombol.

Sintaks HTML dasar formulir diilustrasikan oleh contoh ini:

<form method="post">
  <input type="text" name="name" value="" />
  <br/>
  <input type="submit" name="submit" value="Submit" />
</form>

Saat markup ini berjalan di halaman, markup ini membuat formulir sederhana yang terlihat seperti ilustrasi ini:

Formulir HTML dasar seperti yang dirender di browser

Elemen <form> ini mencakup elemen HTML yang akan dikirimkan. (Kesalahan yang mudah dilakukan adalah menambahkan elemen ke halaman tetapi kemudian lupa memasukkannya ke dalam <form> elemen. Dalam hal ini, tidak ada yang dikirimkan.) Atribut method memberi tahu browser cara mengirimkan input pengguna. Anda mengatur ini ke post jika Anda melakukan pembaruan di server atau jika get Anda hanya mengambil data dari server.

Tip

KEAMANAN Kata Kerja GET, POST, dan HTTP

HTTP, protokol yang digunakan browser dan server untuk bertukar informasi, sangat sederhana dalam operasi dasarnya. Browser hanya menggunakan beberapa kata kerja untuk membuat permintaan ke server. Ketika Anda menulis kode untuk web, sangat membantu untuk memahami kata kerja ini dan bagaimana browser dan server menggunakannya. Jauh dan jauh kata kerja yang paling umum digunakan adalah:

GET. Browser menggunakan kata kerja ini untuk mengambil sesuatu dari server. Misalnya, saat Anda mengetik URL ke browser Anda, browser melakukan GET operasi untuk meminta halaman yang Anda inginkan. Jika halaman menyertakan grafik, browser melakukan operasi tambahan GET untuk mendapatkan gambar. GET Jika operasi harus meneruskan informasi ke server, informasi diteruskan sebagai bagian dari URL dalam string kueri.
POST. Browser mengirimkan POST permintaan untuk mengirimkan data yang akan ditambahkan atau diubah di server. Misalnya, POST kata kerja digunakan untuk membuat rekaman dalam database atau mengubah yang sudah ada. Sebagian besar waktu, ketika Anda mengisi formulir dan mengklik tombol kirim, browser melakukan POST operasi. POST Dalam operasi, data yang diteruskan ke server ada di isi halaman.

Perbedaan penting antara kata kerja ini adalah bahwa GET operasi tidak seharusnya mengubah apa pun di server — atau untuk menempatkannya dengan cara yang sedikit lebih abstrak, GET operasi tidak mengakibatkan perubahan status di server. Anda dapat melakukan GET operasi pada sumber daya yang sama sebanyak yang Anda suka, dan sumber daya tersebut tidak berubah. (Operasi GET sering dikatakan "aman," atau untuk menggunakan istilah teknis, bersifat idempotensi.) Sebaliknya, tentu saja, POST permintaan mengubah sesuatu di server setiap kali Anda melakukan operasi.

Dua contoh akan membantu menggambarkan perbedaan ini. Saat Anda melakukan pencarian menggunakan mesin seperti Bing atau Google, Anda mengisi formulir yang terdiri dari satu kotak teks, lalu Anda mengklik tombol pencarian. Browser melakukan GET operasi, dengan nilai yang Anda masukkan ke dalam kotak yang diteruskan sebagai bagian dari URL. GET Menggunakan operasi untuk jenis formulir ini tidak masalah, karena operasi pencarian tidak mengubah sumber daya apa pun di server, operasi ini hanya mengambil informasi.

Sekarang pertimbangkan proses pemesanan sesuatu secara online. Anda mengisi detail pesanan lalu klik tombol kirim. Operasi ini akan menjadi POST permintaan, karena operasi akan mengakibatkan perubahan pada server, seperti catatan pesanan baru, perubahan informasi akun Anda, dan mungkin banyak perubahan lainnya. GET Tidak seperti operasi, Anda tidak dapat mengulangi permintaan Anda POST — jika Anda melakukannya, setiap kali Mengirim ulang permintaan, Anda akan menghasilkan pesanan baru di server. (Dalam kasus seperti ini, situs web akan sering memperingatkan Anda untuk tidak mengklik tombol kirim lebih dari sekali, atau akan menonaktifkan tombol kirim sehingga Anda tidak mengirim ulang formulir secara tidak sengaja.)

Dalam tutorial ini, Anda akan menggunakan GET operasi dan POST operasi untuk bekerja dengan formulir HTML. Kami akan menjelaskan dalam setiap kasus mengapa kata kerja yang Anda gunakan adalah yang sesuai.

(Untuk mempelajari selengkapnya tentang kata kerja HTTP, lihat artikel Definisi Metode di situs W3C.)

Sebagian besar elemen input pengguna adalah elemen HTML <input> . Mereka terlihat seperti <input type="type" name="name">, di mana jenis menunjukkan jenis kontrol input pengguna yang Anda inginkan. Elemen-elemen ini adalah yang umum:

Kotak teks: <input type="text">
Kotak centang: <input type="check">
Tombol radio: <input type="radio">
Tombol: <input type="button">
Tombol Kirim: <input type="submit">

Anda juga dapat menggunakan <textarea> elemen untuk membuat kotak teks multibaris dan <select> elemen untuk membuat daftar drop-down atau daftar yang dapat digulirkan. (Untuk informasi selengkapnya tentang elemen formulir HTML, lihat Formulir dan Input HTML di situs W3Schools.)

Atribut name ini sangat penting, karena namanya adalah bagaimana Anda akan mendapatkan nilai elemen nanti, seperti yang akan Anda lihat segera.

Bagian yang menarik adalah apa yang Anda, pengembang halaman, lakukan dengan input pengguna. Tidak ada perilaku bawaan yang terkait dengan elemen-elemen ini. Sebagai gantinya, Anda harus mendapatkan nilai yang telah dimasukkan atau dipilih pengguna dan melakukan sesuatu dengan mereka. Itulah yang akan Anda pelajari dalam tutorial ini.

Tip

HTML5 dan Formulir Input

Seperti yang mungkin Anda ketahui, HTML sedang dalam transisi dan versi terbaru (HTML5) menyertakan dukungan untuk cara yang lebih intuitif bagi pengguna untuk memasukkan informasi. Misalnya, dalam HTML5, Anda (pengembang halaman) dapat memberi tahu halaman bahwa Anda ingin pengguna memasukkan tanggal. Browser kemudian dapat secara otomatis menampilkan kalender daripada mengharuskan pengguna untuk memasukkan tanggal secara manual. Namun, HTML5 baru dan belum didukung di semua browser.

ASP.NET Web Pages mendukung input HTML5 sejauh browser pengguna melakukannya. Untuk gambaran atribut baru untuk <input> elemen dalam HTML5, lihat Atribut jenis input> HTML < di situs W3Schools.

Membuat Formulir

Di WebMatrix, di ruang kerja File , buka halaman Movies.cshtml .

Setelah tag penutup </h1> dan sebelum tag grid.GetHtml pembuka <div> panggilan, tambahkan markup berikut:

<form method="get">
  <div>
    <label for="searchGenre">Genre to look for:</label>
    <input type="text" name="searchGenre" value="" />
    <input type="Submit" value="Search Genre" /><br/>
    (Leave blank to list all movies.)<br/>
    </div>
</form>

Markup ini membuat formulir yang memiliki kotak teks bernama searchGenre dan tombol kirim. Kotak teks dan tombol kirim diapit dalam <form> elemen yang atributnya method diatur ke get. (Ingatlah bahwa jika Anda tidak meletakkan kotak teks dan tombol kirim di dalam <form> elemen, tidak ada yang akan dikirimkan saat Anda mengklik tombol.) Anda menggunakan GET kata kerja di sini karena Anda membuat formulir yang tidak membuat perubahan apa pun di server — itu hanya menghasilkan pencarian. (Dalam tutorial sebelumnya, Anda menggunakan post metode , yaitu bagaimana Anda mengirimkan perubahan ke server. Anda akan melihat bahwa dalam tutorial berikutnya lagi.)

Jalankan halaman. Meskipun Anda belum menentukan perilaku apa pun untuk formulir, Anda dapat melihat seperti apa tampilannya:

Halaman film dengan kotak pencarian untuk Genre

Masukkan nilai ke dalam kotak teks, seperti "Koma." Lalu klik Cari Genre.

Catat URL halaman. Karena Anda mengatur <form> atribut elemen method ke get, nilai yang Anda masukkan sekarang menjadi bagian dari string kueri di URL, seperti ini:

http://localhost:45661/Movies.cshtml?searchGenre=Comedy

Membaca Nilai Formulir

Halaman sudah berisi beberapa kode yang mendapatkan data database dan menampilkan hasilnya dalam kisi. Sekarang Anda harus menambahkan beberapa kode yang membaca nilai kotak teks sehingga Anda bisa menjalankan kueri SQL yang menyertakan istilah pencarian.

Karena Anda mengatur metode formulir ke get, Anda bisa membaca nilai yang dimasukkan ke dalam kotak teks dengan menggunakan kode seperti berikut ini:

var searchTerm = Request.QueryString["searchGenre"];

Objek Request.QueryString ( QueryString properti Request objek ) mencakup nilai elemen yang dikirimkan sebagai bagian GET dari operasi. Properti Request.QueryString berisi koleksi (daftar) nilai yang dikirimkan dalam formulir. Untuk mendapatkan nilai individual apa pun, Anda menentukan nama elemen yang Anda inginkan. Itu sebabnya Anda harus memiliki name atribut pada <input> elemen (searchTerm) yang membuat kotak teks. (Untuk informasi selengkapnya tentang Request objek, lihat bar samping nanti.)

Cukup sederhana untuk membaca nilai kotak teks. Tetapi jika pengguna tidak memasukkan apa pun di kotak teks tetapi tetap mengklik Cari , Anda dapat mengabaikan klik itu, karena tidak ada yang perlu dicari.

Kode berikut adalah contoh yang menunjukkan cara menerapkan kondisi ini. (Anda belum perlu menambahkan kode ini; Anda akan melakukannya dalam sesaat.)

if(!Request.QueryString["searchGenre"].IsEmpty() ) {
     // Do something here
}

Tes rusak dengan cara ini:

Dapatkan nilai Request.QueryString["searchGenre"], yaitu nilai yang dimasukkan ke <input> dalam elemen bernama searchGenre.
Cari tahu apakah kosong dengan menggunakan IsEmpty metode . Metode ini adalah cara standar untuk menentukan apakah sesuatu (misalnya, elemen formulir) berisi nilai. Tapi sungguh, Anda hanya peduli jika tidak kosong, oleh karena itu ...
! Tambahkan operator di depan IsEmpty pengujian. (Operator ! berarti TIDAK logis).

Dalam bahasa Inggris biasa, seluruh if kondisi diterjemahkan ke dalam yang berikut: Jika elemen searchGenre formulir tidak kosong, maka ...

Blok ini mengatur tahap untuk membuat kueri yang menggunakan istilah pencarian. Anda akan melakukannya di bagian berikutnya.

Tip

Objek Permintaan

Objek Request berisi semua informasi yang dikirim browser ke aplikasi Anda saat halaman diminta atau dikirimkan. Objek ini mencakup informasi apa pun yang disediakan pengguna, seperti nilai kotak teks atau file untuk diunggah. Ini juga mencakup semua jenis informasi tambahan, seperti cookie, nilai dalam string kueri URL (jika ada), jalur file halaman yang berjalan, jenis browser yang digunakan pengguna, daftar bahasa yang diatur di browser, dan banyak lagi.

Objek Request adalah koleksi (daftar) nilai. Anda mendapatkan nilai individual dari koleksi dengan menentukan namanya:

var someValue = Request["name"];

Objek Request benar-benar mengekspos beberapa subset. Contohnya:

Request.Form memberi Anda nilai dari elemen di dalam elemen yang dikirimkan <form> jika permintaan adalah POST permintaan.
Request.QueryString memberi Anda hanya nilai dalam string kueri URL. (Dalam URL seperti http://mysite/myapp/page?searchGenre=action&page=2, bagian ?searchGenre=action&page=2 URL adalah string kueri.)
Request.Cookies koleksi memberi Anda akses ke cookie yang telah dikirim browser.

Untuk mendapatkan nilai yang Anda tahu ada dalam formulir yang dikirimkan, Anda dapat menggunakan Request["name"]. Atau, Anda dapat menggunakan versi Request.Form["name"] yang lebih spesifik (untuk POST permintaan) atau Request.QueryString["name"] (untuk GET permintaan). Tentu saja, nama adalah nama item yang akan didapatkan.

Nama item yang ingin Anda dapatkan harus unik dalam koleksi yang Anda gunakan. Itu sebabnya Request objek menyediakan subset seperti Request.Form dan Request.QueryString. Misalkan halaman Anda berisi elemen formulir bernama userName dan juga berisi cookie bernama userName. Jika Anda mendapatkan Request["userName"], itu ambigu apakah Anda menginginkan nilai formulir atau cookie. Namun, jika Anda mendapatkan Request.Form["userName"] atau Request.Cookie["userName"], Anda sedang eksplisit tentang nilai mana yang akan didapatkan.

Ini adalah praktik yang baik untuk menjadi spesifik dan menggunakan subset Request yang Anda minati, seperti Request.Form atau Request.QueryString. Untuk halaman sederhana yang Anda buat dalam tutorial ini, mungkin tidak benar-benar membuat perbedaan. Namun, saat Anda membuat halaman yang lebih kompleks, menggunakan versi Request.Form eksplisit atau Request.QueryString dapat membantu Anda menghindari masalah yang dapat muncul ketika halaman berisi formulir (atau beberapa formulir), cookie, nilai string kueri, dan sebagainya.

Membuat Kueri dengan Menggunakan Istilah Pencarian

Sekarang setelah Anda tahu cara mendapatkan istilah pencarian yang dimasukkan pengguna, Anda bisa membuat kueri yang menggunakannya. Ingatlah bahwa untuk mengeluarkan semua item film dari database, Anda menggunakan kueri SQL yang terlihat seperti pernyataan ini:

SELECT * FROM Movies

Untuk mendapatkan hanya film tertentu, Anda harus menggunakan kueri yang menyertakan Where klausa. Klausa ini memungkinkan Anda mengatur kondisi di mana baris dikembalikan oleh kueri. Berikut contohnya:

SELECT * FROM Movies WHERE Genre = 'Action'

Format dasarnya adalah WHERE column = value. Anda dapat menggunakan operator yang berbeda selain hanya =, seperti > (lebih besar dari), < (kurang dari), <> (tidak sama dengan), <= (kurang dari atau sama dengan), dll., tergantung pada apa yang Anda cari.

Jika Anda bertanya-tanya, pernyataan SQL tidak peka huruf besar/kecil — SELECT sama Select dengan (atau bahkan select). Namun, orang sering memanfaatkan kata kunci dalam pernyataan SQL, seperti SELECT dan WHERE, untuk membuatnya lebih mudah dibaca.

Meneruskan istilah pencarian sebagai parameter

Mencari genre tertentu cukup mudah (WHERE Genre = 'Action'), tetapi Anda ingin dapat mencari genre apa pun yang dimasukkan pengguna. Untuk melakukannya, Anda membuat sebagai kueri SQL yang menyertakan tempat penampung untuk nilai yang akan dicari. Ini akan terlihat seperti perintah ini:

SELECT * FROM Movies WHERE Genre = @0

Tempat penampung adalah @ karakter diikuti oleh nol. Seperti yang mungkin Anda tebak, kueri dapat berisi beberapa tempat penampung, dan mereka akan diberi nama @0, @1, @2, dll.

Untuk menyiapkan kueri dan benar-benar meneruskannya nilai, Anda menggunakan kode seperti berikut ini:

selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
selectedData = db.Query(selectCommand, Request.QueryString["searchGenre"]);

Kode ini mirip dengan apa yang telah Anda lakukan untuk menampilkan data di kisi. Satu-satunya perbedaan adalah:

Kueri berisi tempat penampung (WHERE Genre = @0").
Kueri dimasukkan ke dalam variabel (selectCommand); sebelumnya, Anda meneruskan kueri langsung ke db.Query metode .
Saat Anda memanggil db.Query metode , Anda meneruskan kueri dan nilai yang akan digunakan untuk tempat penampung. (Jika kueri memiliki beberapa tempat penampung, Anda akan meneruskannya semuanya sebagai nilai terpisah ke metode .)

Jika Anda menyatukan semua elemen ini, Anda mendapatkan kode berikut:

if(!Request.QueryString["searchGenre"].IsEmpty() ) { 
    searchTerm = Request.QueryString["searchGenre"];
    selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
    selectedData = db.Query(selectCommand, searchTerm);
}

Catatan

Penting! Menggunakan tempat penampung (seperti @0) untuk meneruskan nilai ke perintah SQL sangat penting untuk keamanan. Cara Anda melihatnya di sini, dengan tempat penampung untuk data variabel, adalah satu-satunya cara Anda harus membuat perintah SQL.

Jangan pernah membuat pernyataan SQL dengan menyusun (menggabungkan) teks harfiah dan nilai harfiah yang Anda dapatkan dari pengguna. Menggabungkan input pengguna ke dalam pernyataan SQL membuka situs Anda ke serangan injeksi SQL di mana pengguna jahat mengirimkan nilai ke halaman Anda yang meretas database Anda. (Anda dapat membaca lebih lanjut di artikel SQL Injection situs web MSDN.)

Memperbarui Halaman Film dengan Kode Pencarian

Sekarang Anda dapat memperbarui kode di file Movies.cshtml . Untuk memulai, ganti kode di blok kode di bagian atas halaman dengan kode ini:

var db = Database.Open("WebPagesMovies");
var selectCommand = "SELECT * FROM Movies";
var searchTerm = "";

Perbedaannya di sini adalah Anda telah memasukkan kueri ke selectCommand dalam variabel, yang akan Anda teruskan ke db.Query nanti. Memasukkan pernyataan SQL ke dalam variabel memungkinkan Anda mengubah pernyataan , yang akan Anda lakukan untuk melakukan pencarian.

Anda juga telah menghapus dua baris ini, yang akan Anda masukkan kembali nanti:

var selectedData = db.Query("SELECT * FROM Movies");
var grid = new WebGrid(source: selectedData, rowsPerPage: 3);

Anda belum ingin menjalankan kueri (yaitu, panggilan db.Query) dan Anda juga belum ingin menginisialisasi pembantu WebGrid . Anda akan melakukan hal-hal tersebut setelah mengetahui pernyataan SQL mana yang harus dijalankan.

Setelah blok yang ditulis ulang ini, Anda dapat menambahkan logika baru untuk menangani pencarian. Kode yang telah selesai akan terlihat seperti berikut ini. Perbarui kode di halaman Anda sehingga cocok dengan contoh ini:

@{
    var db = Database.Open("WebPagesMovies") ;
    var selectCommand = "SELECT * FROM Movies";
    var searchTerm = "";

    if(!Request.QueryString["searchGenre"].IsEmpty() ) {
        selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
        searchTerm = Request.QueryString["searchGenre"];
    }

    var selectedData = db.Query(selectCommand, searchTerm);
    var grid = new WebGrid(source: selectedData, defaultSort: "Genre", rowsPerPage:3);
}

Halaman sekarang berfungsi seperti ini. Setiap kali halaman berjalan, kode membuka database dan selectCommand variabel diatur ke pernyataan SQL yang mendapatkan semua rekaman dari Movies tabel. Kode ini juga menginisialisasi searchTerm variabel .

Namun, jika permintaan saat ini menyertakan nilai untuk searchGenre elemen , kode diatur selectCommand ke kueri yang berbeda — yaitu, ke salah satu yang menyertakan Where klausul untuk mencari genre. Ini juga diatur searchTerm ke apa pun yang diteruskan untuk kotak pencarian (yang mungkin tidak ada).

Terlepas dari pernyataan SQL mana yang ada di selectCommand, kode kemudian memanggil db.Query untuk menjalankan kueri, meneruskannya apa pun yang ada di searchTerm. Jika tidak ada apa pun di searchTerm, itu tidak masalah, karena dalam hal ini tidak ada parameter untuk meneruskan nilai ke selectCommand .

Terakhir, kode menginisialisasi pembantu WebGrid dengan menggunakan hasil kueri, sama seperti sebelumnya.

Anda dapat melihat bahwa dengan menempatkan pernyataan SQL dan istilah pencarian ke dalam variabel, Anda telah menambahkan fleksibilitas ke kode. Seperti yang akan Anda lihat nanti dalam tutorial ini, Anda dapat menggunakan kerangka kerja dasar ini dan terus menambahkan logika untuk berbagai jenis pencarian.

Menguji Fitur Search-by-Genre

Di WebMatrix, jalankan halaman Movies.cshtml . Anda melihat halaman dengan kotak teks untuk genre.

Masukkan genre yang telah Anda masukkan untuk salah satu rekaman pengujian Anda, lalu klik Cari. Kali ini Anda melihat daftar hanya film yang cocok dengan genre tersebut:

Daftar halaman film setelah mencari genre 'Comedies'

Masukkan genre yang berbeda dan cari lagi. Coba masukkan genre dengan menggunakan huruf kecil semua atau huruf besar semua sehingga Anda dapat melihat bahwa pencarian tidak peka huruf besar/kecil.

"Mengingat" Apa yang Dimasukkan Pengguna

Anda mungkin memperhatikan bahwa setelah memasukkan genre dan mengklik Search Genre, Anda melihat daftar untuk genre tersebut. Namun, kotak teks pencarian kosong — dengan kata lain, kotak teks tidak ingat apa yang telah Anda masukkan.

Penting untuk memahami mengapa perilaku ini terjadi. Saat Anda mengirimkan halaman, browser mengirimkan permintaan ke server web. Ketika ASP.NET mendapatkan permintaan, ia membuat instans baru halaman, menjalankan kode di dalamnya, lalu merender halaman ke browser lagi. Namun, akibatnya, halaman tidak tahu bahwa Anda hanya bekerja dengan versi sebelumnya. Yang diketahui adalah bahwa ia mendapat permintaan yang memiliki beberapa data formulir di dalamnya.

Setiap kali Anda meminta halaman — baik untuk pertama kalinya atau dengan mengirimkannya — Anda mendapatkan halaman baru. Server web tidak memiliki memori permintaan terakhir Anda. Juga tidak ASP.NET, dan juga browser. Satu-satunya koneksi antara instans halaman yang terpisah ini adalah data apa pun yang Anda kirimkan di antaranya. Jika Anda mengirimkan halaman, misalnya, instans halaman baru bisa mendapatkan data formulir yang dikirim oleh instans sebelumnya. (Cara lain untuk meneruskan data antar halaman adalah dengan menggunakan cookie.)

Cara formal untuk menggambarkan situasi ini adalah dengan mengatakan bahwa halaman web tidak memiliki status. Server web dan halaman itu sendiri dan elemen di halaman tidak mempertahankan informasi apa pun tentang status halaman sebelumnya. Web dirancang dengan cara ini karena mempertahankan status untuk permintaan individu akan dengan cepat menghabiskan sumber daya server web, yang sering menangani ribuan, bahkan mungkin ratusan ribu, permintaan per detik.

Jadi itu sebabnya kotak teks kosong. Setelah Anda mengirimkan halaman, ASP.NET membuat instans baru halaman dan berjalan melalui kode dan markup. Tidak ada dalam kode yang memberi tahu ASP.NET untuk memasukkan nilai ke dalam kotak teks. Jadi ASP.NET tidak melakukan apa pun, dan kotak teks dirender tanpa nilai di dalamnya.

Sebenarnya ada cara mudah untuk mengatasi masalah ini. Genre yang Anda masukkan ke dalam kotak teks tersedia untuk Anda dalam kode — berada di Request.QueryString["searchGenre"].

Perbarui markup untuk kotak teks sehingga value atribut mendapatkan nilainya dari searchTerm, seperti contoh ini:

<input type="text" name="searchGenre" value="@Request.QueryString["searchGenre"]" />

Di halaman ini, Anda juga dapat mengatur value atribut ke searchTerm variabel, karena variabel tersebut juga berisi genre yang Anda masukkan. Tetapi menggunakan Request objek untuk mengatur atribut seperti yang value ditunjukkan di sini adalah cara standar untuk menyelesaikan tugas ini. (Dengan asumsi Anda bahkan ingin melakukan ini — dalam beberapa situasi, Anda mungkin ingin merender halaman tanpa nilai di bidang. Semuanya tergantung pada apa yang terjadi dengan aplikasi Anda.)

Catatan

Anda tidak dapat "mengingat" nilai kotak teks yang digunakan untuk kata sandi. Ini akan menjadi lubang keamanan untuk memungkinkan orang mengisi bidang kata sandi dengan menggunakan kode.

Jalankan halaman lagi, masukkan genre, dan klik Search Genre. Kali ini Anda tidak hanya melihat hasil pencarian, tetapi kotak teks mengingat apa yang Anda masukkan terakhir kali:

Halaman memperlihatkan bahwa kotak teks telah 'mengingat' entri sebelumnya

Mencari Word apa pun di Judul

Anda sekarang dapat mencari genre apa pun, tetapi Anda mungkin juga ingin mencari judul. Sulit untuk mendapatkan judul tepat ketika Anda mencari, jadi sebagai gantinya Anda dapat mencari kata yang muncul di mana saja di dalam judul. Untuk melakukannya di SQL, Anda menggunakan LIKE operator dan sintaks seperti berikut:

SELECT * FROM Movies WHERE Title LIKE '%adventure%'

Perintah ini mendapatkan semua film yang judulnya berisi "petualangan". Saat menggunakan LIKE operator , Anda menyertakan karakter % kartubebas sebagai bagian dari istilah pencarian. Pencarian LIKE 'adventure%' berarti "dimulai dengan 'petualangan'". (Secara teknis, itu berarti "String 'petualangan' diikuti oleh apa pun.") Demikian pula, istilah LIKE '%adventure' pencarian berarti "apa pun diikuti oleh string 'adventure'", yang merupakan cara lain untuk mengatakan "berakhir dengan 'petualangan'".

Oleh karena itu, istilah LIKE '%adventure%' pencarian berarti "dengan 'petualangan' di mana saja dalam judul." (Secara teknis, "apa pun dalam judul, diikuti dengan 'petualangan', diikuti oleh apa pun.")

<form> Di dalam elemen , tambahkan markup berikut tepat di bawah tag penutup </div> untuk pencarian genre (tepat sebelum elemen penutup</form>):

<div>
  <label for="SearchTitle">Movie title contains the following:</label>
  <input type="text" name="searchTitle" value="@Request.QueryString["searchTitle"]" />
  <input type="Submit" value="Search Title" /><br/>
</div>

Kode untuk menangani pencarian ini mirip dengan kode untuk pencarian genre, kecuali bahwa Anda harus merakit LIKE pencarian. Di dalam blok kode di bagian atas halaman, tambahkan blok ini if tepat setelah if blok untuk pencarian genre:

if(!Request.QueryString["searchTitle"].IsEmpty() ) {
    selectCommand = "SELECT * FROM Movies WHERE Title LIKE @0";
    searchTerm = "%" + Request["searchTitle"] + "%";
}

Kode ini menggunakan logika yang sama dengan yang Anda lihat sebelumnya, kecuali bahwa pencarian menggunakan LIKE operator dan kode menempatkan "%" sebelum dan sesudah istilah pencarian.

Perhatikan betapa mudahnya menambahkan pencarian lain ke halaman. Yang harus Anda lakukan adalah:

if Buat blok yang diuji untuk melihat apakah kotak pencarian yang relevan memiliki nilai.
Atur selectCommand variabel ke pernyataan SQL baru.
Atur searchTerm variabel ke nilai untuk diteruskan ke kueri.

Berikut adalah blok kode lengkap, yang berisi logika baru untuk pencarian judul:

@{
    var db = Database.Open("WebPagesMovies") ;
    var selectCommand = "SELECT * FROM Movies";
    var searchTerm = "";

    if(!Request.QueryString["searchGenre"].IsEmpty() ) {
        selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
        searchTerm = Request.QueryString["searchGenre"];
    }

   if(!Request.QueryString["searchTitle"].IsEmpty() ) {
        selectCommand = "SELECT * FROM Movies WHERE Title LIKE @0";
        searchTerm = "%" + Request["searchTitle"] + "%";
    }

    var selectedData = db.Query(selectCommand, searchTerm);
    var grid = new WebGrid(source: selectedData, defaultSort: "Genre", rowsPerPage:8);
}

Berikut ringkasan dari apa yang dilakukan kode ini:

Variabel searchTerm dan selectCommand diinisialisasi di bagian atas. Anda akan mengatur variabel ini ke istilah pencarian yang sesuai (jika ada) dan perintah SQL yang sesuai berdasarkan apa yang dilakukan pengguna di halaman. Pencarian default adalah kasus sederhana untuk mendapatkan semua film dari database.
Dalam pengujian untuk searchGenre dan searchTitle, kode diatur searchTerm ke nilai yang ingin Anda cari. Blok kode tersebut juga diatur selectCommand ke perintah SQL yang sesuai untuk pencarian tersebut.
Metode db.Query ini hanya dipanggil sekali, menggunakan perintah SQL apa pun yang ada di selectedCommand dan nilai apa pun yang ada di searchTerm. Jika tidak ada istilah pencarian (tidak ada genre dan tidak ada kata judul), nilainya searchTerm adalah string kosong. Namun, itu tidak masalah, karena dalam hal ini kueri tidak memerlukan parameter.

Menguji Fitur Pencarian Judul

Sekarang Anda dapat menguji halaman pencarian yang telah selesai. Jalankan Movies.cshtml.

Masukkan genre dan klik Search Genre. Kisi menampilkan film dari genre itu, seperti sebelumnya.

Masukkan kata judul dan klik Cari Judul. Kisi menampilkan film yang memiliki kata tersebut dalam judul.

Daftar halaman film setelah mencari 'The' dalam judul

Biarkan kedua kotak teks kosong dan klik salah satu tombol. Kisi menampilkan semua film.

Menggabungkan Kueri

Anda mungkin melihat bahwa pencarian yang dapat Anda lakukan bersifat eksklusif. Anda tidak dapat mencari judul dan genre secara bersamaan, meskipun kedua kotak pencarian memiliki nilai di dalamnya. Misalnya, Anda tidak dapat mencari semua film aksi yang judulnya berisi "Adventure". (Seperti yang dikodekan halaman sekarang, jika Anda memasukkan nilai untuk genre dan judul, pencarian judul akan diutamakan.) Untuk membuat pencarian yang menggabungkan kondisi, Anda harus membuat kueri SQL yang memiliki sintaks seperti berikut ini:

SELECT * FROM Movies WHERE Genre = @0 AND Title LIKE @1

Dan Anda harus menjalankan kueri dengan menggunakan pernyataan seperti berikut (kira-kira):

var selectedData = db.Query(selectCommand, searchGenre, searchTitle);

Membuat logika untuk memungkinkan banyak permutasi kriteria pencarian bisa sedikit terlibat, seperti yang Anda lihat. Oleh karena itu, kita akan berhenti di sini.

Berikutnya

Dalam tutorial berikutnya, Anda akan membuat halaman yang menggunakan formulir untuk memungkinkan pengguna menambahkan film ke database.

Daftar Lengkap untuk Halaman Film (Diperbarui dengan Pencarian)

@{
    var db = Database.Open("WebPagesMovies") ;
    var selectCommand = "SELECT * FROM Movies";
    var searchTerm = "";

    if(!Request.QueryString["searchGenre"].IsEmpty() ) {
        selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
        searchTerm = Request.QueryString["searchGenre"];
    }

    if(!Request.QueryString["searchTitle"].IsEmpty() ) {
        selectCommand = "SELECT * FROM Movies WHERE Title LIKE @0";
        searchTerm = "%" + Request["searchTitle"] + "%";
    }

    var selectedData = db.Query(selectCommand, searchTerm);
    var grid = new WebGrid(source: selectedData, defaultSort: "Genre", rowsPerPage:3);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Movies</title>
    <style type="text/css">
      .grid { margin: 4px; border-collapse: collapse; width: 600px; }
      .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
      .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
      .alt { background-color: #E8E8E8; color: #000; }
    </style>
  </head>
  <body>
    <h1>Movies</h1>
      <form method="get">
        <div>
        <label for="searchGenre">Genre to look for:</label>
        <input type="text" name="searchGenre" value="@Request.QueryString["searchGenre"]" />
        <input type="Submit" value="Search Genre" /><br/>
        (Leave blank to list all movies.)<br/>
        </div>

        <div>
          <label for="SearchTitle">Movie title contains the following:</label>
          <input type="text" name="searchTitle" value="@Request.QueryString["searchTitle"]" />
          <input type="Submit" value="Search Title" /><br/>
        </div>
      </form>

    <div>
      @grid.GetHtml(
        tableStyle: "grid",
        headerStyle: "head",
        alternatingRowStyle: "alt",
        columns: grid.Columns(
          grid.Column("Title"),
          grid.Column("Genre"),
          grid.Column("Year")
        )
      )
    </div>
  </body>
</html>

Sumber Daya Tambahan

Pengantar Pemrograman Web ASP.NET Menggunakan Sintaks Razor
Klausul SQL WHERE di situs W3Schools
Artikel Definisi Metode di situs W3C

Sebelumnya Berikutnya

Bagikan melalui