Bessere Benutzeroberfläche mit ASP.NET erstellen

Um eine Datenbanktabelle mit Bildern pflegen zu können, ist eine sinnvolle Benutzeroberfläche sehr hilfreich. In diesem Artikel geht es darum, wie man eine Administratoroberfläche verbessert um Bilder in einer Datenbank optimal zu nutzen.

Das Einfügen von Bildern in die Datenbanktabelle ist nur einer der Aspekte bei der Verwaltung der Datenbank. Darüber hinaus müssen Benutzer Daten löschen beziehungsweise bearbeiten oder ein Bild finden können. Daher soll hier eine Benutzeroberfläche mit ASP.NET erstellt werden, mit deren Hilfe der Benutzer Bilddaten bearbeiten, Bilder löschen, neue Bilder hinzufügen und nach Bildern suchen kann. Die Benutzeroberfläche nutzt ein DataGrid zur Anzeige einzelner Datenbankeinträge. Jeder DataGrid-Datensatz enthält die folgenden Daten:

  • ID: Eine eindeutige Ganzzahl, die einzelnen Bildern innerhalb der Datenbanktabelle zugewiesen ist.
  • Name: Beim Hinzufügen wird jedem Bild ein Name zugewiesen. Dieser wird über das Upload-Steuerelement ermittelt und besteht aus dem vollständigen Dateinamen inklusive Pfad.
  • Typ: Der Typ des Bildes.
  • Größe: Die Bildgröße in Bytes.
  • Beschreibung: Die Bildbeschreibung, so wie der Benutzer sie eingegeben hat.
  • Bild: Das eigentliche Bild wird im DataGrid in verkleinertem Maßstab angezeigt (je nach Bild). Dies funktioniert wie ein Thumbnail (50 mal 40 Pixel).
  • Buttons: Für jeden Eintrag gibt es Buttons zum Bearbeiten (Edit) und Löschen (Delete). Wenn der Edit-Button angeklickt wird, werden statt des Edit-Buttons die Buttons Update und Cancel angezeigt. Der Update-Button übernimmt die Änderungen dauerhaft und beendet den Edit-Modus. Der Cancel-Button verwirft die Änderungen und beendet den Edit-Modus.

Darüber hinaus ermöglicht es ein Add New Image-Button oberhalb des DataGrid dem Benutzer, der Datenbank neue Bilder hinzuzufügen. Und mithilfe eines Texteingabefeldes und eines Search-Buttons kann der Benutzer die Datenbank durchsuchen. Die Datenbank wird nach Einträgen durchsucht, bei denen der Suchstring, welcher im Textfeld eingegeben war, als der Search-Button angeklickt wurde, im Namen oder der Beschreibung vorkommt. Die Ergebnisse werden im DataGrid angezeigt. Ein zusätzlicher Clear-Button dient zum Löschen des Texteingabefeldes und zur Aktualisierung der Anzeige des DataGrid mit allen Datensätzen.

Listing A enthält den VB.NET-Code für die Seite.

Listing A



Listing B enthält den Code in C#.

Listing B



Hier ein paar Anmerkungen zum Code:

  • Das Attribut des DataGrids OnEditCommand verknüpft seinen Edit-Befehl (EditCommandColumn) mit der angegebenen Subroutine. Dasselbe gilt für OnCancelCommand zum Abbrechen der Bearbeitung, OnUpdateCommand zum Speichern von Änderungen und für OnDeleteCommand zum Löschen einzelner Datensätze.
  • Die asp:BoundColumn-Elemente verknüpfen die DataGrid-Spalten mit bestimmten Spalten des zugehörigen Datensatzes. Das Attribut DataField gibt die zugehörige Spalte an.
  • ASP.NET Button-Steuerelemente ermöglichen die Suchfunktion und das Hinzufügen neuer Elemente. Ihre OnClick-Attribute ermöglichen die Zuweisung einer Subroutine, die beim Anklicken des Buttons ausgeführt wird.
  • Die Subroutine DoSearch durchsucht die Datenbanktabelle nach allen Einträge, bei denen der Suchtext in den Feldern Beschreibung oder Name vorkommt. Die passenden Datensätze werden im DataGrid angezeigt.
  • Die Methode ClearSearch lädt das DataGrid samt aller Daten erneut und löscht das Texteingabefeld für die Suchfunktion.
  • Die Methode BindDataSet kümmert sich um das eigentliche Laden der Daten in das DataGrid und übernimmt einen Suchstring als Parameter. Falls der übergebene Suchstring leer ist, wird der T-SQL-Ausdruck so formuliert, dass alle Datensätze der Datenbanktabelle geladen werden. Ansonsten wird der Suchstring für die Formulierung des T-SQL-Ausdrucks benutzt, um alle passenden Datensätze zu finden und im DataGrid anzuzeigen.

Es fällt vielleicht auf, dass der Add Image-Button den Benutzer auf eine Seite namens AddImage.aspx umleitet. Dies ist die Seite aus einem Artikel, wo es darum ging, der Datenbank ein Bild hinzuzufügen. Außerdem verwendet die Bildspalte des DataGrid eine Seite namens DisplayImage.aspx. Im Wesentlichen besteht die Aufgabe dieser Seite darin, ein Bild aus der Datenbanktabelle zu lesen und es anzuzeigen. Die Seite verwendet die Bild-ID, die über die Variable QueryString übergeben wurde, um das Bild in der Tabelle zu finden. Listing C enthält den VB.NET-Code für diese Seite.

Listing C



Darüber hinaus kann diese Seite in jeder Anwendung genutzt werden um in der Datenbank gespeicherte Bilder anzuzeigen. Das Attribut ImageURL des Steuerelements ASP:Image kann so wie innerhalb des DataGrid verwendet werden:



Außerdem muss man auch die Funktion ImageLink einbauen:



Themenseiten: Big Data, Datenbank, Software

Fanden Sie diesen Artikel nützlich?
Content Loading ...
Whitepaper

ZDNet für mobile Geräte
ZDNet-App für Android herunterladen Lesen Sie ZDNet-Artikel in Google Currents ZDNet-App für iOS

Artikel empfehlen:

Neueste Kommentare 

Noch keine Kommentare zu Bessere Benutzeroberfläche mit ASP.NET erstellen

Kommentar hinzufügen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *