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

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 bool UpdateProduct(string productName, int? categoryID,
    int? supplierID, bool discontinued, int productID)
{
    Northwind.ProductsDataTable products = Adapter.GetProductByProductID(productID);
    if (products.Count == 0)
        // no matching record found, return false
        return false;
    Northwind.ProductsRow product = products[0];
    product.ProductName = productName;
    if (supplierID == null) product.SetSupplierIDNull();
      else product.SupplierID = supplierID.Value;
    if (categoryID == null) product.SetCategoryIDNull();
      else product.CategoryID = categoryID.Value;
    product.Discontinued = discontinued;
    // Update the product record
    int rowsAffected = Adapter.Update(product);
    // Return true if precisely one row was updated, otherwise false
    return rowsAffected == 1;
}

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's 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, um das Bild in voller Größe anzuzeigen)

Wenn Sie auf Aktualisieren klicken, werden Sie außerdem feststellen, dass die Werte und SupplierID des Produkts CategoryID 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 der Categories DropDownList zu erreichen, können Sie der deklarativen Syntax direkt hinzufügen SelectedValue='<%# Bind("CategoryID") %>' .

Alternativ können Sie die Datenbindungsfunktionen der DropDownList festlegen, indem Sie die Vorlage über die Designer bearbeiten und im Smarttag der 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 Sie die 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 die 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 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)

Verarbeiten vonNULLWerten

Die CategoryID Spalten und SupplierID in der Products Tabelle können sein NULL, aber die DropDownLists im 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 zu ändern NULL .
• Wenn ein Produkt über einen NULLCategoryID oder verfügt SupplierID, 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 ist (die DropDownList löst eine Ausnahme aus, wenn seine SelectedValue Eigenschaft auf einen Wert festgelegt ist , der nicht in der Auflistung der Listenelemente enthalten ist).

Um die Werte zu SupplierID unterstützenCategoryIDNULL, müssen wir jeder DropDownList eine weitere ListItem hinzufügen, um den NULL Wert darzustellen. Im Tutorial Master-/Detailfilterung mit einer DropDownList haben wir erfahren, wie Sie einer datengebundenen DropDownList eine zusätzliche ListItem hinzufügen, was das Festlegen der DropDownList-Eigenschaft AppendDataBoundItems auf true und das manuelle Hinzufügen der zusätzlichen ListItembeinhaltet. In diesem vorherigen Tutorial haben wir jedoch ein mit einem ListItemValue von -1hinzugefügt. Die Datenbindungslogik in ASP.NET konvertiert jedoch automatisch eine leere Zeichenfolge in einen NULL Wert und umgekehrt. Daher soll es sich bei den ListItem's Value für dieses Tutorial um eine leere Zeichenfolge handeln.

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

Hinweis

Wie wir im Tutorial Master-/Detailfilterung mit dropDownList gezeigt haben, kann s über die Designer einer DropDownList hinzugefügt werden, ListItem indem Sie im Eigenschaftenfenster auf die Eigenschaft der Items DropDownList klicken (in der die ListItem Sammlung Editor angezeigt wird). Achten Sie jedoch darauf, für dieses Tutorial über NULLListItem die deklarative Syntax hinzuzufügen. Wenn Sie die ListItem Sammlung Editor verwenden, lässt die generierte deklarative Syntax die Value Einstellung ganz aus, wenn eine leere Zeichenfolge zugewiesen wird, wodurch deklaratives Markup wie folgt erstellt wird. <asp:ListItem>(None)</asp:ListItem> Dies kann zwar harmlos aussehen, aber der fehlende Wert bewirkt, dass die DropDownList den Text Eigenschaftswert an seiner Stelle verwendet. Das bedeutet, dass bei Auswahl des NULLListItem Werts "(Keine)" versucht wird, dem 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 Dropdownliste Lieferanten.

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

Abbildung 12: Wählen Sie (Keine) aus, um einen NULL Wert für die 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 eingestellt"

Derzeit wird das Datenfeld der Produkte Discontinued 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 dem Konvertieren von Discontinued CheckBoxField in ein TemplateField, wodurch ein TemplateField mit und ItemTemplateEditItemTemplateerstellt wird. Beide Vorlagen enthalten eine CheckBox-Eigenschaft, deren Checked Eigenschaft an das Discontinued Datenfeld gebunden ist. Der einzige Unterschied zwischen den beiden ist, dass die ItemTemplateCheckBox-Eigenschaft Enabled auf falsefestgelegt ist.

Ersetzen Sie checkBox in und ItemTemplateEditItemTemplate 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 "Aktiv" 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 Sammlung Editor aus dem Designer verwenden. Abbildung 13 zeigt die ListItem Sammlung Editor, nachdem die beiden Optionsfelder angegeben wurden.

Abbildung 13: Hinzufügen der Optionen "Aktiv" und "Eingestellt" zur RadioButtonList (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Da die RadioButtonList in ItemTemplate nicht bearbeitbar sein soll, legen Sie ihre Enabled Eigenschaft auf falsefest, und lassen Sie die Enabled Eigenschaft auf true (Standard) für die RadioButtonList in .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 dem 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 von einer Liste von Kontrollkästchen in eine Liste von Optionsfeldpaaren transformiert (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: Die eingestellten 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 aufweisen NULL kann, müssen wir uns nicht um die Erfassung NULL von Informationen in der Schnittstelle kümmern. Wenn die Spalte jedoch Werte enthalten könnte, Discontinued sollten wir der Liste ein drittes Optionsfeld hinzufügen, dessen Value Einstellung auf eine leere Zeichenfolge (Value="") festgelegt ist, genau wie bei den DropDownLists der Kategorie und des NULL Lieferanten.

Zusammenfassung

BoundField und CheckBoxField rendern zwar automatisch Schreib-, Bearbeitungs- und Einfügeschnittstellen, aber sie können nicht angepasst werden. 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-Steuerelements in ein TemplateField
2. Erweitern Der Schnittstelle nach Bedarf
3. Binden Sie die entsprechenden Datenfelder mithilfe der bidirektionalen Datenbindung an die neu hinzugefügten Websteuerelemente.

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 Stunden. Er kann unter mitchell@4GuysFromRolla.comoder über seinen Blog erreicht werden, der unter http://ScottOnWriting.NETzu finden ist.

ZurückWeiter