Bagikan melalui

Memperkenalkan Halaman Web ASP.NET - Menghapus Data Database

oleh Tom FitzMacken

Tutorial ini menunjukkan kepada Anda cara menghapus entri database individual. Ini mengasumsikan Anda telah menyelesaikan seri melalui Memperbarui Data Database di Halaman Web ASP.NET.

Yang akan Anda pelajari:

  • Cara memilih catatan individual dari daftar rekaman.
  • Cara menghapus satu rekaman dari database.
  • Cara memeriksa apakah tombol tertentu diklik dalam formulir.

Fitur/teknologi yang dibahas:

  • Pembantu WebGrid .
  • Perintah SQL Delete .
  • Metode Database.Execute untuk menjalankan perintah SQL Delete .

Apa yang akan Anda Bangun

Dalam tutorial sebelumnya, Anda mempelajari cara memperbarui rekaman database yang sudah ada. Tutorial ini serupa, kecuali bahwa alih-alih memperbarui rekaman, Anda akan menghapusnya. Prosesnya jauh sama, kecuali penghapusannya lebih sederhana, sehingga tutorial ini akan singkat.

Di halaman Film, Anda akan memperbarui pembantu WebGrid sehingga menampilkan tautan Hapus di samping setiap film untuk menyertai tautan Edit yang Anda tambahkan sebelumnya.

Halaman film memperlihatkan tautan Hapus untuk setiap film

Seperti halnya pengeditan, saat Anda mengklik tautan Hapus , itu membawa Anda ke halaman yang berbeda, di mana informasi film sudah dalam formulir:

Hapus halaman Film dengan film ditampilkan

Anda kemudian dapat mengklik tombol untuk menghapus rekaman secara permanen.

Anda akan mulai dengan menambahkan tautan Hapus ke pembantu WebGrid . Tautan ini mirip dengan tautan Edit yang Anda tambahkan dalam tutorial sebelumnya.

Buka file Movies.cshtml.

WebGrid Ubah markup di isi halaman dengan menambahkan kolom. Berikut markup yang dimodifikasi:

@grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    columns: grid.Columns(
grid.Column(format: @<a href="~/EditMovie?id=@item.ID">Edit</a>),
grid.Column("Title"),
grid.Column("Genre"),
grid.Column("Year"),
grid.Column(format: @<a href="~/DeleteMovie?id=@item.ID">Delete</a>)
    )
)

Kolom baru adalah kolom ini:

grid.Column(format: @<a href="~/DeleteMovie?id=@item.ID">Delete</a>)

Cara kisi dikonfigurasi, kolom Edit paling kiri di kisi dan kolom Hapus paling kanan. (Ada koma setelah Year kolom sekarang, jika Anda tidak menyadarinya.) Tidak ada yang istimewa tentang ke mana kolom tautan ini pergi, dan Anda bisa dengan mudah menempatkannya di samping satu sama lain. Dalam hal ini, mereka terpisah untuk membuatnya lebih sulit untuk dicampur.

Halaman film dengan tautan Edit dan Detail ditandai untuk memperlihatkan bahwa mereka tidak bersebelahan satu sama lain

Kolom baru memperlihatkan tautan (<a> elemen) yang teksnya bertuliskan "Hapus". Target tautan (atributnya href ) adalah kode yang pada akhirnya diselesaikan ke sesuatu seperti URL ini, dengan id nilai yang berbeda untuk setiap film:

http://localhost:43097/DeleteMovie?id=7

Tautan ini akan memanggil halaman bernama DeleteMovie dan meneruskannya ID film yang Anda pilih.

Tutorial ini tidak akan menjelaskan secara rinci tentang bagaimana tautan ini dibangun, karena hampir identik dengan tautan Edit dari tutorial sebelumnya (Memperbarui Data Database di Halaman Web ASP.NET).

Membuat Halaman Hapus

Sekarang Anda dapat membuat halaman yang akan menjadi target untuk tautan Hapus di kisi.

Catatan

Penting Teknik pertama-tama memilih rekaman yang akan dihapus lalu menggunakan halaman dan tombol terpisah untuk mengonfirmasi prosesnya sangat penting bagi keamanan. Seperti yang telah Anda baca dalam tutorial sebelumnya, membuat perubahan apa pun pada situs web Anda harus selalu dilakukan menggunakan formulir - yaitu, menggunakan operasi HTTP POST. Jika Anda memungkinkan untuk mengubah situs hanya dengan mengklik tautan (yaitu, menggunakan operasi GET), orang dapat membuat permintaan sederhana ke situs Anda dan menghapus data Anda. Bahkan perayap mesin pencarian yang mengindeks situs Anda secara tidak sengaja dapat menghapus data hanya dengan mengikuti tautan.

Saat aplikasi Anda memungkinkan orang mengubah rekaman, Anda harus menyajikan catatan kepada pengguna untuk diedit. Tetapi Anda mungkin tergoda untuk melewati langkah ini untuk menghapus rekaman. Jangan lewati langkah itu. (Juga berguna bagi pengguna untuk melihat rekaman dan mengonfirmasi bahwa mereka menghapus catatan yang mereka inginkan.)

Dalam set tutorial berikutnya, Anda akan melihat cara menambahkan fungsionalitas masuk sehingga pengguna harus masuk sebelum menghapus rekaman.

Buat halaman bernama DeleteMovie.cshtml dan ganti apa yang ada di file dengan markup berikut:

<html>
<head>
  <title>Delete a Movie</title>
</head>
<body>
      <h1>Delete a Movie</h1>
        @Html.ValidationSummary()
      <p><a href="~/Movies">Return to movie listing</a></p>

      <form method="post">
        <fieldset>
        <legend>Movie Information</legend>

        <p><span>Title:</span>
         <span>@title</span></p>

        <p><span>Genre:</span>
         <span>@genre</span></p>

        <p><span>Year:</span>
          <span>@year</span></p>

        <input type="hidden" name="movieid" value="@movieId" />
        <p><input type="submit" name="buttonDelete" value="Delete Movie" /></p>
        </fieldset>
      </form>
    </body>
</html>

Markup ini seperti halaman EditMovie , kecuali bahwa alih-alih menggunakan kotak teks (<input type="text">), markup menyertakan <span> elemen. Tidak ada yang bisa diedit di sini. Yang harus Anda lakukan adalah menampilkan detail film sehingga pengguna dapat memastikan bahwa mereka menghapus film yang tepat.

Markup sudah berisi tautan yang memungkinkan pengguna kembali ke halaman daftar film.

Seperti di halaman EditMovie , ID film yang dipilih disimpan di bidang tersembunyi. (Ini diteruskan ke halaman di tempat pertama sebagai nilai string kueri.) Ada Html.ValidationSummary panggilan yang akan menampilkan kesalahan validasi. Dalam hal ini, kesalahannya mungkin tidak ada ID film yang diteruskan ke halaman atau ID film tidak valid. Situasi ini dapat terjadi jika seseorang menjalankan halaman ini tanpa terlebih dahulu memilih film di halaman Film .

Keterangan tombol adalah Hapus Film, dan atribut namanya diatur ke buttonDelete. Atribut name akan digunakan dalam kode untuk mengidentifikasi tombol yang mengirimkan formulir.

Anda harus menulis kode ke 1) membaca detail film ketika halaman pertama kali ditampilkan dan 2) benar-benar menghapus film ketika pengguna mengklik tombol .

Menambahkan Kode untuk Membaca Satu Film

Di bagian atas halaman DeleteMovie.cshtml , tambahkan blok kode berikut:

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

    if(!IsPost){
        if(!Request.QueryString["ID"].IsEmpty() && Request.QueryString["ID"].IsInt()){
            movieId = Request.QueryString["ID"];
            var db = Database.Open("WebPagesMovies");
            var dbCommand = "SELECT * FROM Movies WHERE ID = @0";
            var row = db.QuerySingle(dbCommand, movieId);
            if(row != null) {
                title = row.Title;
                genre = row.Genre;
                year = row.Year;
            }
            else{
                Validation.AddFormError("No movie was found for that ID.");
            }
        }
        else{
            Validation.AddFormError("No movie was found for that ID.");
        }
    }
}

Markup ini sama dengan kode yang sesuai di halaman EditMovie . Ini mendapatkan ID film dari string kueri dan menggunakan ID untuk membaca rekaman dari database. Kode ini mencakup tes validasi (IsInt() dan row != null) untuk memastikan bahwa ID film yang diteruskan ke halaman valid.

Ingatlah bahwa kode ini hanya boleh berjalan pertama kali halaman berjalan. Anda tidak ingin membaca ulang rekaman film dari database saat pengguna mengklik tombol Hapus Film . Oleh karena itu, kode untuk membaca film berada di dalam tes yang mengatakan if(!IsPost) — yaitu, jika permintaan bukan operasi pasca (pengiriman formulir).

Menambahkan Kode untuk Menghapus Film terpilih

Untuk menghapus film saat pengguna mengklik tombol , tambahkan kode berikut tepat di dalam kurung @ tutup blok:

if(IsPost && !Request["buttonDelete"].IsEmpty()){
    movieId = Request.Form["movieId"];
    var db = Database.Open("WebPagesMovies");
    var deleteCommand = "DELETE FROM Movies WHERE ID = @0";
    db.Execute(deleteCommand, movieId);
    Response.Redirect("~/Movies");
}

Kode ini mirip dengan kode untuk memperbarui rekaman yang ada, tetapi lebih sederhana. Kode pada dasarnya menjalankan pernyataan SQL Delete .

Seperti di halaman EditMovie , kode berada di if(IsPost) blok. Kali ini, if() kondisinya sedikit lebih rumit:

if(IsPost && !Request["buttonDelete"].IsEmpty())

Ada dua kondisi di sini. Yang pertama adalah bahwa halaman sedang dikirimkan, seperti yang telah Anda lihat sebelumnya — if(IsPost).

Kondisi kedua adalah !Request["buttonDelete"].IsEmpty(), yang berarti bahwa permintaan memiliki objek bernama buttonDelete. Diakuinya, ini adalah cara tidak langsung untuk menguji tombol mana yang mengirimkan formulir. Jika formulir berisi beberapa tombol kirim, hanya nama tombol yang diklik yang muncul dalam permintaan. Oleh karena itu, secara logis, jika nama tombol tertentu muncul dalam permintaan — atau seperti yang dinyatakan dalam kode, jika tombol tersebut tidak kosong — itu adalah tombol yang mengirimkan formulir.

Operator && berarti "dan" (logis AND). Oleh karena itu seluruh if kondisi adalah ...

Permintaan ini adalah postingan (bukan permintaan pertama kali)

AND

Tombol buttonDeleteadalah tombol yang mengirimkan formulir.

Formulir ini (sebenarnya, halaman ini) hanya berisi satu tombol, sehingga pengujian tambahan untuk buttonDelete secara teknis tidak diperlukan. Namun, Anda akan melakukan operasi yang akan menghapus data secara permanen. Jadi, Anda ingin sepasti mungkin bahwa Anda melakukan operasi hanya ketika pengguna telah secara eksplisit memintanya. Misalnya, Anda memperluas halaman ini nanti dan menambahkan tombol lain ke dalamnya. Bahkan kemudian, kode yang menghapus film hanya akan berjalan jika tombol buttonDelete diklik.

Seperti di halaman EditMovie , Anda mendapatkan ID dari bidang tersembunyi lalu menjalankan perintah SQL. Sintaks untuk Delete pernyataan adalah:

DELETE FROM table WHERE ID = value

Sangat penting untuk menyertakan WHERE klausul dan ID. Jika Anda meninggalkan klausa WHERE, semua rekaman dalam tabel akan dihapus. Seperti yang telah Anda lihat, Anda meneruskan nilai ID ke perintah SQL dengan menggunakan tempat penampung.

Menguji Proses Penghapusan Film

Sekarang Anda dapat menguji. Jalankan halaman Film , dan klik Hapus di samping film. Saat halaman DeleteMovie muncul, klik Hapus Film.

Hapus halaman Film dengan tombol Hapus Film disorot

Saat Anda mengklik tombol , kode akan menghapus film dan kembali ke daftar film. Di sana Anda dapat mencari film yang dihapus dan mengonfirmasi bahwa film tersebut telah dihapus.

Berikutnya

Tutorial berikutnya menunjukkan kepada Anda cara memberikan semua halaman di situs Anda tampilan dan tata letak umum.

Daftar Lengkap untuk Halaman Film (Diperbarui dengan Hapus Tautan)

@{
    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.QueryString["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(format: @<a href="~/EditMovie?id=@item.ID">Edit</a>),
                grid.Column("Title"),
                grid.Column("Genre"),
                grid.Column("Year"),
                grid.Column(format: @<a href="~/DeleteMovie?id=@item.ID">Delete</a>)
            )
        )
      </div>
      <p>
        <a href="~/AddMovie">Add a movie</a>
      </p>
    </body>
</html>

Daftar Lengkap untuk Halaman DeleteMovie

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

    if(!IsPost){
        if(!Request.QueryString["ID"].IsEmpty() && Request.QueryString["ID"].IsInt()){
            movieId = Request.QueryString["ID"];
            var db = Database.Open("WebPagesMovies");
            var dbCommand = "SELECT * FROM Movies WHERE ID = @0";
            var row = db.QuerySingle(dbCommand, movieId);
            if(row != null) {
                title = row.Title;
                genre = row.Genre;
                year = row.Year;
            }
            else{
                Validation.AddFormError("No movie was found for that ID.");
            }
        }
        else{
            Validation.AddFormError("No movie was found for that ID.");
        }
    }

    if(IsPost && !Request["buttonDelete"].IsEmpty()){
        movieId = Request.Form["movieId"];
        var db = Database.Open("WebPagesMovies");
        var deleteCommand = "DELETE FROM Movies WHERE ID = @0";
        db.Execute(deleteCommand, movieId);
        Response.Redirect("~/Movies");
    }
}
<html>
<head>
  <title>Delete a Movie</title>
</head>
<body>
      <h1>Delete a Movie</h1>
        @Html.ValidationSummary()
      <p><a href="~/Movies">Return to movie listing</a></p>

      <form method="post">
        <fieldset>
        <legend>Movie Information</legend>

        <p><span>Title:</span>
         <span>@title</span></p>

        <p><span>Genre:</span>
         <span>@genre</span></p>

        <p><span>Year:</span>
          <span>@year</span></p>

        <input type="hidden" name="movieid" value="@movieId" />
        <p><input type="submit" name="buttonDelete" value="Delete Movie" /></p>
        </fieldset>
        <p><a href="~/Movies">Return to movie listing</a></p>
      </form>
    </body>
</html>

Sumber Tambahan

SebelumnyaBerikutnya

  • Last updated on