Anpassen der Oberfläche zum Ändern von Daten (VB)

von Scott Mitchell

PDF herunterladen

In diesem Lernprogramm erfahren Sie, wie Sie die Schnittstelle einer bearbeitbaren GridView anpassen, indem Sie die standardmäßigen TextBox- und CheckBox-Steuerelemente durch alternative Eingabewebsteuerelemente ersetzen.

Einführung

Die von den GridView- und DetailsView-Steuerelementen verwendeten BoundFields- und CheckBoxFields vereinfachen das Ändern von Daten aufgrund ihrer Fähigkeit zum Rendern von schreibgeschützten, bearbeitbaren und einfügbaren Schnittstellen. Diese Schnittstellen können gerendert werden, ohne dass zusätzliches deklaratives Markup oder Code hinzugefügt werden muss. Die Schnittstellen "BoundField" und "CheckBoxField" bieten jedoch oft nicht die Anpassungsfähigkeit, die in realen Szenarien benötigt wird. Um die bearbeitbare oder einfügbare Schnittstelle in einer GridView oder DetailsView anzupassen, müssen wir stattdessen ein TemplateField verwenden.

Im vorherigen Lernprogramm haben wir erfahren, wie Sie die Datenänderungsschnittstellen durch Hinzufügen von Validierungswebsteuerelementen anpassen. In diesem Lernprogramm erfahren Sie, wie Sie die eigentlichen Websteuerelemente für die Datensammlung anpassen, indem Sie die standardmäßigen TextBox- und CheckBox-Steuerelemente von BoundField und CheckBoxfield durch alternative Eingabewebsteuerelemente ersetzen. Insbesondere erstellen wir eine bearbeitbare GridView, die es ermöglicht, den Namen, die Kategorie, den Lieferanten und den Status "Nicht mehr verfügbar" eines Produkts zu aktualisieren. Beim Bearbeiten einer bestimmten Zeile werden die Kategorie- und Lieferantenfelder als DropDownLists gerendert, die den Satz verfügbarer Kategorien und Lieferanten enthalten, aus denen Sie auswählen können. Darüber hinaus ersetzen wir das CheckBoxField-Standard-CheckBox-Steuerelement durch ein RadioButtonList-Steuerelement, das zwei Optionen bietet: "Aktiv" und "Eingestellt".

Abbildung 1: Die Bearbeitungsschnittstelle von GridView umfasst DropDownLists und RadioButtons (Klicken, um das Bild in voller Größe anzuzeigen)

Schritt 1: Erstellen der entsprechendenUpdateProductÜberladung

In diesem Lernprogramm erstellen wir eine bearbeitbare GridView, die das Bearbeiten des Namens, der Kategorie, des Lieferanten und des Nicht-Status eines Produkts zulässt. Daher benötigen wir eine UpdateProduct Überladung, die fünf Eingabeparameter akzeptiert: die vier Produktwerte plus die ProductID. Wie in unseren vorherigen Überladungen, wird dies wie folgt aussehen:

1. Rufen Sie die Produktinformationen aus der Datenbank für die angegebene ProductID ab.
2. Aktualisieren Sie die ProductName-Felder, CategoryID-Felder, SupplierID-Felder und Discontinued-Felder
3. Senden Sie die Anforderung zur Aktualisierung über die Methode Update() des TableAdapters an die DAL.

Aus Platzgründen habe ich für diese bestimmte Überladung die Geschäftsregelüberprüfung weggelassen, die sicherstellt, dass ein Produkt, das als nicht mehr eingestellt gekennzeichnet wird, nicht das einzige Produkt ist, das von seinem Lieferanten angeboten wird. Sie können es hinzufügen, wenn Sie es bevorzugen oder idealerweise die Logik in eine separate Methode umgestalten.

Der folgende Code zeigt die neue UpdateProduct Überladung in der ProductsBLL Klasse:

<System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Update, False)>
Public Function UpdateProduct(
    ByVal productName As String, ByVal categoryID As Nullable(Of Integer), 
    ByVal supplierID As Nullable(Of Integer), ByVal discontinued As Boolean, 
    ByVal productID As Integer)
    As Boolean
    Dim products As Northwind.ProductsDataTable = Adapter.GetProductByProductID(productID)
    If products.Count = 0 Then
        Return False
    End If
    Dim product As Northwind.ProductsRow = products(0)
    product.ProductName = productName
    If Not supplierID.HasValue Then
        product.SetSupplierIDNull()
    Else
        product.SupplierID = supplierID.Value
    End If
    If Not categoryID.HasValue Then
        product.SetCategoryIDNull()
    Else
        product.CategoryID = categoryID.Value
    End If
    product.Discontinued = discontinued
    Dim rowsAffected As Integer = Adapter.Update(product)
    Return rowsAffected = 1
End Function

Schritt 2: Erstellen der bearbeitbaren GridView

Nachdem die UpdateProduct Überladung hinzugefügt wurde, können wir unser bearbeitbares GridView erstellen. Öffnen Sie die CustomizedUI.aspx Seite im EditInsertDelete Ordner, und fügen Sie dem Designer ein GridView-Steuerelement hinzu. Erstellen Sie als Nächstes eine neue ObjectDataSource aus dem Smarttag von GridView. Konfigurieren Sie die ObjectDataSource, um Produktinformationen über die Methode der ProductBLL-Klasse GetProducts() abzurufen und Produktdaten mithilfe der vor kurzem erstellten Überladung UpdateProduct zu aktualisieren. Wählen Sie auf den Registerkarten "EINFÜGEN" und "LÖSCHEN" (Keine) aus den Dropdownlisten aus.

Konfigurieren Sie die ObjectDataSource, um die soeben erstellte UpdateProduct-Überladung zu verwenden.

Abbildung 2: Konfigurieren der ObjectDataSource für die Verwendung der gerade erstellten Überladung (UpdateProduct Bilds mit voller Größe klicken)

Wie wir in den Lernprogrammen zur Datenänderung gesehen haben, weist die deklarative Syntax für die von Visual Studio erstellte ObjectDataSource die OldValuesParameterFormatString Eigenschaft zu original_{0}. Dies funktioniert natürlich nicht mit unserer Geschäftslogikebene, da unsere Methoden nicht erwarten, dass der ursprüngliche ProductID Wert übergeben wird. Daher nehmen Sie sich, wie in früheren Tutorials, einen Moment Zeit, um diese Eigenschaftszuweisung aus der deklarativen Syntax zu entfernen, oder legen Sie stattdessen den Wert dieser Eigenschaft auf {0} fest.

Nach dieser Änderung sollte das deklarative Markup von ObjectDataSource wie folgt aussehen:

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    SelectMethod="GetProducts" TypeName="ProductsBLL"
    UpdateMethod="UpdateProduct">
    <UpdateParameters>
        <asp:Parameter Name="productName" Type="String" />
        <asp:Parameter Name="categoryID" Type="Int32" />
        <asp:Parameter Name="supplierID" Type="Int32" />
        <asp:Parameter Name="discontinued" Type="Boolean" />
        <asp:Parameter Name="productID" Type="Int32" />
    </UpdateParameters>
</asp:ObjectDataSource>

Beachten Sie, dass die OldValuesParameterFormatString Eigenschaft entfernt wurde und dass es eine Parameter In der UpdateParameters Auflistung für jede der eingabeparameter gibt, die von unserer UpdateProduct Überladung erwartet werden.

Während die ObjectDataSource so konfiguriert ist, dass nur eine Teilmenge von Produktwerten aktualisiert wird, zeigt GridView derzeit alle Produktfelder an. Nehmen Sie sich einen Moment Zeit, um die GridView so zu bearbeiten, dass:

• Es enthält nur die ProductName, SupplierName, CategoryName BoundFields und das Discontinued-CheckBoxField.
• Die Felder CategoryName und SupplierName sollen links neben dem CheckBoxField Discontinued angezeigt werden.
• Die Eigenschaft der BoundFields CategoryName und SupplierName wird auf "Category" und "Supplier" festgelegt.
• Die Bearbeitungsunterstützung ist aktiviert (aktivieren Sie das Kontrollkästchen "Bearbeitung aktivieren" im Smarttag von GridView).

Nach diesen Änderungen sieht der Designer ähnlich wie in Abbildung 3 aus, wobei die deklarative Syntax von GridView unten dargestellt wird.

Abbildung 3: Entfernen der nicht benötigten Felder aus der GridView (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:BoundField DataField="ProductName"
           HeaderText="ProductName" SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
           ReadOnly="True"
           SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
           ReadOnly="True"
           SortExpression="SupplierName" />
        <asp:CheckBoxField DataField="Discontinued"
           HeaderText="Discontinued" SortExpression="Discontinued" />
    </Columns>
</asp:GridView>

An diesem Punkt ist das schreibgeschützte Verhalten von GridView abgeschlossen. Beim Anzeigen der Daten wird jedes Produkt als Zeile in der GridView gerendert, wobei der Name, die Kategorie, der Lieferant und der Status "Nicht mehr" des Produkts angezeigt werden.

Abbildung 4: Die Read-Only Schnittstelle von GridView ist abgeschlossen (Zum Anzeigen des Bilds mit voller Größe klicken)

Schritt 3: Verwenden einer DropDownList für die Bearbeitungsschnittstellen "Kategorie" und "Lieferanten"

Erinnern Sie sich daran, dass das ProductsRow-Objekt die Eigenschaften CategoryID, CategoryName, SupplierID und SupplierName enthält, die die tatsächlichen Fremdschlüssel-ID-Werte in der Products-Datenbanktabelle und die entsprechenden Name-Werte in den Tabellen Categories und Suppliers bereitstellen. Die ProductRow's CategoryID und SupplierID können sowohl gelesen als auch geschrieben werden, während die CategoryName und die SupplierName Eigenschaften als schreibgeschützt gekennzeichnet sind.

Aufgrund des schreibgeschützten Status der CategoryName- und SupplierName-Eigenschaften wurde die entsprechende ReadOnly-Eigenschaft der dazugehörigen BoundFields auf True gesetzt. Dies verhindert, dass diese Werte beim Bearbeiten einer Zeile geändert werden können. Während der Bearbeitung können wir die ReadOnly-Eigenschaft auf False setzen, wodurch die CategoryName- und SupplierName-BoundFields als TextBoxen dargestellt werden. Dieser Ansatz führt jedoch zu einer Ausnahme, wenn der Benutzer versucht, das Produkt zu aktualisieren, da keine UpdateProduct-Überladung vorhanden ist, die CategoryName- und SupplierName-Eingaben akzeptiert. Tatsächlich möchten wir aus zwei Gründen keine solche Überladung erstellen:

• Die Products Tabelle enthält nicht SupplierName oder CategoryName, sondern SupplierID und CategoryID. Unsere Methode soll diese bestimmten ID-Werte erhalten, nicht die Werte der Nachschlagetabellen.
• Es ist weniger als ideal, dass der Benutzer den Namen des Lieferanten oder der Kategorie eingeben muss, da er die verfügbaren Kategorien und Lieferanten sowie deren korrekte Schreibweisen kennen muss.

Die Felder "Lieferant" und "Kategorie" sollten die Namen der Kategorie und der Lieferanten im schreibgeschützten Modus (wie jetzt) und eine Dropdownliste der anwendbaren Optionen anzeigen, wenn sie bearbeitet werden. Mithilfe einer Dropdownliste kann der Endbenutzer schnell sehen, welche Kategorien und Lieferanten verfügbar sind, um zwischen ihnen auszuwählen und ihre Auswahl einfacher zu treffen.

Um dieses Verhalten bereitzustellen, müssen wir die SupplierName- und CategoryName-BoundFields in TemplateFields umwandeln, deren ItemTemplate die SupplierName- und CategoryName-Werte ausgibt und deren EditItemTemplate ein DropDownList-Steuerelement verwendet, um die verfügbaren Kategorien und Lieferanten zu aufzuzählen.

Hinzufügen derCategoriesundSuppliersDropDownLists

Beginnen Sie, indem Sie die SupplierName und CategoryName "BoundFields" in TemplateFields konvertieren, indem Sie auf den Link "Spalten bearbeiten" im Smarttag von GridView klicken, das BoundField aus der Liste unten links auswählen und auf den Link "Dieses Feld in ein TemplateField konvertieren" klicken. Der Konvertierungsprozess erstellt ein TemplateField mit einem ItemTemplate und einem EditItemTemplate, wie in der folgenden deklarativen Syntax dargestellt:

<asp:TemplateField HeaderText="Category" SortExpression="CategoryName">
    <EditItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Eval("CategoryName") %>'></asp:Label>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Bind("CategoryName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Da das BoundField als schreibgeschützt markiert wurde, enthalten sowohl das ItemTemplate als auch EditItemTemplate eine Bezeichnungs-Websteuerung, dessen Text-Eigenschaft an das anwendbare Datenfeld gebunden ist (CategoryName, in der obigen Syntax). Wir müssen das EditItemTemplate-Label-Websteuerelement durch ein DropDownList-Steuerelement ersetzen.

Wie wir in früheren Lernprogrammen gesehen haben, kann die Vorlage über den Designer oder direkt aus der deklarativen Syntax bearbeitet werden. Um sie über den Designer zu bearbeiten, klicken Sie im Smarttag von GridView auf den Link "Vorlagen bearbeiten", und wählen Sie die Verwendung des Felds EditItemTemplate"Kategorie" aus. Entfernen Sie das Label-Web-Steuerelement, und ersetzen Sie es dann durch ein DropDownList-Steuerelement, wobei Sie die ID-Eigenschaft von DropDownList auf Categories festlegen.

Abbildung 5: Entfernen Sie das TextBox-Steuerelement und fügen Sie ein DropDownList-Steuerelement zum EditItemTemplate hinzu (Klicken, um das Bild in voller Größe anzuzeigen)

Als Nächstes müssen wir die DropDownList mit den verfügbaren Kategorien auffüllen. Klicken Sie im Smarttag von DropDownList auf den Link "Datenquelle auswählen", und wählen Sie die Erstellung einer neuen ObjectDataSource mit dem Namen CategoriesDataSource.

Abbildung 6: Erstellen eines neuen ObjectDataSource-Steuerelements namens CategoriesDataSource (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Damit diese ObjectDataSource alle Kategorien zurückgibt, binden Sie sie an die Methode der CategoriesBLL Klasse GetCategories() .

Abbildung 7: Binden der ObjectDataSource an die CategoriesBLL's-Methode GetCategories() (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Konfigurieren Sie schließlich die Einstellungen von DropDownList so, dass das CategoryName Feld in jeder DropDownList ListItem angezeigt wird, wobei das CategoryID Feld als Wert verwendet wird.

Abbildung 8: Wird das CategoryName Feld angezeigt und als CategoryID Wert verwendet (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Nachdem Sie diese Änderungen vorgenommen haben, enthält das deklarative Markup für das EditItemTemplateCategoryName TemplateField sowohl ein DropDownList-Element als auch eine ObjectDataSource:

<asp:TemplateField HeaderText="Category" SortExpression="CategoryName">
    <EditItemTemplate>
        <asp:DropDownList ID="Categories" runat="server"
          DataSourceID="CategoriesDataSource"
          DataTextField="CategoryName" DataValueField="CategoryID">
        </asp:DropDownList>
        <asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
            OldValuesParameterFormatString="original_{0}"
            SelectMethod="GetCategories" TypeName="CategoriesBLL">
        </asp:ObjectDataSource>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Bind("CategoryName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Wiederholen Sie diese Schritte, um eine DropDownList mit dem Namen Suppliers zum TemplateField SupplierNameEditItemTemplate hinzuzufügen. Dies beinhaltet das Hinzufügen einer DropDownList zum EditItemTemplate und das Erstellen einer weiteren ObjectDataSource. Die Suppliers ObjectDataSource der DropDownList sollte jedoch so konfiguriert werden, dass die Methode der SuppliersBLL Klasse GetSuppliers() aufgerufen wird. Konfigurieren Sie außerdem die Suppliers DropDownList so, dass das CompanyName Feld angezeigt wird, und verwenden Sie das SupplierID Feld als Wert für seine ListItem Werte.

Nachdem Sie die DropDownLists zu den beiden EditItemTemplate Seiten hinzugefügt haben, laden Sie die Seite in einem Browser, und klicken Sie auf die Schaltfläche "Bearbeiten" für das Produkt "Chef Antons Cajun Seasoning". Wie in Abbildung 9 dargestellt, werden die Spalten "Kategorie" und "Lieferanten" des Produkts als Dropdownlisten gerendert, die die verfügbaren Kategorien und Lieferanten enthalten, aus denen Sie auswählen können. Beachten Sie jedoch, dass die ersten Elemente in beiden Dropdown-Listen standardmäßig ausgewählt sind (Getränke für die Kategorie und Exotic Liquids als Lieferanten), obwohl Chef Antons Cajun Seasoning ein von New Orleans Cajun Delights bereitgestelltes Gewürz ist.

Abbildung 9: Das erste Element in der Drop-Down Listen ist standardmäßig ausgewählt (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Wenn Sie auf "Aktualisieren" klicken, werden Sie feststellen, dass die CategoryID- und SupplierID-Werte des Produkts auf NULL festgelegt sind. Beide unerwünschten Verhaltensweisen werden verursacht, da die DropDownLists in den EditItemTemplate s nicht an Datenfelder aus den zugrunde liegenden Produktdaten gebunden sind.

Binden der DropDownLists an dieCategoryIDundSupplierIDDatenfelder

Damit die Kategoriendropdownliste des bearbeiteten Produkts und die Lieferantendropdownliste auf die entsprechenden Werte festgelegt sind und diese Werte beim Klicken auf "Aktualisieren" an die BLL-Methode UpdateProduct zurückgesendet werden, müssen wir die SelectedValue-Eigenschaften der DropDownLists mit den CategoryID- und SupplierID-Datenfeldern mittels bidirektionaler Datenbindung verbinden. Um dies mit der Categories DropDownList zu erreichen, können Sie SelectedValue='<%# Bind("CategoryID") %>' direkt in die deklarative Syntax hinzufügen.

Alternativ können Sie die Databindings von DropDownList festlegen, indem Sie die Vorlage über den Designer bearbeiten und auf den Link "DataBindings bearbeiten" aus dem Smarttag von DropDownList klicken. Geben Sie als Nächstes an, dass die SelectedValue Eigenschaft mit bidirektionalem Datenbindung an das CategoryID Feld gebunden werden soll (siehe Abbildung 10). Wiederholen Sie entweder den deklarativen Prozess oder den Designerprozess, um das SupplierID Datenfeld an die Suppliers DropDownList zu binden.

Abbildung 10: Binden Sie die CategoryID zu der DropDownList SelectedValue Eigenschaft mithilfe von Two-Way-Datenbindung (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Nachdem die Bindungen auf die SelectedValue Eigenschaften der beiden DropDownLists angewendet wurden, werden die Kategorie- und Lieferantenspalten des bearbeiteten Produkts standardmäßig auf die Werte des aktuellen Produkts gesetzt. Beim Klicken auf "Aktualisieren" werden die CategoryID Werte und SupplierID Werte des ausgewählten Dropdownlistenelements an die UpdateProduct Methode übergeben. Abbildung 11 zeigt das Lernprogramm, nachdem die Datenbindungsanweisungen hinzugefügt wurden; beachten Sie, wie die ausgewählten Dropdownlistenelemente für Chef Antons Cajun Seasoning korrekt condiment und New Orleans Cajun Delights sind.

Abbildung 11: Die aktuellen Kategorie- und Lieferantenwerte des bearbeiteten Produkts sind standardmäßig ausgewählt (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Handhabung vonNULLWerten

Die Spalten CategoryID und SupplierID in der Products Tabelle können NULL sein, aber die DropDownLists in den EditItemTemplates enthalten kein Listenelement, um einen NULL Wert darzustellen. Dies hat zwei Folgen:

• Ein Benutzer kann unsere Benutzeroberfläche nicht verwenden, um die Kategorie oder den Lieferanten eines Produkts von einem NULL Wert zu einem NULL Wert zu ändern.
• Wenn ein Produkt über ein NULLCategoryID oder SupplierID verfügt, führt das Klicken auf die Schaltfläche "Bearbeiten" zu einer Ausnahme. Dies liegt daran, dass der NULL von CategoryID (oder SupplierID) in der Bind() Anweisung zurückgegebene Wert nicht einem Wert in der DropDownList zugeordnet wird (die DropDownList löst eine Ausnahme aus, wenn die SelectedValue Eigenschaft auf einen Wert festgelegt ist, der nicht in der Auflistung von Listenelementen enthalten ist).

Um die Werte NULL, CategoryID und SupplierID zu unterstützen, müssen wir jedem DropDownList eine zusätzliche ListItem hinzufügen, um den NULL Wert darzustellen. Im Lernprogramm "Master-/Detailfilterung mit DropDownList" haben wir gesehen, wie ein zusätzliches ListItem einem datengebundenen DropDownList-Objekt hinzugefügt wird, was das Festlegen der Eigenschaft der DropDownList auf AppendDataBoundItems und das manuelle Hinzufügen des zusätzlichen True umfasste. In diesem vorherigen Lernprogramm haben wir jedoch eine ListItem mit einer Value von -1hinzugefügt. Die Datenbindungslogik in ASP.NET konvertiert jedoch automatisch eine leere Zeichenfolge in einen NULL Wert und umgekehrt. Daher soll für dieses Lernprogramm die Value von ListItem eine leere Zeichenfolge sein.

Legen Sie zunächst beide Eigenschaften der DropDownLists AppendDataBoundItems auf True fest. Fügen Sie als Nächstes NULLListItem hinzu, indem Sie das folgende <asp:ListItem>-Element zu jeder DropDownList hinzufügen, damit das deklarative Markup wie folgt aussieht:

<asp:DropDownList ID="Categories" runat="server"
    DataSourceID="CategoriesDataSource" DataTextField="CategoryName"
    DataValueField="CategoryID" SelectedValue='<%# Bind("CategoryID") %>'
    AppendDataBoundItems="True">
    <asp:ListItem Value="">(None)</asp:ListItem>
</asp:DropDownList>

Ich habe mich entschieden, "(None)" als Textwert für diesen ListItemWert zu verwenden, aber Sie können es auch als leere Zeichenfolge ändern, wenn Sie möchten.

Wiederholen Sie diese Schritte für die DropDownList für Lieferanten.

Mit dieser zusätzlichen ListItem kann die Bearbeitungsschnittstelle jetzt den NULL-Werten Felder eines Produkts CategoryID und SupplierID zuweisen, wie in Abbildung 12 dargestellt.

Abbildung 12: Auswählen (Keine) zum Zuweisen eines NULL Werts für die Kategorie oder den Lieferanten eines Produkts (Klicken, um das Bild in voller Größe anzuzeigen)

Schritt 4: Verwenden von RadioButtons für den eingestellten Status

Derzeit wird das Datenfeld der Produkte Discontinued mit einem CheckBoxField ausgedrückt, das ein deaktiviertes Kontrollkästchen für die schreibgeschützten Zeilen und ein aktiviertes Kontrollkästchen für die zu bearbeitende Zeile rendert. Obwohl diese Benutzeroberfläche häufig geeignet ist, können wir sie bei Bedarf mithilfe eines TemplateField anpassen. In diesem Lernprogramm ändern wir das CheckBoxField in ein TemplateField, das ein RadioButtonList-Steuerelement mit zwei Optionen "Aktiv" und "Eingestellt" verwendet, aus denen der Benutzer den Wert des Discontinued Produkts angeben kann.

Konvertieren Sie das Discontinued CheckBoxField in ein TemplateField, das ein ItemTemplate und EditItemTemplate enthält. Beide Vorlagen enthalten ein CheckBox-Steuerelement, dessen Checked-Eigenschaft an das Discontinued-Datenfeld gebunden ist, der einzige Unterschied zwischen den beiden ist, dass die Enabled-Eigenschaft der CheckBox in ItemTemplate auf False festgelegt ist.

Ersetzen Sie das CheckBox-Steuerelement sowohl in ItemTemplate als auch in EditItemTemplate durch ein RadioButtonList-Steuerelement, und setzen Sie bei beiden RadioButtonLists die ID-Eigenschaften auf DiscontinuedChoice. Geben Sie als Nächstes an, dass die RadioButtonLists jeweils zwei Optionsfelder enthalten sollen, eines mit der Bezeichnung "Aktiv" mit dem Wert "False" und eines mit der Bezeichnung "Eingestellt" mit dem Wert "True". Dazu können Sie die <asp:ListItem> Elemente entweder direkt über die deklarative Syntax eingeben oder den ListItem Sammlungs-Editor aus dem Designer verwenden. Abbildung 13 zeigt den ListItem Sammlungs-Editor, nachdem die beiden Optionsfeldoptionen angegeben wurden.

Abbildung 13: Hinzufügen von aktiven und nicht mehr verfügbaren Optionen zur RadioButtonList (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Da die RadioButtonList in der ItemTemplate nicht bearbeitbar sein soll, setzen Sie die Enabled-Eigenschaft auf False, während die Enabled-Eigenschaft in der EditItemTemplate auf Standard (dem Standardwert) bleibt. Dadurch werden die Optionsfelder in der nicht bearbeiteten Zeile als schreibgeschützt festgelegt, der Benutzer kann jedoch die RadioButton-Werte für die bearbeitete Zeile ändern.

Wir müssen weiterhin die Eigenschaften der RadioButtonList-Steuerelemente SelectedValue zuweisen, damit das entsprechende Optionsfeld basierend auf dem Datenfeld des Discontinued Produkts ausgewählt wird. Wie bei den zuvor in diesem Lernprogramm untersuchten DropDownLists kann diese Datenbindungssyntax entweder direkt zum deklarativen Markup oder über den Link "DataBindings bearbeiten" in den Smarttags von RadioButtonLists hinzugefügt werden.

Nachdem Sie die beiden RadioButtonLists hinzugefügt und konfiguriert haben, sollte das Discontinued deklarative Markup von TemplateField wie folgt aussehen:

<asp:TemplateField HeaderText="Discontinued" SortExpression="Discontinued">
    <ItemTemplate>
        <asp:RadioButtonList ID="DiscontinuedChoice" runat="server"
          Enabled="False" SelectedValue='<%# Bind("Discontinued") %>'>
            <asp:ListItem Value="False">Active</asp:ListItem>
            <asp:ListItem Value="True">Discontinued</asp:ListItem>
        </asp:RadioButtonList>
    </ItemTemplate>
    <EditItemTemplate>
        <asp:RadioButtonList ID="DiscontinuedChoice" runat="server"
            SelectedValue='<%# Bind("Discontinued") %>'>
            <asp:ListItem Value="False">Active</asp:ListItem>
            <asp:ListItem Value="True">Discontinued</asp:ListItem>
        </asp:RadioButtonList>
    </EditItemTemplate>
</asp:TemplateField>

Mit diesen Änderungen wurde die Discontinued Spalte aus einer Liste von Kontrollkästchen in eine Liste von Radiobutton-Paaren umgewandelt (siehe Abbildung 14). Beim Bearbeiten eines Produkts wird das entsprechende Optionsfeld ausgewählt, und der Status "nicht mehr angeboten" des Produkts kann aktualisiert werden, indem das andere Optionsfeld gewählt und auf "Aktualisieren" geklickt wird.

Abbildung 14: Die nicht mehr verfügbaren CheckBoxs wurden durch Optionsfeldpaare ersetzt (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Zusammenfassung

Während das BoundField- und CheckBoxField-Element automatisch schreibgeschützte, bearbeitungs- und einfügeschnittstellen rendern, fehlt es an der Möglichkeit zur Anpassung. Oft müssen wir die Bearbeitungs- oder Einfügeschnittstelle anpassen, indem wir beispielsweise Überprüfungssteuerelemente hinzufügen (wie wir es im vorherigen Tutorial gesehen haben) oder die Benutzeroberfläche für die Datensammlung anpassen (wie in diesem Tutorial gezeigt). Das Anpassen der Schnittstelle mit einem TemplateField kann in den folgenden Schritten zusammengefasst werden:

1. Hinzufügen eines TemplateFields oder Konvertieren eines vorhandenen BoundField- oder CheckBoxField-Elements in ein TemplateField
2. Erweitern der Schnittstelle nach Bedarf
3. Binden Sie die entsprechenden Datenfelder an die neu hinzugefügten Websteuerelemente mithilfe von bidirektionaler Datenbindung.

Zusätzlich zur Verwendung der integrierten ASP.NET Websteuerelemente können Sie auch die Vorlagen eines TemplateFields mit benutzerdefinierten, kompilierten Serversteuerelementen und Benutzersteuerelementen anpassen.

Glückliche Programmierung!

Zum Autor

Scott Mitchell, Autor von sieben ASP/ASP.NET Büchern und Gründer von 4GuysFromRolla.com, arbeitet seit 1998 mit Microsoft Web Technologies zusammen. Scott arbeitet als unabhängiger Berater, Trainer und Schriftsteller. Sein neuestes Buch ist Sams Teach Yourself ASP.NET 2.0 in 24 Stunden. Er kann bei mitchell@4GuysFromRolla.comerreicht werden.