Bagikan melalui


Memperkenalkan Halaman Web ASP.NET - Memasukkan Data Database dengan Menggunakan Formulir

oleh Tom FitzMacken

Tutorial ini menunjukkan kepada Anda cara membuat formulir entri lalu memasukkan data yang Anda dapatkan dari formulir ke dalam tabel database saat Anda menggunakan ASP.NET Web Pages (Razor). Ini mengasumsikan Anda telah menyelesaikan seri melalui Dasar-Dasar Formulir HTML di halaman web ASP.NET.

Yang akan Anda pelajari:

  • Selengkapnya tentang cara memproses formulir entri.
  • Cara menambahkan (menyisipkan) data dalam database.
  • Cara memastikan bahwa pengguna telah memasukkan nilai yang diperlukan dalam formulir (cara memvalidasi input pengguna).
  • Cara menampilkan kesalahan validasi.
  • Cara melompat ke halaman lain dari halaman saat ini.

Fitur/teknologi yang dibahas:

  • Metode Database.Execute.
  • Pernyataan SQL Insert Into
  • Pembantu Validation .
  • Metode Response.Redirect.

Apa yang akan Anda Bangun

Dalam tutorial sebelumnya yang menunjukkan kepada Anda cara membuat database, Anda memasukkan data database dengan mengedit database langsung di WebMatrix, bekerja di ruang kerja Database . Di sebagian besar aplikasi, itu bukan cara praktis untuk memasukkan data ke dalam database. Jadi dalam tutorial ini, Anda akan membuat antarmuka berbasis web yang memungkinkan Anda atau siapa pun memasukkan data dan menyimpannya ke database.

Anda akan membuat halaman tempat Anda dapat memasukkan film baru. Halaman akan berisi formulir entri yang memiliki bidang (kotak teks) tempat Anda dapat memasukkan judul film, genre, dan tahun. Halaman akan terlihat seperti halaman ini:

Halaman 'Tambahkan Film' di browser

Kotak teks akan menjadi elemen HTML <input> yang akan terlihat seperti markup ini:

<input type="text" name="genre" value="" />

Membuat Formulir Entri Dasar

Buat halaman bernama AddMovie.cshtml.

Ganti apa yang ada dalam file dengan markup berikut. Timpa semuanya; Anda akan segera menambahkan blok kode di bagian atas.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a Movie</title>
</head>
<body>
  <h1>Add a Movie</h1>
  <form method="post">
    <fieldset>
      <legend>Movie Information</legend>
      <p><label for="title">Title:</label>
         <input type="text" name="title" value="@Request.Form["title"]" />
      </p>

      <p><label for="genre">Genre:</label>
         <input type="text" name="genre" value="@Request.Form["genre"]" />
      </p>

      <p><label for="year">Year:</label>
         <input type="text" name="year" value="@Request.Form["year"]" />
      </p>

      <p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
    </fieldset>
  </form>
</body>
</html>

Contoh ini menunjukkan HTML khas untuk membuat formulir. Ini menggunakan <input> elemen untuk kotak teks dan untuk tombol kirim. Keterangan untuk kotak teks dibuat dengan menggunakan elemen standar <label> . Elemen <fieldset> dan <legend> menempatkan kotak yang bagus di sekitar formulir.

Perhatikan bahwa di halaman ini, <form> elemen menggunakan post sebagai nilai untuk method atribut . Dalam tutorial sebelumnya, Anda membuat formulir yang menggunakan metode .get Itu benar, karena meskipun formulir mengirimkan nilai ke server, permintaan tidak membuat perubahan apa pun. Yang dilakukannya adalah mengambil data dengan cara yang berbeda. Namun, di halaman ini Anda akan membuat perubahan—Anda akan menambahkan rekaman database baru. Oleh karena itu, formulir ini harus menggunakan post metode . (Untuk informasi selengkapnya tentang perbedaan antara GET operasi dan POST , lihat sidebarGET, POST, dan HTTP Verb Safety di tutorial sebelumnya.)

Perhatikan bahwa setiap kotak teks memiliki name elemen (title, genre, year). Seperti yang Anda lihat di tutorial sebelumnya, nama-nama ini penting karena Anda harus memiliki nama-nama tersebut sehingga Anda bisa mendapatkan input pengguna nanti. Anda dapat menggunakan nama apa pun. Sangat membantu untuk menggunakan nama yang bermakna yang membantu Anda mengingat data apa yang sedang Anda kerjakan.

Atribut value dari setiap <input> elemen berisi sedikit kode Razor (misalnya, Request.Form["title"]). Anda mempelajari versi trik ini dalam tutorial sebelumnya untuk mempertahankan nilai yang dimasukkan ke dalam kotak teks (jika ada) setelah formulir dikirimkan.

Mendapatkan Nilai Formulir

Selanjutnya, Anda menambahkan kode yang memproses formulir. Dalam kerangka, Anda akan melakukan hal berikut:

  1. Periksa apakah halaman sedang diposting (telah dikirim). Anda ingin kode Anda berjalan hanya ketika pengguna telah mengklik tombol , bukan ketika halaman pertama kali berjalan.
  2. Dapatkan nilai yang dimasukkan pengguna ke dalam kotak teks. Dalam hal ini, karena formulir menggunakan POST kata kerja, Anda mendapatkan nilai formulir dari Request.Form koleksi.
  3. Sisipkan nilai sebagai rekaman baru dalam tabel database Film .

Di bagian atas file, tambahkan kode berikut:

@{
    var title = "";
    var genre = "";
    var year = "";

    if(IsPost){
        title = Request.Form["title"];
        genre = Request.Form["genre"];
        year = Request.Form["year"];
    }
}

Beberapa baris pertama membuat variabel (title, , genredan year) untuk menahan nilai dari kotak teks. Baris if(IsPost) memastikan bahwa variabel diatur hanya ketika pengguna mengklik tombol Tambahkan Film — yaitu, ketika formulir telah diposting.

Seperti yang Anda lihat dalam tutorial sebelumnya, Anda mendapatkan nilai kotak teks dengan menggunakan ekspresi seperti Request.Form["name"], di mana nama adalah nama <input> elemen .

Nama variabel (title, , genredan year) bersifat arbitrer. Seperti nama yang Anda tetapkan ke <input> elemen, Anda dapat memanggilnya apa pun yang Anda suka. (Nama variabel tidak harus cocok dengan atribut <input> nama elemen pada formulir.) Tetapi seperti <input> halnya elemen, ada baiknya menggunakan nama variabel yang mencerminkan data yang dikandungnya. Saat Anda menulis kode, nama yang konsisten memudahkan Anda untuk mengingat data apa yang sedang Anda kerjakan.

Menambahkan Data ke Database

Di blok kode yang baru saja Anda tambahkan, tepat di dalam kurung kurawal penutup ( } ) blok if (bukan hanya di dalam blok kode), tambahkan kode berikut:

var db = Database.Open("WebPagesMovies");
var insertCommand = "INSERT INTO Movies (Title, Genre, Year) VALUES(@0, @1, @2)";
db.Execute(insertCommand, title, genre, year);

Contoh ini mirip dengan kode yang Anda gunakan dalam tutorial sebelumnya untuk mengambil dan menampilkan data. Baris yang dimulai dengan db = membuka database, seperti sebelumnya, dan baris berikutnya mendefinisikan pernyataan SQL, sekali lagi seperti yang Anda lihat sebelumnya. Namun, kali ini mendefinisikan pernyataan SQL Insert Into . Contoh berikut menunjukkan sintaks Insert Into umum pernyataan:

INSERT INTO table (column1, column2, column3, ...) VALUES (value1, value2, value3, ...)

Dengan kata lain, Anda menentukan tabel yang akan disisipkan, lalu mencantumkan kolom yang akan disisipkan, lalu mencantumkan nilai yang akan disisipkan. (Seperti disebutkan sebelumnya, SQL tidak peka huruf besar/kecil tetapi beberapa orang memanfaatkan kata kunci untuk mempermudah membaca perintah.)

Kolom yang Anda sisipkan sudah tercantum dalam perintah — (Title, Genre, Year). Bagian yang menarik adalah bagaimana Anda mendapatkan nilai dari kotak teks ke bagian VALUES perintah. Alih-alih nilai aktual, Anda akan melihat @0, , @1dan @2, yang tentu saja merupakan tempat penampung. Saat Anda menjalankan perintah (pada db.Execute baris), Anda meneruskan nilai yang Anda dapatkan dari kotak teks.

Penting! Ingatlah bahwa satu-satunya cara Anda harus menyertakan data yang dimasukkan secara online oleh pengguna dalam pernyataan SQL adalah dengan menggunakan tempat penampung, seperti yang Anda lihat di sini (VALUES(@0, @1, @2)). Jika Anda menggabungkan input pengguna ke dalam pernyataan SQL, Anda membuka diri Anda untuk serangan injeksi SQL, seperti yang dijelaskan dalam Dasar-Dasar Formulir di Halaman Web ASP.NET (tutorial sebelumnya).

Masih di if dalam blok, tambahkan baris berikut setelah db.Execute baris:

Response.Redirect("~/Movies");

Setelah film baru dimasukkan ke dalam database, baris ini akan melompat Anda (mengalihkan) ke halaman Film sehingga Anda bisa melihat film yang baru saja Anda masukkan. Operator ~ berarti "akar situs web." (Operator ~ hanya berfungsi di halaman ASP.NET, bukan dalam HTML umumnya.)

Blok kode lengkap terlihat seperti contoh ini:

@{
    var title = "";
    var genre = "";
    var year = "";

    if(IsPost){
        title = Request.Form["title"];
        genre = Request.Form["genre"];
        year = Request.Form["year"];

        var db = Database.Open("WebPagesMovies");
        var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
        db.Execute(insertCommand, title, genre, year);
        Response.Redirect("~/Movies");
    }
}

Menguji Perintah Sisipkan (Sejauh Ini)

Anda belum selesai, tapi sekarang saat yang tepat untuk menguji.

Dalam tampilan pohon file di WebMatrix, klik kanan halaman AddMovie.cshtml lalu klik Luncurkan di browser.

Cuplikan layar memperlihatkan halaman 'Tambahkan Film' di browser.

(Jika Anda berakhir dengan halaman yang berbeda di browser, pastikan urlnya adalah http://localhost:nnnnn/AddMovie), di mana nnnnn adalah nomor port yang Anda gunakan.)

Apakah Anda mendapatkan halaman kesalahan? Jika demikian, baca dengan hati-hati dan pastikan bahwa kode terlihat persis seperti yang tercantum sebelumnya.

Masukkan film dalam formulir — misalnya, gunakan "Citizen Kane", "Drama", dan "1941". (Atau apa pun.) Lalu klik Tambahkan Film.

Jika semuanya berjalan dengan baik, Anda dialihkan ke halaman Film . Pastikan film baru Anda terdaftar.

Halaman film memperlihatkan film yang baru ditambahkan

Memvalidasi Input Pengguna

Kembali ke halaman AddMovie , atau jalankan lagi. Masukkan film lain, tetapi kali ini, masukkan judul saja — misalnya, masukkan "Singin' in the Rain". Lalu klik Tambahkan Film.

Anda dialihkan ke halaman Film lagi. Anda dapat menemukan film baru, tetapi tidak lengkap.

Halaman film memperlihatkan film baru yang kehilangan beberapa nilai

Saat Anda membuat tabel Film , Anda secara eksplisit mengatakan bahwa tidak ada bidang yang bisa null. Di sini Anda memiliki formulir entri untuk film baru, dan Anda membiarkan bidang kosong. Itu kesalahan.

Dalam hal ini, database tidak benar-benar menaikkan (atau melemparkan) kesalahan. Anda tidak menyediakan genre atau tahun, sehingga kode di halaman AddMovie memperlakukan nilai-nilai tersebut sebagai apa yang disebut string kosong. Ketika perintah SQL Insert Into berjalan, bidang genre dan tahun tidak memiliki data yang berguna di dalamnya, tetapi tidak null.

Jelas, Anda tidak ingin membiarkan pengguna memasukkan informasi film setengah kosong ke dalam database. Solusinya adalah memvalidasi input pengguna. Awalnya, validasi hanya akan memastikan bahwa pengguna telah memasukkan nilai untuk semua bidang (artinya, tidak ada yang berisi string kosong).

Tip

String Null dan Kosong

Dalam pemrograman, ada perbedaan antara gagasan yang berbeda tentang "tidak ada nilai." Secara umum, nilai null jika belum pernah ditetapkan atau diinisialisasi dengan cara apa pun. Sebaliknya, variabel yang mengharapkan data karakter (string) dapat diatur ke string kosong. Dalam hal ini, nilainya tidak null; ini baru saja secara eksplisit diatur ke string karakter yang panjangnya nol. Kedua pernyataan ini menunjukkan perbedaannya:

var firstName;       // Not set, so its value is null
var firstName = "";  // Explicitly set to an empty string -- not null

Ini sedikit lebih rumit dari itu, tetapi poin pentingnya adalah bahwa null mewakili semacam status yang tidak ditentukan.

Sekarang dan kemudian penting untuk memahami dengan tepat kapan nilai null dan ketika itu hanya string kosong. Di kode untuk halaman AddMovie , Anda mendapatkan nilai kotak teks dengan menggunakan Request.Form["title"] dan sebagainya. Saat halaman pertama kali berjalan (sebelum Anda mengklik tombol), nilainya Request.Form["title"] null. Tetapi saat Anda mengirimkan formulir, Request.Form["title"] mendapatkan nilai kotak title teks. Ini tidak jelas, tetapi kotak teks kosong tidak null; itu hanya memiliki string kosong di dalamnya. Jadi, ketika kode berjalan sebagai respons terhadap klik tombol, Request.Form["title"] memiliki string kosong di dalamnya.

Mengapa perbedaan ini penting? Saat Anda membuat tabel Film , Anda secara eksplisit mengatakan bahwa tidak ada bidang yang bisa null. Tetapi di sini Anda memiliki formulir entri untuk film baru, dan Anda membiarkan bidang kosong. Anda cukup mengharapkan database untuk mengeluh ketika Anda mencoba menyimpan film baru yang tidak memiliki nilai untuk genre atau tahun. Tapi itulah intinya — bahkan jika Anda membiarkan kotak teks tersebut kosong, nilainya tidak null; string kosong. Akibatnya, Anda dapat menyimpan film baru ke database dengan kolom ini kosong — tetapi tidak null! — nilai. Oleh karena itu, Anda harus memastikan bahwa pengguna tidak mengirimkan string kosong, yang dapat Anda lakukan dengan memvalidasi input pengguna.

Pembantu Validasi

ASP.NET Halaman Web menyertakan pembantu — pembantu Validation — yang dapat Anda gunakan untuk memastikan bahwa pengguna memasukkan data yang memenuhi kebutuhan Anda. Pembantu Validation adalah salah satu pembantu yang dibangun untuk ASP.NET Halaman Web, sehingga Anda tidak perlu menginstalnya sebagai paket dengan menggunakan NuGet, cara Anda menginstal pembantu Gravatar dalam tutorial sebelumnya.

Untuk memvalidasi input pengguna, Anda akan melakukan hal berikut:

  • Gunakan kode untuk menentukan bahwa Anda ingin memerlukan nilai dalam kotak teks di halaman.
  • Uji kode sehingga informasi film ditambahkan ke database hanya jika semuanya divalidasi dengan benar.
  • Tambahkan kode ke markup untuk menampilkan pesan kesalahan.

Di blok kode di halaman AddMovie , tepat di bagian atas sebelum deklarasi variabel, tambahkan kode berikut:

Validation.RequireField("title", "You must enter a title");
Validation.RequireField("genre", "Genre is required");
Validation.RequireField("year", "You haven't entered a year");

Anda memanggil Validation.RequireField sekali untuk setiap bidang (<input> elemen) di mana Anda ingin memerlukan entri. Anda juga dapat menambahkan pesan kesalahan kustom untuk setiap panggilan, seperti yang Anda lihat di sini. (Kami memvariasikan pesan hanya untuk menunjukkan bahwa Anda dapat menempatkan apa pun yang Anda suka di sana.)

Jika ada masalah, Anda ingin mencegah informasi film baru disisipkan ke dalam database. if(IsPost) Di blok , gunakan && (LOGICAL AND) untuk menambahkan kondisi lain yang menguji Validation.IsValid(). Setelah selesai, seluruh if(IsPost) blok terlihat seperti kode ini:

if(IsPost && Validation.IsValid()){
    title = Request.Form["title"];
    genre = Request.Form["genre"];
    year = Request.Form["year"];

    var db = Database.Open("WebPagesMovies");
    var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
    db.Execute(insertCommand, title, genre, year);
    Response.Redirect("~/Movies");
}

Jika ada kesalahan validasi dengan salah satu bidang yang Anda daftarkan dengan menggunakan pembantu Validation , metode mengembalikan Validation.IsValid false. Dan dalam hal ini, tidak ada kode dalam blok itu yang akan berjalan, sehingga tidak ada entri film yang tidak valid yang akan dimasukkan ke dalam database. Dan tentu saja Anda tidak dialihkan ke halaman Film .

Blok kode lengkap, termasuk kode validasi, sekarang terlihat seperti contoh ini:

@{
    Validation.RequireField("title", "You must enter a title");
    Validation.RequireField("genre", "Genre is required");
    Validation.RequireField("year", "You haven't entered a year");

    var title = "";
    var genre = "";
    var year = "";

    if(IsPost && Validation.IsValid()){
       title = Request.Form["title"];
       genre = Request.Form["genre"];
       year = Request.Form["year"];

       var db = Database.Open("WebPagesMovies");
       var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
       db.Execute(insertCommand, title, genre, year);
       Response.Redirect("~/Movies");
    }
}

Menampilkan Kesalahan Validasi

Langkah terakhir adalah menampilkan pesan kesalahan apa pun. Anda dapat menampilkan pesan individual untuk setiap kesalahan validasi, atau Anda dapat menampilkan ringkasan, atau keduanya. Untuk tutorial ini, Anda akan melakukan keduanya sehingga Anda dapat melihat cara kerjanya.

Di samping setiap <input> elemen yang Sedang Anda validasi, panggil Html.ValidationMessage metode dan berikan nama elemen yang <input> Anda validasi. Anda menempatkan metode tepat Html.ValidationMessage di tempat Anda ingin pesan kesalahan muncul. Saat halaman berjalan, Html.ValidationMessage metode merender <span> elemen tempat kesalahan validasi akan terjadi. (Jika tidak ada kesalahan, <span> elemen dirender, tetapi tidak ada teks di dalamnya.)

Ubah markup di halaman sehingga menyertakan Html.ValidationMessage metode untuk masing-masing dari tiga <input> elemen di halaman, seperti contoh ini:

<p><label for="title">Title:</label>
     <input type="text" name="title" value="@Request.Form["title"]" />
      @Html.ValidationMessage("title")
  </p>

  <p><label for="genre">Genre:</label>
     <input type="text" name="genre" value="@Request.Form["genre"]" />
      @Html.ValidationMessage("genre")
  </p>

  <p><label for="year">Year:</label>
     <input type="text" name="year" value="@Request.Form["year"]" />
      @Html.ValidationMessage("year")
  </p>

Untuk melihat cara kerja ringkasan, tambahkan juga markup dan kode berikut tepat setelah <h1>Add a Movie</h1> elemen di halaman:

@Html.ValidationSummary()

Secara default, Html.ValidationSummary metode menampilkan semua pesan validasi dalam daftar ( <ul> elemen yang ada di dalam <div> elemen). Seperti halnya Html.ValidationMessage metode , markup untuk ringkasan validasi selalu dirender; jika tidak ada kesalahan, tidak ada item daftar yang dirender.

Ringkasan dapat menjadi cara alternatif untuk menampilkan pesan validasi alih-alih dengan menggunakan Html.ValidationMessage metode untuk menampilkan setiap kesalahan khusus bidang. Atau Anda dapat menggunakan ringkasan dan detailnya. Atau Anda dapat menggunakan Html.ValidationSummary metode untuk menampilkan kesalahan umum lalu menggunakan panggilan individual Html.ValidationMessage untuk menampilkan detail.

Halaman lengkap sekarang terlihat seperti contoh ini:

@{
    Validation.RequireField("title", "You must enter a title");
    Validation.RequireField("genre", "Genre is required");
    Validation.RequireField("year", "You haven't entered a year");

    var title = "";
    var genre = "";
    var year = "";

    if(IsPost && Validation.IsValid()){
       title = Request.Form["title"];
       genre = Request.Form["genre"];
       year = Request.Form["year"];

       var db = Database.Open("WebPagesMovies");
       var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
       db.Execute(insertCommand, title, genre, year);
       Response.Redirect("~/Movies");
    }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Add a Movie</title>
</head>
<body>
  <h1>Add a Movie</h1>
  @Html.ValidationSummary()
  <form method="post">
    <fieldset>
      <legend>Movie Information</legend>
      <p><label for="title">Title:</label>
         <input type="text" name="title" value="@Request.Form["title"]" />
          @Html.ValidationMessage("title")
      </p>

      <p><label for="genre">Genre:</label>
         <input type="text" name="genre" value="@Request.Form["genre"]" />
          @Html.ValidationMessage("genre")
      </p>

      <p><label for="year">Year:</label>
         <input type="text" name="year" value="@Request.Form["year"]" />
          @Html.ValidationMessage("year")
      </p>

      <p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
    </fieldset>
  </form>
</body>
</html>

Itu saja. Anda sekarang dapat menguji halaman dengan menambahkan film tetapi meninggalkan satu atau beberapa bidang. Saat Anda melakukannya, Anda akan melihat tampilan kesalahan berikut:

Tambahkan halaman Film memperlihatkan pesan kesalahan validasi

Menata Pesan Kesalahan Validasi

Anda dapat melihat bahwa ada pesan kesalahan, tetapi pesan tersebut tidak benar-benar menonjol dengan sangat baik. Namun, ada cara mudah untuk menata pesan kesalahan.

Untuk menata pesan kesalahan individual yang ditampilkan oleh Html.ValidationMessage, buat kelas gaya CSS bernama field-validation-error. Untuk menentukan tampilan ringkasan validasi, buat kelas gaya CSS bernama validation-summary-errors.

Untuk melihat cara kerja teknik ini, tambahkan <style> elemen di dalam bagian <head> halaman. Kemudian tentukan kelas gaya bernama field-validation-error dan validation-summary-errors yang berisi aturan berikut:

<head>
  <meta charset="utf-8" />
  <title>Add a Movie</title>
  <style type="text/css">
    .field-validation-error {
      font-weight:bold;
      color:red;
      background-color:yellow;
     }
    .validation-summary-errors{
      border:2px dashed red;
      color:red;
      background-color:yellow;
      font-weight:bold;
      margin:12px;
    }
  </style>
</head>

Biasanya Anda mungkin akan memasukkan informasi gaya ke dalam file .css terpisah, tetapi untuk kesederhanaan Anda dapat meletakkannya di halaman untuk saat ini. (Nanti dalam set tutorial ini, Anda akan memindahkan aturan CSS ke file .css terpisah.)

Jika ada kesalahan validasi, Html.ValidationMessage metode merender <span> elemen yang menyertakan class="field-validation-error". Dengan menambahkan definisi gaya untuk kelas tersebut, Anda dapat mengonfigurasi seperti apa pesan tersebut. Jika ada kesalahan, metode ini ValidationSummary juga secara dinamis merender atribut class="validation-summary-errors".

Jalankan halaman lagi dan sengaja tinggalkan beberapa bidang. Kesalahan sekarang lebih terlihat. (Bahkan, mereka berlebihan, tetapi itu hanya untuk menunjukkan apa yang dapat Anda lakukan.)

Tambahkan halaman Film memperlihatkan kesalahan validasi yang telah ditata

Salah satu langkah terakhir adalah membuatnya nyaman untuk sampai ke halaman AddMovie dari daftar film asli.

Buka kembali halaman Film . Setelah tag penutup </div> yang mengikuti pembantu WebGrid , tambahkan markup berikut:

<p>
  <a href="~/AddMovie">Add a movie</a>
</p>

Seperti yang Anda lihat sebelumnya, ASP.NET menafsirkan ~ operator sebagai akar situs web. Anda tidak perlu menggunakan ~ operator; Anda dapat menggunakan markup <a href="./AddMovie">Add a movie</a> atau cara lain untuk menentukan jalur yang dipahami HTML. ~ Tetapi operator adalah pendekatan umum yang baik ketika Anda membuat tautan untuk halaman Razor, karena membuat situs lebih fleksibel - jika Anda memindahkan halaman saat ini ke subfolder, tautan masih akan masuk ke halaman AddMovie. (Ingat bahwa ~ operator hanya berfungsi di halaman .cshtml . ASP.NET memahaminya, tetapi ini bukan HTML standar.)

Setelah selesai, jalankan halaman Film . Ini akan terlihat seperti halaman ini:

Halaman film dengan tautan ke halaman 'Tambah Film'

Klik tautan Tambahkan film untuk memastikan bahwa itu masuk ke halaman AddMovie .

Berikutnya

Dalam tutorial berikutnya, Anda akan mempelajari cara mengizinkan pengguna mengedit data yang sudah ada di database.

Daftar Lengkap untuk Halaman AddMovie

@{

    Validation.RequireField("title", "You must enter a title");
    Validation.RequireField("genre", "Genre is required");
    Validation.RequireField("year", "You haven't entered a year");

    var title = "";
    var genre = "";
    var year = "";

    if(IsPost && Validation.IsValid()){
       title = Request.Form["title"];
       genre = Request.Form["genre"];
       year = Request.Form["year"];

       var db = Database.Open("WebPagesMovies");
       var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
       db.Execute(insertCommand, title, genre, year);
       Response.Redirect("~/Movies");
    }
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a Movie</title>
      <style type="text/css">
    .field-validation-error {
      font-weight:bold;
      color:red;
      background-color:yellow;
     }
    .validation-summary-errors{
      border:2px dashed red;
      color:red;
      background-color:yellow;
      font-weight:bold;
      margin:12px;
    }
  </style>
</head>
<body>
  <h1>Add a Movie</h1>
  @Html.ValidationSummary()
  <form method="post">
    <fieldset>
      <legend>Movie Information</legend>
      <p><label for="title">Title:</label>
         <input type="text" name="title" value="@Request.Form["title"]" />
          @Html.ValidationMessage("title")
      </p>

      <p><label for="genre">Genre:</label>
         <input type="text" name="genre" value="@Request.Form["genre"]" />
         @Html.ValidationMessage("genre")
      </p>

      <p><label for="year">Year:</label>
         <input type="text" name="year" value="@Request.Form["year"]" />
          @Html.ValidationMessage("year")
      </p>

      <p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
    </fieldset>
  </form>
</body>
</html>

Sumber Daya Tambahan