Sdílet prostřednictvím


Představujeme ASP.NET webových stránek – odstranění databázových dat

Tom FitzMacken

V tomto kurzu se dozvíte, jak odstranit jednotlivé položky databáze. Předpokládá se, že jste dokončili řadu prostřednictvím aktualizace dat databáze na webových stránkách ASP.NET.

Naučíte se:

  • Jak vybrat jednotlivý záznam ze seznamu záznamů
  • Odstranění jednoho záznamu z databáze
  • Postup kontroly kliknutí na konkrétní tlačítko ve formuláři

Funkce a technologie probírané:

  • Pomocná rutina WebGrid .
  • Příkaz SQL Delete .
  • Metoda Database.Execute spuštění příkazu SQL Delete .

Co budete vytvářet

V předchozím kurzu jste zjistili, jak aktualizovat existující záznam databáze. Tento kurz je podobný s tím rozdílem, že místo aktualizace záznamu ho odstraníte. Procesy jsou velmi stejné, s tím rozdílem, že odstranění je jednodušší, takže tento kurz bude krátký.

Na stránce Filmy aktualizujete pomocnou rutinu WebGrid tak, aby zobrazovala odkaz Odstranit vedle každého videa, aby doprovázel odkaz Upravit, který jste přidali dříve.

Stránka Filmy zobrazující odkaz Odstranit pro každý film

Stejně jako při úpravách se při kliknutí na odkaz Odstranit dostanete na jinou stránku, kde informace o filmu už jsou ve formuláři:

Odstranit stránku Film se zobrazeným filmem

Potom můžete kliknutím na tlačítko trvale odstranit záznam.

Začnete tím, že do pomocné rutiny přidáte odkaz Odstranit.WebGrid Tento odkaz je podobný odkazu pro úpravy , který jste přidali v předchozím kurzu.

Otevřete soubor Movies.cshtml.

WebGrid Změňte kód v textu stránky přidáním sloupce. Tady je upravený kód:

@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>)
    )
)

Nový sloupec je tento:

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

Způsob konfigurace mřížky, sloupec Upravit je v mřížce úplně vlevo a sloupec Odstranit je úplně vpravo. (Za sloupcem je teď čárka Year , pokud jste si to nevšimli.) Není nic zvláštního o tom, kde se tyto sloupce odkazů nachází, a mohli byste je stejně snadno umístit vedle sebe. V tomto případě jsou oddělené, aby se obtížněji propletily.

Stránka Filmy s odkazy Upravit a Podrobnosti označená tak, aby zobrazovala, že nejsou vedle sebe

Nový sloupec zobrazuje odkaz (<a> prvek), jehož text říká "Delete". Cílem odkazu (jeho href atributu) je kód, který se nakonec přeloží na něco podobného jako tato adresa URL s id hodnotou odlišnou pro každý film:

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

Tento odkaz vyvolá stránku s názvem DeleteMovie a předá jí ID vybraného filmu.

Tento kurz nebude podrobně popisovat, jak se tento odkaz sestaví, protože je téměř stejný jako odkaz Pro úpravy z předchozího kurzu (aktualizace dat databáze ve ASP.NET webových stránkách).

Vytvoření stránky Pro odstranění

Teď můžete vytvořit stránku, která bude cílem odkazu Odstranit v mřížce.

Poznámka:

Důležité : Technika prvního výběru záznamu, který chcete odstranit, a následné použití samostatné stránky a tlačítka k potvrzení, že proces je mimořádně důležitý pro zabezpečení. Jak jste si přečetli v předchozích kurzech, provedení jakékoli změny na vašem webu by se mělo vždy provádět pomocí formuláře – to znamená pomocí operace HTTP POST. Pokud jste web mohli změnit jednoduše tak, že kliknete na odkaz (tj. pomocí operace GET), lidé můžou na váš web jednoduše požádat a odstranit vaše data. Dokonce i prohledávací modul vyhledávacího webu, který indexuje váš web, by mohl neúmyslně odstranit data pouhými odkazy.

Když vaše aplikace umožňuje uživatelům změnit záznam, musíte ho prezentovat uživateli, aby ho mohl upravovat. Tento krok ale může být lákavý přeskočit pro odstranění záznamu. Tento krok ale nepřeskočte. (Je také užitečné, aby uživatelé viděli záznam a potvrdili, že odstraňují záznam, který zamýšleli.)

V další sadě kurzů se dozvíte, jak přidat funkci přihlášení, aby se uživatel musel před odstraněním záznamu přihlásit.

Vytvořte stránku s názvem DeleteMovie.cshtml a nahraďte obsah souboru následujícím kódem:

<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>

Tento kód se podobá stránkám EditMovie s tím rozdílem, že namísto použití textových polí (<input type="text">) revize obsahuje <span> prvky. Není tu nic, co by bylo potřeba upravit. Stačí zobrazit podrobnosti o filmu, aby uživatelé měli jistotu, že odstranili správný film.

Revize už obsahuje odkaz, který uživateli umožní vrátit se na stránku výpisu filmů.

Stejně jako na stránce EditMovie se ID vybraného filmu uloží do skrytého pole. (Předá se na stránku na prvním místě jako hodnota řetězce dotazu.) Html.ValidationSummary Existuje volání, které zobrazí chyby ověření. V takovém případě může být chyba, že se na stránku nepředá žádné ID videa nebo že ID videa je neplatné. K této situaci může dojít, pokud někdo spustil tuto stránku, aniž by nejprve vybral film na stránce Filmy .

Titulek tlačítka je Delete Movie a jeho název atribut je nastaven na buttonDelete. Atribut name se použije v kódu k identifikaci tlačítka, které formulář odeslal.

Při prvním zobrazení stránky budete muset napsat kód na 1) přečíst podrobnosti o filmu a 2) film skutečně odstranit, když uživatel klikne na tlačítko.

Přidání kódu pro čtení jednoho filmu

V horní části stránky DeleteMovie.cshtml přidejte následující blok kódu:

@{
    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.");
        }
    }
}

Tento kód je stejný jako odpovídající kód na stránce EditMovie . Získá ID videa z řetězce dotazu a použije ID ke čtení záznamu z databáze. Kód obsahuje ověřovací test (IsInt() a row != null) a ujistěte se, že ID videa předané na stránku je platné.

Nezapomeňte, že tento kód by se měl spustit jenom při prvním spuštění stránky. Pokud uživatel klikne na tlačítko Odstranit film , nechcete záznam videa z databáze znovu číst. Proto je kód pro čtení videa uvnitř testu, který říká if(!IsPost) , to znamená, že pokud požadavek není po operaci (odeslání formuláře).

Přidání kódu pro odstranění vybraného videa

Pokud chcete video odstranit, když uživatel klikne na tlačítko, přidejte následující kód přímo do uzavírací závorky @ bloku:

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");
}

Tento kód je podobný kódu pro aktualizaci existujícího záznamu, ale jednodušší. Kód v podstatě spouští příkaz SQL Delete .

Stejně jako na stránce EditMovie je kód v if(IsPost) bloku. if() Tentokrát je podmínka trochu složitější:

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

Tady jsou dvě podmínky. První je, že se stránka odesílá, jak jste viděli dříve – if(IsPost).

Druhá podmínka je !Request["buttonDelete"].IsEmpty(), což znamená, že požadavek má objekt s názvem buttonDelete. Je sice nepřímým způsobem testování, které tlačítko odeslalo formulář. Pokud formulář obsahuje více tlačítek pro odeslání, zobrazí se v požadavku jenom název tlačítka, na které jste klikli. Proto logicky, pokud se v požadavku zobrazí název konkrétního tlačítka ( nebo jak je uvedeno v kódu, pokud toto tlačítko není prázdné ), je to tlačítko, které formulář odeslalo.

Operátor && znamená "and" (logický operátor AND). Proto je celá if podmínka ...

Tento požadavek je příspěvek (nikoli první žádost).

A

Tlačítko buttonDeletebylo tlačítko, které formulář odeslalo.

Tento formulář (ve skutečnosti tato stránka) obsahuje pouze jedno tlačítko, takže další test buttonDelete není technicky povinný. Přesto se chystáte provést operaci, která trvale odebere data. Proto chcete mít jistotu, že operaci provádíte jenom tehdy, když si ji uživatel explicitně vyžádal. Předpokládejme například, že jste tuto stránku později rozbalili a přidali do ní další tlačítka. I potom se kód, který odstraní video, spustí pouze v případě, že buttonDelete bylo na tlačítko kliknuto.

Stejně jako na stránce EditMovie získáte ID ze skrytého pole a pak spusťte příkaz SQL. Syntaxe příkazu Delete je:

DELETE FROM table WHERE ID = value

Je důležité zahrnout klauzuli WHERE a ID. Pokud klauzuli WHERE vynecháte, odstraní se všechny záznamy v tabulce. Jak jste viděli, předáte hodnotu ID příkazu SQL pomocí zástupného symbolu.

Testování procesu odstranění videa

Teď můžete testovat. Spusťte stránku Filmy a klikněte na Odstranit vedle videa. Po zobrazení stránky DeleteMovie klikněte na Odstranit film.

Stránka Odstranit film se zvýrazněným tlačítkem Odstranit film

Když kliknete na tlačítko, kód odstraní filmy a vrátí se do výpisu videa. Tam můžete vyhledat odstraněný film a potvrdit, že byl odstraněn.

Připravujeme další

V dalším kurzu se dozvíte, jak dát všem stránkám na webu společný vzhled a rozložení.

@{
    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>

Kompletní výpis stránky 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>

Další materiály