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

von Scott Mitchell

PDF herunterladen

In diesem Tutorial erfahren Sie, wie Sie die Benutzeroberfläche eines bearbeitbaren GridView-Steuerelements anpassen, indem Sie die Standardsteuerelemente TextBox und CheckBox durch alternative Eingabewebsteuerelemente ersetzen.

Einführung

Die boundFields und CheckBoxFields, die von den GridView- und DetailsView-Steuerelementen verwendet werden, vereinfachen den Prozess des Änderns von Daten, da sie schreibgeschützte, bearbeitbare und einfügebare Schnittstellen rendern können. Diese Schnittstellen können gerendert werden, ohne dass zusätzliches deklaratives Markup oder Code hinzugefügt werden muss. Die Schnittstellen von BoundField und CheckBoxField verfügen jedoch nicht über die Anpassungsfähigkeit, die in realen Szenarien häufig erforderlich ist. Um die bearbeitbare oder einfügbare Schnittstelle in einer GridView oder DetailsView anzupassen, müssen wir stattdessen ein TemplateField verwenden.

Im vorherigen Tutorial haben wir erfahren, wie Sie die Datenänderungsschnittstellen anpassen, indem Sie Validierungswebsteuerelemente hinzufügen. In diesem Tutorial erfahren Sie, wie Sie die tatsächlichen Websteuerelemente für die Datensammlung anpassen und die Standardsteuerelemente "TextBox" und "CheckBoxField" von "BoundField" und "CheckBox" durch alternative Eingabewebsteuerelemente ersetzen. Insbesondere erstellen wir eine bearbeitbare GridView, mit der Name, Kategorie, Lieferant und eingestellte status eines Produkts aktualisiert werden können. Beim Bearbeiten einer bestimmten Zeile werden die Felder Kategorie und Lieferant als DropDownLists gerendert, die den Satz der verfügbaren 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: "Active" und "Discontinued".

Abbildung 1: Die Bearbeitungsschnittstelle von GridView enthält DropDownLists und RadioButtons (Klicken Sie, um das bild in voller Größe anzuzeigen)

Schritt 1: Erstellen der entsprechendenUpdateProductÜberladung

In diesem Tutorial erstellen wir eine bearbeitbare GridView, die die Bearbeitung des Namens, der Kategorie, des Lieferanten und der eingestellten status eines Produkts ermöglicht. Daher benötigen wir eine UpdateProduct Überladung, die fünf Eingabeparameter akzeptiert, diese vier Produktwerte plus den ProductID. Wie in unseren vorherigen Überladungen wird folgendes ausgeführt:

1. Abrufen der Produktinformationen aus der Datenbank für den angegebenen ProductID,
2. Aktualisieren sie die ProductNameFelder , CategoryID, SupplierIDund Discontinued und
3. Senden Sie die Updateanforderung über die TableAdapter-Methode Update() an die DAL.

Aus Gründen der Kürze habe ich für diese besondere Überladung die Überprüfung der Geschäftsregel weggelassen, die sicherstellt, dass ein Produkt, das als nicht 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 im Idealfall 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 UpdateProduct soeben erstellten Überladung zu aktualisieren. Wählen Sie in den Dropdownlisten auf den Registerkarten EINFÜGEN und LÖSCHEN die Option (Keine) aus.

Abbildung 2: Konfigurieren der ObjectDataSource so, dass die UpdateProduct gerade erstellte Überladung verwendet wird (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Wie wir in den Tutorials 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. Nehmen Sie sich daher wie in den vorherigen Tutorials einen Moment Zeit, um diese Eigenschaftszuweisung aus der deklarativen Syntax zu entfernen, oder legen Sie stattdessen den Wert dieser Eigenschaft auf fest {0}.

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 in der UpdateParameters Auflistung für Parameter jeden eingabeparameter vorhanden ist, der von unserer UpdateProduct Überladung erwartet wird.

Während ObjectDataSource so konfiguriert ist, dass nur eine Teilmenge der Produktwerte 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 CategoryName Felder und SupplierName , die vor dem CheckBoxField (links neben) Discontinued angezeigt werden sollen
• Die CategoryName Eigenschaft und SupplierName die BoundFields-Eigenschaft HeaderText ist auf "Category" bzw. "Supplier" festgelegt.
• Die Bearbeitungsunterstützung ist aktiviert (aktivieren Sie das Kontrollkästchen Bearbeitung aktivieren im Smarttag von GridView).

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

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, die den Namen, die Kategorie, den Lieferanten und den eingestellten status des Produkts anzeigt.

Abbildung 4: Die Read-Only-Schnittstelle von GridView ist vollständig (Klicken Sie, um das bild in voller Größe anzuzeigen)

Hinweis

Wie im Tutorial Eine Übersicht über das Einfügen, Aktualisieren und Löschen von Daten erläutert, ist es von entscheidender Bedeutung, dass der Ansichtszustand der GridView aktiviert ist (das Standardverhalten). Wenn Sie die GridView-Eigenschaft EnableViewState auf falsefestlegen, besteht die Gefahr, dass gleichzeitige Benutzer Datensätze versehentlich löschen oder bearbeiten.

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

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

Aufgrund der schreibgeschützten status der CategoryName Eigenschaften und SupplierName wurde für die entsprechenden BoundFields ihre ReadOnly Eigenschaft auf Truefestgelegt, wodurch verhindert wird, dass diese Werte geändert werden, wenn eine Zeile bearbeitet wird. Während wir die ReadOnly -Eigenschaft auf Falsefestlegen können, rendern sie CategoryName und SupplierName BoundFields während der Bearbeitung als TextBoxes, führt ein solcher Ansatz zu einer Ausnahme, wenn der Benutzer versucht, das Produkt zu aktualisieren, da keine UpdateProduct Überladung vorhanden ist, die Eingaben und SupplierName Eingaben übernimmtCategoryName. Tatsächlich möchten wir eine solche Überladung aus zwei Gründen nicht erstellen:

• Die Products Tabelle enthält SupplierName keine Felder oder CategoryName , sondern SupplierID und CategoryID. Daher möchten wir, dass unsere Methode diese spezifischen ID-Werte, nicht die Werte ihrer Nachschlagetabellen, übergeben wird.
• Es ist nicht ideal, dass der Benutzer den Namen des Lieferanten oder der Kategorie eingibt, da der Benutzer die verfügbaren Kategorien und Lieferanten und ihre richtige Schreibweise kennen muss.

In den Feldern "Lieferant" und "Kategorie" sollten die Namen der Kategorie und der Lieferanten angezeigt werden, wenn sie sich im schreibgeschützten Modus befinden (wie jetzt) sowie eine Dropdownliste mit den anwendbaren Optionen, wenn sie bearbeitet werden. Mithilfe einer Dropdownliste kann der Endbenutzer schnell sehen, welche Kategorien und Lieferanten zur Auswahl stehen, und kann seine Auswahl einfacher treffen.

Um dieses Verhalten bereitzustellen, müssen wir boundFields SupplierName und CategoryName in TemplateFields konvertieren, deren ItemTemplate Werte und ausgibt SupplierName und CategoryName deren Ein DropDownList-Steuerelement verwendet, um die verfügbaren EditItemTemplate Kategorien und Lieferanten aufzulisten.

Hinzufügen der DropDownLists undSuppliersderCategoriesDropDownLists

Beginnen Sie mit der Konvertierung von SupplierName BoundFields und CategoryName in TemplateFields: Klicken Sie im Smarttag von GridView auf den Link Spalten bearbeiten, wählen Sie in der Liste unten links das BoundField aus, und klicken Sie auf den Link "Dieses Feld in ein TemplateField konvertieren". Beim Konvertierungsprozess wird ein TemplateField mit einem ItemTemplate und einem EditItemTemplateerstellt, wie in der folgenden deklarativen Syntax gezeigt:

<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 BoundField als schreibgeschützt markiert wurde, enthalten sowohl das ItemTemplate als EditItemTemplate auch ein Label Web-Steuerelement, dessen Text Eigenschaft an das entsprechende Datenfeld gebunden ist (CategoryNamein der obigen Syntax). Wir müssen das EditItemTemplateändern, wobei das Label-Websteuerelement durch ein DropDownList-Steuerelement ersetzt wird.

Wie wir in den vorherigen Tutorials gesehen haben, kann die Vorlage über die Designer oder direkt aus der deklarativen Syntax bearbeitet werden. Um es über den Designer zu bearbeiten, klicken Sie im Smarttag des GridView-Smarttags auf den Link Vorlagen bearbeiten, und wählen Sie aus, um mit dem Feld EditItemTemplateKategorie zu arbeiten. Entfernen Sie das Label-Websteuerelement, und ersetzen Sie es durch ein DropDownList-Steuerelement, und legen Sie die ID-Eigenschaft von DropDownList auf fest Categories.

Abbildung 5: Entfernen der TexBox und Hinzufügen einer DropDownList zu dem EditItemTemplate (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 der DropDownList auf den Link Datenquelle auswählen, und erstellen Sie eine neue 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 sie die ObjectDataSource an die CategoriesBLL-Methode (GetCategories()Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Konfigurieren Sie schließlich die Einstellungen der DropDownList so, dass das CategoryName Feld in jeder DropDownList ListItem mit dem CategoryID als Wert verwendeten Feld angezeigt wird.

Abbildung 8: Anzeigen des CategoryName Felds und des CategoryID als Wert verwendeten Werts (Klicken Sie, um das bild in voller Größe anzuzeigen)

Nachdem Sie diese Änderungen vorgenommen haben, enthält das deklarative Markup für das EditItemTemplate in TemplateField CategoryName sowohl eine DropDownList 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>

Hinweis

Für die DropDownList in muss der EditItemTemplate Ansichtszustand aktiviert sein. In Kürze werden wir der deklarativen Syntax von DropDownList datenbindungssyntax hinzufügen und Befehle wie datenbindungsbefehle Eval()Bind() und können nur in Steuerelementen angezeigt werden, deren Ansichtsstatus aktiviert ist.

Wiederholen Sie diese Schritte, um eine DropDownList mit dem SupplierName Namen Suppliers zum TemplateField EditItemTemplatehinzuzufügen. Dies beinhaltet das Hinzufügen einer DropDownList zu und das EditItemTemplate 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 darüber hinaus die Suppliers DropDownList, um das CompanyName Feld anzuzeigen, und verwenden Sie das SupplierID Feld als Wert für seine ListItem s.

Nachdem Sie die DropDownLists zu den beiden EditItemTemplate s hinzugefügt haben, laden Sie die Seite in einen Browser, und klicken Sie auf die Schaltfläche Bearbeiten für das Produkt Chef Anton's Cajun Seasoning. Wie Abbildung 9 zeigt, werden die Kategorien- und Lieferantenspalten 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 Dropdownlisten standardmäßig ausgewählt sind (Getränke für die Kategorie und Exotic Liquids als Lieferant), obwohl Chef Anton es Cajun Seasoning ein Condiment von New Orleans Cajun Delights ist.

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

Wenn Sie auf Aktualisieren klicken, werden Sie außerdem feststellen, dass die Werte und SupplierID des CategoryID Produkts auf NULLfestgelegt sind. Beide unerwünschten Verhaltensweisen werden verursacht, weil die DropDownLists in den EditItemTemplate s nicht an Datenfelder aus den zugrunde liegenden Produktdaten gebunden sind.

Binden der DropDownLists an dieCategoryIDDatenfelder undSupplierID

Damit die Kategorie- und Lieferanten-Dropdownlisten des bearbeiteten Produkts auf die entsprechenden Werte festgelegt werden und diese Werte beim Klicken auf Aktualisieren an die BLL-Methode UpdateProduct zurückgesendet werden können, müssen wir die DropDownLists-Eigenschaften SelectedValue mithilfe der bidirektionalen Datenbindung an die CategoryID Datenfelder und SupplierID binden. Um dies mit dropDownList Categories zu erreichen, können Sie der deklarativen Syntax direkt hinzufügen SelectedValue='<%# Bind("CategoryID") %>' .

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

Abbildung 10: Binden von CategoryID an die DropDownList-Eigenschaft SelectedValue mithilfe 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 für die Kategorie- und Lieferantenspalten des bearbeiteten Produkts standardmäßig die Werte des aktuellen Produkts verwendet. Wenn Sie auf Aktualisieren klicken, werden die CategoryID Werte und SupplierID des ausgewählten Dropdownlistenelements an die UpdateProduct -Methode übergeben. Abbildung 11 zeigt das Tutorial, nachdem die Datenbindungsanweisungen hinzugefügt wurden; Beachten Sie, dass die ausgewählten Dropdownlistenelemente für Chef Anton es 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 hier, um das Bild in voller Größe anzuzeigen)

Behandeln vonNULLWerten

Die CategoryID Spalten und SupplierID in der Products Tabelle können lauten NULL, aber die DropDownLists in den EditItemTemplate s enthalten kein Listenelement, das einen NULL Wert darstellt. Dies hat zwei Folgen:

• Der Benutzer kann unsere Benutzeroberfläche nicht verwenden, um die Kategorie oder den Lieferanten eines Produkts von einem NichtwertNULL in einen NULL zu ändern.
• Wenn ein Produkt über oder NULLCategoryIDSupplierIDverfü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 (dropDownList löst eine Ausnahme aus, wenn seine SelectedValue Eigenschaft auf einen Wert festgelegt ist, der nicht in der Auflistung von Listenelementen enthalten ist).

Um die Werte und SupplierID zu unterstützenNULLCategoryID, müssen wir jeder DropDownList eine weitere ListItem hinzufügen, um den NULL Wert darzustellen. Im Tutorial Master/Detail Filtering With a DropDownList (Master/Detailfilterung mit DropDownList ) haben wir erfahren, wie Sie einer datengebundenen DropDownList-Datei eine zusätzliche ListItem hinzufügen. Dabei wurde die DropDownList-Eigenschaft AppendDataBoundItems auf True festgelegt und die zusätzliche ListItemhinzugefügt. In diesem vorherigen Tutorial haben wir jedoch eine ListItem mit einem Value von -1hinzugefügt. Die Datenbindungslogik in ASP.NET konvertiert jedoch automatisch eine leere Zeichenfolge in einen NULL Wert und umgekehrt. Daher soll es sich für dieses Tutorial um eine leere Zeichenfolge handelnListItemValue.

Legen Sie zunächst die DropDownLists-Eigenschaft AppendDataBoundItems auf fest True. Fügen Sie als Nächstes das NULLListItem folgende <asp:ListItem> Element zu jeder DropDownList hinzu, 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 dafür entschieden, "(None)" als Textwert zu ListItemverwenden, aber Sie können ihn auch in eine leere Zeichenfolge ändern, wenn Sie möchten.

Hinweis

Wie im Tutorial Master-/Detailfilterung mit DropDownList gezeigt, können s über die Designer einer DropDownList hinzugefügt werden, ListItem indem Sie im Eigenschaftenfenster auf die DropDownList-Eigenschaft Items klicken (in der die ListItem Sammlungs-Editor angezeigt wird). Fügen Sie jedoch für dieses Tutorial die über die deklarative Syntax hinzu NULLListItem . Wenn Sie die ListItem Sammlungs-Editor verwenden, lässt die generierte deklarative Syntax die Value Einstellung vollständig aus, wenn eine leere Zeichenfolge zugewiesen wird, wodurch deklaratives Markup wie folgt erstellt wird: <asp:ListItem>(None)</asp:ListItem>. Obwohl dies harmlos aussehen kann, bewirkt der fehlende Wert, dass dropDownList den Text -Eigenschaftswert an seiner Stelle verwendet. Das bedeutet, dass bei Auswahl des NULLListItem Werts "(None)" versucht wird, der CategoryIDzugewiesen zu werden, was zu einer Ausnahme führt. Durch explizites Festlegen Value=""wird ein NULL Wert zugewiesen CategoryID , wenn ausgewählt NULLListItem wird.

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

Mit diesem zusätzlichen ListItemkann die Bearbeitungsschnittstelle nun den Feldern und SupplierID eines Produkts CategoryID Werte zuweisenNULL, wie in Abbildung 12 dargestellt.

Abbildung 12: Wählen Sie (Keine) aus, um einen Wert für die NULL Kategorie oder den Lieferanten eines Produkts zuzuweisen (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Schritt 4: Verwenden von RadioButtons für den Status "Nicht beendet"

Derzeit wird das Datenfeld des Discontinued Produkts mithilfe eines 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 Tutorial ändern wir CheckBoxField in ein TemplateField-Steuerelement, das ein RadioButtonList-Steuerelement mit den beiden Optionen "Active" und "Discontinued" verwendet, über die der Benutzer den Wert des Discontinued Produkts angeben kann.

Beginnen Sie mit der Konvertierung von Discontinued CheckBoxField in ein TemplateField, wodurch ein TemplateField mit und ItemTemplateEditItemTemplateerstellt wird. Beide Vorlagen enthalten ein CheckBox-Objekt, dessen Checked Eigenschaft an das Discontinued Datenfeld gebunden ist. Der einzige Unterschied zwischen den beiden ist, dass die ItemTemplateCheckBox-Eigenschaft von Enabled auf Falsefestgelegt ist.

Ersetzen Sie das CheckBox-Steuerelement in ItemTemplate und EditItemTemplate durch ein RadioButtonList-Steuerelement, und legen Sie die Eigenschaften beider RadioButtonLists ID auf fest DiscontinuedChoice. Geben Sie als Nächstes an, dass die RadioButtonLists jeweils zwei Optionsfelder enthalten sollen: eines mit der Bezeichnung "Active" mit dem Wert "False" und eines mit der Bezeichnung "Discontinued" mit dem Wert "True". Um dies zu erreichen, können Sie die <asp:ListItem> Elemente entweder direkt über die deklarative Syntax eingeben oder die ListItem sammlungsinterne Editor aus dem Designer verwenden. Abbildung 13 zeigt die ListItem sammlungsspezifische Editor, nachdem die beiden Optionsfeldoptionen angegeben wurden.

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

Da radioButtonList im ItemTemplate nicht bearbeitbar sein soll, legen Sie die Enabled -Eigenschaft auf fest False, und lassen Sie die Enabled -Eigenschaft auf True (standard) für radioButtonList im EditItemTemplate. Dadurch werden die Optionsfelder in der nicht bearbeiteten Zeile schreibgeschützt, 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 DropDownLists, die weiter oben in diesem Tutorial untersucht wurden, kann diese Datenbindungssyntax entweder direkt in das deklarative 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 von einer Liste von Kontrollkästchen in eine Liste von Optionsfeldpaaren umgewandelt (siehe Abbildung 14). Wenn Sie ein Produkt bearbeiten, wird das entsprechende Optionsfeld ausgewählt, und die eingestellte status des Produkts kann aktualisiert werden, indem Sie das andere Optionsfeld auswählen und auf Aktualisieren klicken.

Abbildung 14: Nicht mehr unterstützte CheckBoxes wurden durch Optionsfeldpaare ersetzt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Hinweis

Da die Discontinued Spalte in der Products Datenbank keine Werte enthalten NULL kann, müssen wir uns keine Gedanken über das Erfassen NULL von Informationen in der -Schnittstelle machen. Wenn die Spalte jedoch Werte enthalten könnte, Discontinued sollten Wir der Liste ein drittes Optionsfeld hinzufügen, dessen Value Zeichenfolge auf eine leere Zeichenfolge (Value="") festgelegt ist, genau wie bei den DropDownLists für Kategorie und NULL Lieferanten.

Zusammenfassung

Während BoundField und CheckBoxField automatisch schreibgeschützte, Bearbeitungs- und Einfügeschnittstellen rendern, fehlt ihnen die Möglichkeit zur Anpassung. Häufig müssen wir jedoch die Bearbeitungs- oder Einfügeschnittstelle anpassen, z. B. Validierungssteuerelemente hinzufügen (wie im vorherigen Tutorial gezeigt) oder die Benutzeroberfläche der 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 TemplateField-Elements oder Konvertieren eines vorhandenen BoundField- oder CheckBoxField-Elements in ein TemplateField
2. Erweitern der Schnittstelle nach Bedarf
3. Binden der entsprechenden Datenfelder an die neu hinzugefügten Websteuerelemente mithilfe der bidirektionalen Datenbindung

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

Viel Spaß beim Programmieren!

Zum Autor

Scott Mitchell, Autor von sieben ASP/ASP.NET-Büchern und Gründer von 4GuysFromRolla.com, arbeitet seit 1998 mit Microsoft-Webtechnologien. Scott arbeitet als unabhängiger Berater, Trainer und Autor. Sein neuestes Buch ist Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Er kann unter mitchell@4GuysFromRolla.comoder über seinen Blog erreicht werden, der unter http://ScottOnWriting.NETzu finden ist.

ZurückWeiter