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.

von Toni Patton am 8. November 2005 , 10:18 Uhr

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

<%@ Page Language="vb" Debug="true" %> 
<%@ Import Namespace="System.Data" %> 
<%@ Import Namespace="System.Data.SqlClient" %> 
<html><head><title>TechRepublic.com – Images</title> 
<script runat="server">
Const connString as String = "Data Source=localhost;Initial
Catalog=Northwind;User Id=username;Password=password;"
Sub Page_Load(sender As Object, e As EventArgs)
If (Not Page.IsPostBack) ThenBindDataSet(String.Empty)
End If
End Sub
Sub BindDataSet(searchString As String)
Dim conn As SqlConnection
Dim comm As SqlCommand
Dim sql As String
If (searchString = String.Empty) Thensql = "SELECT ID, Name, ContentType, FileSize, Picture, Description " + _
"FROM ImageData ORDER BY Name"
Elsesql = "SELECT ID, Name, ContentType, FileSize, Picture, Description " + _
"FROM ImageData WHERE Name Like '%" + searchString + _
"%' OR Description Like '%" + searchString + "%' ORDER BY Name"
End If
Tryconn = New SqlConnection(connString)comm = New SqlCommand(sql, conn)conn.Open()dgImages.DataSource = comm.ExecuteReader()dgImages.DataBind()
Catch SQLexc As SqlExceptionResponse.Write("Data error occurred: " & SQLexc.ToString())
End Try
End Sub
Function ImageLink(strArgument) as String
Return ("displayImageVB.aspx?id=" & strArgument)
End Function
Sub dgImages_Edit(sender As Object, e As DataGridCommandEventArgs)dgImages.EditItemIndex = e.Item.ItemIndexBindDataSet(String.Empty)
End Sub
Sub dgImages_Cancel(sender As Object, e As DataGridCommandEventArgs)dgImages.EditItemIndex = -1BindDataSet(String.Empty)
End Sub
Sub dgImages_Update(sender As Object, e As DataGridCommandEventArgs)
Dim strName as String = CType(e.Item.Cells(1).Controls(0), TextBox).Text
Dim strDesc as String = CType(e.Item.Cells(4).Controls(0), TextBox).Text
Dim strSQL as String = "UPDATE [ImageData] SET [Name] = '" + strName + _
"', [Description] = '" + strDesc + "' WHERE [ID] = " + e.Item.Cells(0).Text
Dim conn as New SqlConnection(connString)conn.Open()
Dim comm as SqlCommand = new SqlCommand(strSQL, conn)comm.CommandType = CommandType.Textcomm.ExecuteNonQuery()conn.Close()dgImages.EditItemIndex = -1BindDataSet(String.Empty)
End Sub
Sub dgImages_Delete(sender As Object, e As DataGridCommandEventArgs)
Dim sql as String sql = "DELETE FROM [ImageData] WHERE [ID] = " + e.Item.Cells(0).Text
Dim conn as New SqlConnection(connString)conn.Open()
Dim comm as SqlCommand = new SqlCommand(sql, conn)comm.CommandType = CommandType.Textcomm.ExecuteNonQuery()conn.Close()dgImages.EditItemIndex = -1BindDataSet(String.Empty)
End Sub
Sub AddImage(sender As Object, e As EventArgs)Response.Redirect("addImage.aspx")
End Sub
Sub DoSearch(sender As Object, e As EventArgs)BindDataSet(txtSearch.Text)
End Sub
Sub ClearSearch(sender As Object, e As EventArgs)
If Not (txtSearch.Text = "") ThenBindDataSet(String.Empty)txtSearch.Text = ""
End If
End Sub
</script></head> 
<body style="font: 10pt verdana">
<form id="frmDataGridImages" method="post" runat="server">
<asp:ButtonOnClick="AddImage" Text="Add Image" runat="server" /> 
<asp:TextBox id="txtSearch" runat="server" Width="392px" /> 
<asp:ButtonOnClick="DoSearch" Text="Search" runat="server" /> 
<asp:ButtonOnClick="ClearSearch" Text="Clear" runat="server" /> 
<asp:DataGrid ID="dgImages" AutoGenerateColumns="False" Width="99%" HeaderStyle-BackColor="#000000" HeaderStyle-Font-Bold="True" HeaderStyle-Font-Name="Verdana" HeaderStyle-Font-Size="13px" HeaderStyle-ForeColor="#ffffff" HeaderStyle-HorizontalAlign="Center" ItemStyle-BackColor="Tan" ItemStyle-Font-Name="verdana" ItemStyle-Font-Size="13px" BorderColor="#000000" Runat="server" HorizontalAlign="Center" OnEditCommand="dgImages_Edit" OnCancelCommand="dgImages_Cancel" OnUpdateCommand="dgImages_Update"OnDeleteCommand="dgImages_Delete"> 
<Columns> 
<asp:BoundColumnHeaderText="ID" DataField="ID" ReadOnly="True" ItemStyle-HorizontalAlign="Center" /> 
<asp:BoundColumnHeaderText="Name" DataField="Name" /> 
<asp:BoundColumnHeaderText="Type" DataField="ContentType" ReadOnly="True" ItemStyle-HorizontalAlign="Center" /> 
<asp:BoundColumnHeaderText="Size" DataField="FileSize" DataFormatString="{0} bytes" ReadOnly="True" ItemStyle-HorizontalAlign="Center" /> 
<asp:BoundColumnHeaderText="Description" DataField="Description" /> 
<asp:TemplateColumnHeaderText="Image" ItemStyle-HorizontalAlign="Center"> 
<ItemTemplate> 
<asp:Image Width="50" Height="40" ImageUrl='<%# ImageLink(DataBinder.Eval(Container.DataItem, "ID")) %>‚ Runat=server /> 
</ItemTemplate> 
</asp:TemplateColumn> 
<asp:EditCommandColumnEditText="Edit" ButtonType="PushButton" UpdateText="Update" CancelText="Cancel" ItemStyle-HorizontalAlign="Center" /> 
<asp:ButtonColumn Text="Delete" ButtonType="PushButton" CommandName="Delete" ItemStyle-HorizontalAlign="Center" /> 
</Columns> 
</asp:DataGrid> 
</form>
</body></html>

Listing B enthält den Code in C#.

Listing B

<%@ Page Language="C#" Debug="true" %> 
<%@ Import Namespace="System.Data" %> 
<%@ Import Namespace="System.Data.SqlClient" %> 
<html><head><title>TechRepublic.com – Images</title> 
<script runat="server">
const string connString = "Data Source=Pentium4;Initial Catalog=Northwind;User
Id=sa;Password=;";
private void Page_Load(object sender, System.EventArgs e) {
if (!Page.IsPostBack) {BindDataSet(String.Empty);
} }
public void BindDataSet(string searchString) {SqlConnectionconn;SqlCommandcomm;
string sql;
if (searchString == String.Empty)sql = "SELECT ID, Name, ContentType, FileSize, Picture, Description FROM ImageData ORDER BY Name";
elsesql = "SELECT ID, Name, ContentType, FileSize, Picture, Description FROM ImageData WHERE Name Like '%" + searchString + "%' OR Description Like '%" + searchString + "%' ORDER BY Name";
try {conn = new SqlConnection(connString);comm = new SqlCommand(sql, conn);conn.Open();dgImages.DataSource = comm.ExecuteReader();dgImages.DataBind();
} catch (SqlException ex) {Response.Write("Data Error: " + ex.ToString());
} }
public string ImageLink(object strArgument) {
return ("displayImageVB.aspx?id=" + strArgument.ToString());
}
public void dgImages_Edit(Object sender, DataGridCommandEventArgs e) {dgImages.EditItemIndex = e.Item.ItemIndex;BindDataSet(String.Empty);
}
public void dgImages_Cancel(Object sender, DataGridCommandEventArgs e) {dgImages.EditItemIndex = -1;BindDataSet(String.Empty);
}
public void dgImages_Update(Object sender, DataGridCommandEventArgs e) {
string strName;
string strDesc;
string strSQL;SqlConnectionconn;SqlCommandcomm;strName = ((TextBox)(e.Item.Cells[1].Controls[0])).Text;strDesc = ((TextBox)(e.Item.Cells[4].Controls[0])).Text;strSQL = "UPDATE [ImageData] SET [Name] = '" + strName + "', [Description] = '" + strDesc + "' WHERE [ID] = " + e.Item.Cells[0].Text;conn = new SqlConnection(connString);conn.Open();comm = new SqlCommand(strSQL, conn);comm.CommandType = CommandType.Text;comm.ExecuteNonQuery();conn.Close();dgImages.EditItemIndex = -1;BindDataSet(String.Empty);
}
public void dgImages_Delete(Object sender, DataGridCommandEventArgs e) {
string sql;sql = "DELETE FROM [ImageData] WHERE [ID] = " + e.Item.Cells[0].Text;SqlConnectionconn;SqlCommandcomm;conn = new SqlConnection(connString);conn.Open();comm = new SqlCommand(sql, conn);comm.CommandType = CommandType.Text;comm.ExecuteNonQuery();conn.Close();dgImages.EditItemIndex = -1;BindDataSet(String.Empty);
}
public void AddImage(Object sender, EventArgs e) {Response.Redirect("sqlimagesexample1vb.aspx");
}
public void DoSearch(Object sender, EventArgs e) {BindDataSet(txtSearch.Text);
}
public void ClearSearch(Object sender, EventArgs e) {
if (txtSearch.Text != "") {BindDataSet(String.Empty);txtSearch.Text = "";
} }
</script></head> 
<body style="font: 10pt verdana">
<form id="frmDataGridImages" method="post" runat="server">
<asp:ButtonOnClick="AddImage" Text="Add Image" runat="server" /> 
<asp:TextBox id="txtSearch" runat="server" Width="392px" /> 
<asp:ButtonOnClick="DoSearch" Text="Search" runat="server" /> 
<asp:ButtonOnClick="ClearSearch" Text="Clear" runat="server" /> 
<asp:DataGrid ID="dgImages" AutoGenerateColumns="False" Width="99%" HeaderStyle-BackColor="#000000" HeaderStyle-Font-Bold="True" HeaderStyle-Font-Name="Verdana" HeaderStyle-Font-Size="13px" HeaderStyle-ForeColor="#ffffff" HeaderStyle-HorizontalAlign="Center" ItemStyle-BackColor="Tan" ItemStyle-Font-Name="verdana" ItemStyle-Font-Size="13px" BorderColor="#000000" Runat="server" HorizontalAlign="Center" OnEditCommand="dgImages_Edit" OnCancelCommand="dgImages_Cancel" OnUpdateCommand="dgImages_Update"OnDeleteCommand="dgImages_Delete"> 
<Columns> 
<asp:BoundColumnHeaderText="ID" DataField="ID" ReadOnly="True" ItemStyle-HorizontalAlign="Center" /> 
<asp:BoundColumnHeaderText="Name" DataField="Name" /> 
<asp:BoundColumnHeaderText="Type" DataField="ContentType" ReadOnly="True" ItemStyle-HorizontalAlign="Center" /> 
<asp:BoundColumnHeaderText="Size" DataField="FileSize" DataFormatString="{0}
bytes" ReadOnly="True" ItemStyle-HorizontalAlign="Center" /> 
<asp:BoundColumnHeaderText="Description" DataField="Description" /> 
<asp:TemplateColumnHeaderText="Image" ItemStyle-HorizontalAlign="Center"> 
<ItemTemplate> 
<asp:Image Width="50" Height="40" ImageUrl='<%# ImageLink(DataBinder.Eval(Container.DataItem,"ID")) %>‚ Runat=“server“ /> 
</ItemTemplate> 
</asp:TemplateColumn> 
<asp:EditCommandColumnEditText="Edit" ButtonType="PushButton" UpdateText="Update" CancelText="Cancel" ItemStyle-HorizontalAlign="Center" /> 
<asp:ButtonColumn Text="Delete" ButtonType="PushButton" CommandName="Delete" ItemStyle-HorizontalAlign="Center" /> 
</Columns> 
</asp:DataGrid> 
</form>
</body></html>

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

<%@ Page language="vb" %> 
<%@ IMPORT NAMESPACE="System.Data" %> 
<%@ IMPORT NAMESPACE="System.Data.SqlClient" %> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
<html> 
<head><title>TechRepublic.com – Display Image from SQL Server</title> 
<script language="vb" runat="server">
Sub Page_Load
Dim sql As Stringsql = "SELECT ContentType, FileSize, Picture FROM ImageData " + _
"WHERE ID=" + Request.QueryString("ID")
Dim conn As SqlConnection
Dim comm As SqlCommand
Dim sdr As SqlDataReader
Dim connString As StringconnString = "Data Source=localhost;Initial Catalog=Northwind;User
Id=user;Password=pwd;"
Tryconn = New SqlConnection(connString)comm = New SqlCommand(SQL, conn)conn.Open()sdr = comm.ExecuteReader()sdr.Read()Response.Clear()Response.ContentType = sdr("ContentType").ToString()
Dim b() As Byte
b = CType(sdr("Picture"), Byte())Response.OutputStream.Write(b, 0, CType(sdr("FileSize"), Integer))conn.Close()Response.Flush()
Catch
FinallyResponse.End()
If Not (comm Is Nothing) Thencomm.Dispose()
End If
If (conn.State = ConnectionState.Open) Thenconn.Close()
End If
If Not (conn Is Nothing) Thenconn.Dispose()
End If
End Try
End Sub
</script></head> 
<body>
<form id="frmDisplayImage" method="post" runat="server"></form>
</body></html>

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:

Inhalt

Bessere Benutzeroberfläche mit ASP.NET erstellen

Neueste Kommentare

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

Vielen Dank für Ihren Kommentar.
Ihr Kommentar wurde gespeichert und wartet auf Moderation.

Schreibe einen Kommentar Antworten abbrechen

Neueste Kommentare

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

Vielen Dank für Ihren Kommentar.Ihr Kommentar wurde gespeichert und wartet auf Moderation.

Schreibe einen Kommentar Antworten abbrechen

Vielen Dank für Ihren Kommentar.
Ihr Kommentar wurde gespeichert und wartet auf Moderation.