Teil 5: Bearbeiten von Formularen und Vorlagen

  • Artikel

von Jon Galloway

Der MVC Music Store ist eine Tutorialanwendung, die schrittweise erläutert, wie ASP.NET MVC und Visual Studio für die Webentwicklung verwendet werden.

Der MVC Music Store ist eine einfache Beispielspeicherimplementierung, die Musikalben online verkauft und grundlegende Websiteverwaltung, Benutzeranmeldung und Warenkorbfunktionen implementiert.

In dieser Tutorialreihe werden alle Schritte zum Erstellen der ASP.NET MVC Music Store-Beispielanwendung beschrieben. Teil 5 behandelt Bearbeitungsformulare und Vorlagen.

Im vergangenen Kapitel haben wir Daten aus unserer Datenbank geladen und angezeigt. In diesem Kapitel aktivieren wir auch die Bearbeitung der Daten.

Erstellen des StoreManagerController

Zunächst erstellen wir einen neuen Controller namens StoreManagerController. Für diesen Controller nutzen wir die Gerüstbaufeatures, die im ASP.NET MVC 3 Tools Update verfügbar sind. Legen Sie die Optionen für das Dialogfeld Controller hinzufügen wie unten dargestellt fest.

Screenshot des Dialogfelds

Wenn Sie auf die Schaltfläche Hinzufügen klicken, sehen Sie, dass der ASP.NET MVC 3-Gerüstbaumechanismus eine menge Arbeit für Sie erledigt:

  • Es erstellt den neuen StoreManagerController mit einer lokalen Entity Framework-Variablen.
  • Dem Ordner "Ansichten" des Projekts wird ein StoreManager-Ordner hinzugefügt.
  • Sie fügt die Ansicht Create.cshtml, Delete.cshtml, Details.cshtml, Edit.cshtml und Index.cshtml hinzu, die stark in die Album-Klasse eingegeben wurde.

Screenshot des Fensters Store Manager Controller, das in Microsoft Visual Web Developer 2010 Express nach der Erstellung geöffnet wurde.

Die neue StoreManager-Controllerklasse enthält CRUD-Controlleraktionen (Erstellen, Lesen, Aktualisieren, Löschen), die wissen, wie sie mit der Album-Modellklasse arbeiten und unseren Entity Framework-Kontext für den Datenbankzugriff verwenden.

Ändern einer Gerüstansicht

Es ist wichtig zu beachten, dass dieser Code zwar für uns generiert wurde, es sich jedoch um Standard-ASP.NET MVC-Code handelt, genau wie wir es in diesem Tutorial geschrieben haben. Es soll Ihnen die Zeit sparen, die Sie für das Schreiben von Boilerplate-Controllercode und das manuelle Erstellen der stark typisierten Ansichten aufwenden würden, aber dies ist nicht die Art von generiertem Code, den Sie möglicherweise im Voraus mit düsteren Warnungen in Kommentaren darüber gesehen haben, wie Sie den Code nicht ändern dürfen. Dies ist Ihr Code, und es wird erwartet, dass Sie ihn ändern.

Beginnen wir also mit einer schnellen Bearbeitung der StoreManager-Indexansicht (/Views/StoreManager/Index.cshtml). In dieser Ansicht wird eine Tabelle angezeigt, in der die Alben in unserem Store mit Den Links Bearbeiten/Details/Löschen aufgelistet sind und die öffentlichen Eigenschaften des Albums enthalten sind. Wir entfernen das AlbumArtUrl-Feld, da es in dieser Anzeige nicht sehr nützlich ist. <Entfernen Sie im Tabellenabschnitt> des Ansichtscodes die th>- und <td-Elemente>, die <AlbumArtUrl-Verweise umgeben, wie in den hervorgehobenen Zeilen unten angegeben:

<table>
    <tr>
        <th>
            Genre
        </th>
        <th>
            Artist
        </th>
        <th>
            Title
        </th>
        <th>
            Price
        </th>
        <th>
            AlbumArtUrl
        </th>
        <th></th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Genre.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Artist.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.AlbumArtUrl)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
            @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
        </td>
    </tr>
}
</table>

Der geänderte Ansichtscode wird wie folgt angezeigt:

@model IEnumerable<MvcMusicStore.Models.Album>
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
    @Html.ActionLink("Create
New", "Create")
</p>
<table>
    <tr>
        <th>
            Genre
        </th>
        <th>
            Artist
        </th>
        <th>
            Title
        </th>
        <th>
            Price
        </th>
        <th></th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Genre.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Artist.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
            @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
        </td>
    </tr>
}
</table>

Ein erster Blick auf den Store-Manager

Führen Sie nun die Anwendung aus, und navigieren Sie zu /StoreManager/. Dadurch wird der soeben geänderte Store Manager-Index mit einer Liste der Alben im Store mit Links zu Bearbeiten, Details und Löschen angezeigt.

Screenshot des Store-Manager-Index mit einer Liste von Alben im Store mit Links zu Bearbeiten, Details und Löschen.

Wenn Sie auf den Link Bearbeiten klicken, wird ein Bearbeitungsformular mit Feldern für das Album angezeigt, einschließlich Dropdownlisten für Genre und Künstler.

Screenshot des Dialogfelds Bearbeiten mit Dropdownfeldern für Genre und Künstler und Textfelder für Künstler, Titel, Preis und Albumart U R L

Klicken Sie unten auf den Link "Zurück zur Liste", und klicken Sie dann auf den Link Details für ein Album. Dadurch werden die Detailinformationen für ein einzelnes Album angezeigt.

Screenshot des Dialogfelds Details mit den festgelegten Werten für Genre, Künstler, Titel, Preis und Album Art U R L

Klicken Sie erneut auf den Link Zurück zur Liste, und klicken Sie dann auf einen Link Löschen. Daraufhin wird ein Bestätigungsdialogfeld mit den Albumdetails und der Frage angezeigt, ob wir es wirklich löschen möchten.

Screenshot des Dialogfelds

Wenn Sie unten auf die Schaltfläche Löschen klicken, wird das Album gelöscht, und Sie kehren zur Seite Index zurück, auf der das gelöschte Album angezeigt wird.

Wir sind nicht mit dem Store-Manager fertig, aber wir verfügen über funktionierenden Controller und Anzeigecode für die CRUD-Vorgänge, von denen aus gestartet werden soll.

Anzeigen des Store Manager Controller-Codes

Der Store Manager-Controller enthält eine große Menge an Code. Lassen Sie uns dies von oben nach unten durchgehen. Der Controller enthält einige Standardnamespaces für einen MVC-Controller sowie einen Verweis auf unseren Models-Namespace. Der Controller verfügt über eine private instance von MusicStoreEntities, die von jeder der Controlleraktionen für den Datenzugriff verwendet wird.

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.Models;
 
namespace MvcMusicStore.Controllers
{ 
    public class StoreManagerController : Controller
    {
        private MusicStoreEntities db = new MusicStoreEntities();

Aktionen für Den Store-Manager-Index und -Details

Die Indexansicht ruft eine Liste von Alben ab, einschließlich der Informationen zu jedem Album, auf die verwiesen wird, auf die auf das Genre und den Künstler verwiesen wird, wie wir zuvor bei der Arbeit an der Store Browse-Methode gesehen haben. Die Indexansicht folgt den Verweisen auf die verknüpften Objekte, sodass sie den Genre- und Künstlernamen jedes Albums anzeigen kann, sodass der Controller effizient ist und diese Informationen in der ursprünglichen Anforderung abfragt.

//
// GET: /StoreManager/
public ViewResult Index()
{
    var albums = db.Albums.Include(a => a.Genre).Include(a => a.Artist);
    return View(albums.ToList());
}

Die Detailcontrolleraktion des StoreManager-Controllers funktioniert genau mit der Aktion "Store Controller-Details", die wir zuvor geschrieben haben: Sie fragt das Album nach ID mithilfe der Find()-Methode ab und gibt es dann an die Ansicht zurück.

//
// GET: /StoreManager/Details/5
public ViewResult Details(int id)
{
    Album album = db.Albums.Find(id);
    return View(album);
}

Aktionsmethoden erstellen

Die Create-Aktionsmethoden unterscheiden sich etwas von denen, die wir bisher gesehen haben, da sie Formulareingaben verarbeiten. Wenn ein Benutzer /StoreManager/Create/ zum ersten Mal besucht, wird ein leeres Formular angezeigt. Diese HTML-Seite enthält ein <Formularelement> , das Dropdown- und Textfeldeingabeelemente enthält, in denen sie die Details des Albums eingeben können.

Nachdem der Benutzer die Werte des Albumformulars ausgefüllt hat, kann er auf die Schaltfläche "Speichern" klicken, um diese Änderungen zurück an unsere Anwendung zu übermitteln, um sie in der Datenbank zu speichern. Wenn der Benutzer die Schaltfläche "Speichern" drückt, führt das <Formular> einen HTTP-POST zurück an die URL /StoreManager/Create/ aus und sendet die <Formularwerte> als Teil des HTTP-POST.

ASP.NET MVC ermöglicht es uns, die Logik dieser beiden URL-Aufrufszenarien einfach aufzuteilen, indem wir zwei separate "Create"-Aktionsmethoden in unserer StoreManagerController-Klasse implementieren können : eine, um die anfängliche HTTP-GET-Navigation zur URL /StoreManager/Create/ zu verarbeiten, und die andere, um die HTTP-POST der übermittelten Änderungen zu verarbeiten.

Übergeben von Informationen an eine Ansicht mithilfe von ViewBag

Wir haben viewBag weiter oben in diesem Tutorial verwendet, aber nicht viel darüber gesprochen. Mit ViewBag können wir Informationen an die Ansicht übergeben, ohne ein stark typisiertes Modellobjekt zu verwenden. In diesem Fall muss die Aktion HTTP-GET-Controller bearbeiten sowohl eine Liste der Genres als auch Künstler an das Formular übergeben, um die Dropdowns aufzufüllen, und die einfachste Möglichkeit besteht darin, sie als ViewBag-Elemente zurückzugeben.

ViewBag ist ein dynamisches Objekt, was bedeutet, dass Sie ViewBag.Foo oder ViewBag.YourNameHere eingeben können, ohne Code zum Definieren dieser Eigenschaften zu schreiben. In diesem Fall verwendet der Controllercode ViewBag.GenreId und ViewBag.ArtistId, sodass die mit dem Formular übermittelten Dropdownwerte GenreId und ArtistId sind. Dies sind die Albumeigenschaften, die sie festlegen.

Diese Dropdownwerte werden mithilfe des SelectList-Objekts an das Formular zurückgegeben, das nur für diesen Zweck erstellt wird. Dies geschieht mithilfe von Code wie folgt:

ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name");

Wie Sie im Code der Aktionsmethode sehen können, werden drei Parameter verwendet, um dieses Objekt zu erstellen:

  • Die Liste der Elemente, die in der Dropdownliste angezeigt werden. Beachten Sie, dass dies nicht nur eine Zeichenfolge ist , wir übergeben eine Liste von Genres.
  • Der nächste Parameter, der an selectList übergeben wird, ist der ausgewählte Wert. So weiß selectList, wie ein Element in der Liste vorab ausgewählt werden kann. Dies ist leichter zu verstehen, wenn wir uns das Bearbeitungsformular ansehen, das ziemlich ähnlich ist.
  • Der letzte Parameter ist die anzuzeigende Eigenschaft. In diesem Fall gibt dies an, dass die eigenschaft Genre.Name dem Benutzer angezeigt wird.

Vor diesem Hintergrund ist die HTTP-GET Create-Aktion ziemlich einfach: Zwei SelectLists werden dem ViewBag hinzugefügt, und kein Modellobjekt wird an das Formular übergeben (da es noch nicht erstellt wurde).

//
// GET: /StoreManager/Create
public ActionResult Create()
{
    ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name");
    ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name");
    return View();
}

HTML-Hilfsprogramme zum Anzeigen der Dropdownliste in der Erstellungsansicht

Da wir darüber gesprochen haben, wie die Dropdownwerte an die Ansicht übergeben werden, werfen wir einen kurzen Blick auf die Ansicht, um zu sehen, wie diese Werte angezeigt werden. Im Ansichtscode (/Views/StoreManager/Create.cshtml) wird der folgende Aufruf ausgeführt, um die Dropdownliste Genre anzuzeigen.

@Html.DropDownList("GenreId",
String.Empty)

Dies wird als HTML-Hilfsprogramm bezeichnet – eine Hilfsmethode, die eine allgemeine Ansichtsaufgabe ausführt. HTML-Hilfsprogramme sind sehr nützlich, um unseren Ansichtscode präzise und lesbar zu halten. Das Html.DropDownList-Hilfsprogramm wird von ASP.NET MVC bereitgestellt, aber wie wir später sehen werden, ist es möglich, eigene Hilfsprogramme zum Anzeigen von Code zu erstellen, die wir in unserer Anwendung wiederverwenden.

Dem Html.DropDownList-Aufruf müssen lediglich zwei Dinge mitgeteilt werden: Wo die anzuzeigende Liste abgerufen werden soll, und welcher Wert (falls vorhanden) vorab ausgewählt werden soll. Der erste Parameter GenreId weist die DropDownList an, entweder im Modell oder im ViewBag nach einem Wert namens GenreId zu suchen. Der zweite Parameter wird verwendet, um den Wert anzugeben, der als ursprünglich in der Dropdownliste ausgewählt angezeigt werden soll. Da es sich bei diesem Formular um ein Formular erstellen handelt, muss kein Wert vorgewählt werden, und String.Empty wird übergeben.

Behandeln der Werte des gebuchten Formulars

Wie bereits erläutert, gibt es zwei Aktionsmethoden, die jedem Formular zugeordnet sind. Die erste verarbeitet die HTTP-GET-Anforderung und zeigt das Formular an. Die zweite verarbeitet die HTTP-POST-Anforderung, die die übermittelten Formularwerte enthält. Beachten Sie, dass die Controlleraktion über ein [HttpPost]-Attribut verfügt, das ASP.NET MVC angibt, dass sie nur auf HTTP-POST-Anforderungen reagieren soll.

//
// POST: /StoreManager/Create
[HttpPost]
public ActionResult Create(Album album)
{
    if (ModelState.IsValid)
    {
        db.Albums.Add(album);
        db.SaveChanges();
        return RedirectToAction("Index");  
    }
    ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
    ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
    return View(album);
}

Diese Aktion hat vier Zuständigkeiten:

    1. Lesen der Formularwerte
    1. Überprüfen, ob die Formularwerte Validierungsregeln bestehen
    1. Wenn die Formularübermittlung gültig ist, speichern Sie die Daten, und zeigen Sie die aktualisierte Liste an.
    1. Wenn die Formularübermittlung ungültig ist, können Sie das Formular mit Überprüfungsfehlern erneut anzeigen.

Lesen von Formularwerten mit Modellbindung

Die Controlleraktion verarbeitet eine Formularübermittlung, die Werte für GenreId und ArtistId (aus der Dropdownliste) sowie Textfeldwerte für Title, Price und AlbumArtUrl enthält. Obwohl es möglich ist, direkt auf Formularwerte zuzugreifen, besteht ein besserer Ansatz darin, die in ASP.NET MVC integrierten Modellbindungsfunktionen zu verwenden. Wenn eine Controlleraktion einen Modelltyp als Parameter verwendet, versucht ASP.NET MVC, ein Objekt dieses Typs mithilfe von Formulareingaben (sowie Routen- und Abfragezeichenfolgenwerten) aufzufüllen. Dazu sucht er nach Werten, deren Namen mit den Eigenschaften des Modellobjekts übereinstimmen. Beim Festlegen des GenreId-Werts des neuen Album-Objekts wird z. B. nach einer Eingabe mit dem Namen GenreId gesucht. Wenn Sie Ansichten mit den Standardmethoden in ASP.NET MVC erstellen, werden die Formulare immer mithilfe von Eigenschaftsnamen als Eingabefeldnamen gerendert, sodass die Feldnamen einfach übereinstimmen.

Überprüfen des Modells

Das Modell wird mit einem einfachen Aufruf von ModelState.IsValid überprüft. Wir haben unserer Album-Klasse noch keine Validierungsregeln hinzugefügt – wir werden dies in ein bisschen tun . Daher hat diese Überprüfung im Moment nicht viel zu tun. Wichtig ist, dass sich diese ModelStat.IsValid-Überprüfung an die Validierungsregeln anpasst, die wir in unserem Modell anwenden, sodass zukünftige Änderungen an Validierungsregeln keine Aktualisierungen des Controlleraktionscodes erfordern.

Speichern der übermittelten Werte

Wenn die Formularübermittlung die Überprüfung besteht, ist es an der Zeit, die Werte in der Datenbank zu speichern. Mit Entity Framework müssen Sie dazu lediglich das Modell der Albums-Auflistung hinzufügen und SaveChanges aufrufen.

db.Albums.Add(album);
db.SaveChanges();

Entity Framework generiert die entsprechenden SQL-Befehle, um den Wert beizubehalten. Nachdem wir die Daten gespeichert haben, werden wir zurück zur Liste der Alben weitergeleitet, damit wir unser Update sehen können. Dazu wird RedirectToAction mit dem Namen der Controlleraktion zurückgegeben, die angezeigt werden soll. In diesem Fall ist dies die Index-Methode.

Anzeigen ungültiger Formularübermittlungen mit Validierungsfehlern

Im Falle einer ungültigen Formulareingabe werden die Dropdownwerte dem ViewBag hinzugefügt (wie im FALL HTTP-GET), und die gebundenen Modellwerte werden zur Anzeige an die Ansicht zurückgegeben. Validierungsfehler werden automatisch mit dem @Html.ValidationMessageFor HTML-Hilfsprogramm angezeigt.

Testen des Formulars erstellen

Um dies zu testen, führen Sie die Anwendung aus, und navigieren Sie zu /StoreManager/Create/. Dadurch wird das leere Formular angezeigt, das von der StoreController Create HTTP-GET-Methode zurückgegeben wurde.

Geben Sie einige Werte ein, und klicken Sie auf die Schaltfläche Erstellen, um das Formular zu übermitteln.

Screenshot des Formulars erstellen mit den Dropdownfeldern

Screenshot der Albumliste, in der das neue Album hervorgehoben ist, das aus dem Formular

Behandeln von Bearbeitungen

Das Aktionspaar Bearbeiten (HTTP-GET und HTTP-POST) ähnelt sehr den Methoden der Aktion Create, die wir uns gerade angesehen haben. Da das Bearbeitungsszenario die Arbeit mit einem vorhandenen Album umfasst, lädt die Edit HTTP-GET-Methode das Album basierend auf dem Parameter "id", der über die Route übergeben wird. Dieser Code zum Abrufen eines Albums von AlbumId ist identisch mit dem Code, den wir zuvor in der Controlleraktion Details untersucht haben. Wie bei der Create/HTTP-GET-Methode werden die Dropdownwerte über viewBag zurückgegeben. Dies ermöglicht es uns, ein Album als Unser Modellobjekt an die Ansicht zurückzugeben (die stark für die Album-Klasse eingegeben wird), während wir zusätzliche Daten (z. B. eine Liste von Genres) über den ViewBag übergeben.

//
// GET: /StoreManager/Edit/5
public ActionResult Edit(int id)
{
    Album album = db.Albums.Find(id);
    ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
    ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
    return View(album);
}

Die Aktion HTTP-POST bearbeiten ähnelt der Aktion HTTP-POST erstellen. Der einzige Unterschied besteht darin, dass der Datenbank kein neues Album hinzugefügt wird. Album-Auflistung: Wir suchen die aktuelle instance des Albums mithilfe von db. Eintrag(Album) und festlegen des Zustands auf Geändert. Dies teilt Entity Framework mit, dass wir ein vorhandenes Album ändern und nicht ein neues Album erstellen.

//
// POST: /StoreManager/Edit/5
[HttpPost]
public ActionResult Edit(Album album)
{
    if (ModelState.IsValid)
    {
        db.Entry(album).State = EntityState.Modified;
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
    ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
    return View(album);
}

Wir können dies testen, indem Wir die Anwendung ausführen und zu /StoreManger/ navigieren und dann auf den Link Bearbeiten für ein Album klicken.

Screenshot der Albumliste mit der Option

Dadurch wird das Bearbeitungsformular angezeigt, das von der Edit HTTP-GET-Methode angezeigt wird. Geben Sie einige Werte ein, und klicken Sie auf die Schaltfläche Speichern.

Screenshot des Formulars

Dadurch wird das Formular veröffentlicht, die Werte gespeichert und zur Liste Album zurückgegeben, wobei angezeigt wird, dass die Werte aktualisiert wurden.

Screenshot der Albumliste mit den neu aktualisierten Werten für das Album, hervorgehoben mit einem roten Pfeil.

Behandeln von Löschungen

Der Löschvorgang folgt demselben Muster wie Bearbeiten und Erstellen, wobei eine Controlleraktion zum Anzeigen des Bestätigungsformulars und eine andere Controlleraktion zum Verarbeiten der Formularübermittlung verwendet wird.

Die Aktion "HTTP-GET Controller löschen" entspricht genau der vorherigen Aktion "Store Manager Details".The HTTP-GET delete controller action is exactly the previous Store Manager Details controller action.

//
// GET: /StoreManager/Delete/5
 
public ActionResult Delete(int id)
{
    Album album = db.Albums.Find(id);
    return View(album);
}

Wir zeigen ein Formular an, das stark in einen Albumtyp eingegeben ist, indem wir die Inhaltsvorlage Ansicht löschen verwenden.

Screenshot des Löschformulars mit den Details des ausgewählten Albums und veranschaulichung der Inhaltsvorlage

Die Vorlage Löschen zeigt alle Felder für das Modell an, aber wir können dies erheblich vereinfachen. Ändern Sie den Ansichtscode in /Views/StoreManager/Delete.cshtml wie folgt.

@model MvcMusicStore.Models.Album
@{
    ViewBag.Title = "Delete";
}
<h2>Delete Confirmation</h2>
<p>Are you sure you want to delete the album titled 
   <strong>@Model.Title</strong>?
</p>
@using (Html.BeginForm()) {
    <p>
        <input type="submit" value="Delete" />
    </p>
    <p>
        @Html.ActionLink("Back to
List", "Index")
    </p>
}

Dadurch wird eine vereinfachte Bestätigung zum Löschen angezeigt.

Screenshot des Formulars

Wenn Sie auf die Schaltfläche Löschen klicken, wird das Formular zurück an den Server gesendet, auf dem die DeleteConfirmed-Aktion ausgeführt wird.

//
// POST: /StoreManager/Delete/5
[HttpPost, ActionName("Delete")]
public ActionResult DeleteConfirmed(int id)
{            
    Album album = db.Albums.Find(id);
    db.Albums.Remove(album);
    db.SaveChanges();
    return RedirectToAction("Index");
}

Unsere HTTP-POST-Löschcontrolleraktion führt die folgenden Aktionen aus:

    1. Lädt das Album nach ID.
    1. Löscht es im Album und speichert Änderungen.
    1. Leitet an den Index um, wobei angezeigt wird, dass das Album aus der Liste entfernt wurde.

Um dies zu testen, führen Sie die Anwendung aus, und navigieren Sie zu /StoreManager. Wählen Sie ein Album aus der Liste aus, und klicken Sie auf den Link Löschen.

Screenshot der Albumliste mit der Option

Daraufhin wird der Bestätigungsbildschirm löschen angezeigt.

Screenshot des Dialogfelds

Wenn Sie auf die Schaltfläche Löschen klicken, wird das Album entfernt, und wir kehren zur Seite Store Manager Index zurück, auf der angezeigt wird, dass das Album gelöscht wurde.

Screenshot des Albumlistenbildschirms, der zeigt, dass das gelöschte Album nicht mehr in der Albumliste enthalten ist, hervorgehoben mit einem roten Pfeil.

Verwenden eines benutzerdefinierten HTML-Hilfsprogrammes zum Abschneiden von Text

Es gibt ein potenzielles Problem mit unserer Store Manager-Indexseite. Die Eigenschaften Albumtitel und Künstlername können beide lang genug sein, um die Tabellenformatierung auszulösen. Wir erstellen ein benutzerdefiniertes HTML-Hilfsprogramm, damit wir diese und andere Eigenschaften in unseren Ansichten problemlos abschneiden können.

Screenshot der Albumliste mit zwei langen Künstlernamen und zwei langen Albumnamen, die in roten Rechtecks hervorgehoben sind.

Die Razor-Syntax @helper hat es ziemlich einfach gemacht, ihre eigenen Hilfsfunktionen für die Verwendung in Ihren Ansichten zu erstellen. Öffnen Sie die Ansicht /Views/StoreManager/Index.cshtml, und fügen Sie den folgenden Code direkt hinter der @model Zeile hinzu.

@helper Truncate(string
input, int length)
 {
    if (input.Length <= length) {
        @input
    } else {
        @input.Substring(0, length)<text>...</text>
    }
}

Diese Hilfsmethode nimmt eine Zeichenfolge und eine maximale Länge an. Wenn der angegebene Text kürzer als die angegebene Länge ist, gibt das Hilfsprogramm ihn unverändert aus. Wenn es länger ist, wird der Text abgeschnitten und "..." für den Rest.

Jetzt können wir mit unserem Hilfsprogramm "Abschneiden" sicherstellen, dass sowohl die Eigenschaften Albumtitel als auch Künstlername weniger als 25 Zeichen lang sind. Der vollständige Ansichtscode mit unserem neuen Abschneiden-Hilfsprogramm wird unten angezeigt.

@model IEnumerable<MvcMusicStore.Models.Album>
@helper Truncate(string input, int length)
 {
    if (input.Length <= length) {
        @input
    } else {
        @input.Substring(0, length)<text>...</text>
    }
}
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
    @Html.ActionLink("Create
New", "Create")
</p>
<table>
    <tr>
        <th>
            Genre
        </th>
        <th>
            Artist
        </th>
        <th>
            Title
        </th>
        <th>
            Price
        </th>
        <th></th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Genre.Name)
        </td>
        <td>
            @Truncate(item.Artist.Name, 25)
        </td>
        <td>
            @Truncate(item.Title, 25)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
            @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
        </td>
    </tr>
}
</table>

Wenn wir nun die URL /StoreManager/ durchsuchen, werden die Alben und Titel unter unseren maximalen Längen gehalten.

Screenshot der Albumliste mit zwei langen Künstlernamen und zwei langen Albumnamen nach dem Abschneiden-Hilfsprozess in roten Rechtecken hervorgehoben.

Hinweis: Dies zeigt den einfachen Fall, in dem ein Hilfsprogramm in einer Ansicht erstellt und verwendet wird. Weitere Informationen zum Erstellen von Hilfsprogrammen, die Sie auf ihrer gesamten Website verwenden können, finden Sie in meinem Blogbeitrag: http://bit.ly/mvc3-helper-options

ZurückWeiter