Přizpůsobení rozhraní pro úpravy prvku DataList (VB)

Scott Mitchell

Stáhnout PDF

V tomto kurzu vytvoříme bohatší rozhraní pro úpravy dataList, které zahrnuje DropDownLists a CheckBox.

Úvod

Značky a webové ovládací prvky v DataList s EditItemTemplate definují jeho upravitelné rozhraní. Ve všech upravitelných příkladech DataList, které jsme dosud prozkoumali, se upravitelné rozhraní skládá z webových ovládacích prvků TextBox. V předchozím kurzu jsme vylepšili uživatelské prostředí při úpravách přidáním ověřovacích ovládacích prvků.

Je EditItemTemplate možné dále rozšířit o jiné webové ovládací prvky než TextBox, například DropDownLists, RadioButtonLists, Calendars a tak dále. Stejně jako u textových polí při přizpůsobení rozhraní pro úpravy tak, aby zahrnovalo další webové ovládací prvky, postupujte následovně:

1. Přidejte webový ovládací prvek do .EditItemTemplate
2. Pomocí syntaxe datové vazby přiřaďte odpovídající hodnotu datového pole příslušné vlastnosti.
3. V obslužné rutině UpdateCommand události programově přistupujte k hodnotě webového ovládacího prvku a předejte ji příslušné metodě BLL.

V tomto kurzu vytvoříme bohatší rozhraní pro úpravy dataList, které zahrnuje DropDownLists a CheckBox. Konkrétně vytvoříme seznam DataList, který obsahuje informace o produktu a umožňuje aktualizaci názvu produktu, dodavatele, kategorie a stavu ukončení produktu (viz obrázek 1).

Obrázek 1: Rozhraní pro úpravy obsahuje textové pole, dva rozevírací seznamy a zaškrtávací políčko (kliknutím zobrazíte obrázek v plné velikosti)

Krok 1: Zobrazení informací o produktu

Než budeme moct vytvořit upravitelné rozhraní DataList, musíme nejprve vytvořit rozhraní jen pro čtení. Začněte tím, že CustomizedUI.aspx otevřete stránku ze EditDeleteDataList složky a ze Designer na stránku přidáte dataList a nastavíte jeho ID vlastnost na Products. Z inteligentní značky DataList vytvořte nový ObjectDataSource. Pojmenujte tento nový objekt ObjectDataSource ProductsDataSource a nakonfigurujte ho ProductsBLL tak, aby načítal data z metody třídy s GetProducts . Stejně jako v předchozích kurzech k úpravám DataList aktualizujeme upravené informace o produktu tak, že přejdeme přímo na vrstvu obchodní logiky. Proto nastavte rozevírací seznamy na kartách UPDATE( (AKTUALIZACE), INSERT (VLOŽENÍ) a DELETE (Odstranit) na (Žádný).

Obrázek 2: Nastavte karty UPDATE, INSERT a DELETE Drop-Down Seznamy na (Žádné) (Kliknutím zobrazíte obrázek v plné velikosti).

Po konfiguraci objektu ObjectDataSource vytvoří Visual Studio výchozí hodnotu ItemTemplate pro dataList, která obsahuje název a hodnotu pro každé z vrácených datových polí. ItemTemplate Upravte tak, aby šablona vypisovala název produktu v elementu <h4> spolu s názvem kategorie, názvem dodavatele, cenou a stavem ukončení. Kromě toho přidejte tlačítko Upravit a ujistěte se, že jeho CommandName vlastnost je nastavená na Upravit. Deklarativní kód pro moje ItemTemplate následující:

<ItemTemplate>
    <h4>
        <asp:Label ID="ProductNameLabel" runat="server"
            Text='<%# Eval("ProductName") %>' />
    </h4>
    <table border="0">
        <tr>
            <td class="ProductPropertyLabel">Category:</td>
            <td class="ProductPropertyValue">
                <asp:Label ID="CategoryNameLabel" runat="server"
                    Text='<%# Eval("CategoryName") %>' />
            </td>
            <td class="ProductPropertyLabel">Supplier:</td>
            <td class="ProductPropertyValue">
                <asp:Label ID="SupplierNameLabel" runat="server"
                    Text='<%# Eval("SupplierName") %>' />
            </td>
        </tr>
        <tr>
            <td class="ProductPropertyLabel">Discontinued:</td>
            <td class="ProductPropertyValue">
                <asp:Label ID="DiscontinuedLabel" runat="server"
                    Text='<%# Eval("Discontinued") %>' />
            </td>
            <td class="ProductPropertyLabel">Price:</td>
            <td class="ProductPropertyValue">
                <asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' />
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <asp:Button runat="Server" ID="EditButton"
                    Text="Edit" CommandName="Edit" />
            </td>
        </tr>
    </table>
    <br />
</ItemTemplate>

Výše uvedená přirážka uvádí informace o produktu pomocí nadpisu <h4> pro název produktu a čtyřsloupce <table> pro zbývající pole. Třídy ProductPropertyLabel css a ProductPropertyValue definované v Styles.cssjsme probírali v předchozích kurzech. Obrázek 3 znázorňuje náš postup při prohlížení prostřednictvím prohlížeče.

Obrázek 3: Zobrazí se název, dodavatel, kategorie, stav ukončení a cena každého produktu (kliknutím zobrazíte obrázek v plné velikosti).

Krok 2: Přidání webových ovládacích prvků do rozhraní pro úpravy

Prvním krokem při vytváření přizpůsobeného rozhraní pro úpravy DataList je přidání potřebných webových ovládacích prvků do .EditItemTemplate Konkrétně potřebujeme rozevírací seznam pro kategorii, jiný pro dodavatele a zaškrtávací políčko pro ukončený stav. Vzhledem k tomu, že cena produktu není v tomto příkladu upravitelná, můžeme ji dál zobrazovat pomocí ovládacího prvku Label Web.

Pokud chcete upravit rozhraní pro úpravy, klikněte na odkaz Upravit šablony ze značky smart DataList a zvolte EditItemTemplate možnost z rozevíracího seznamu. Přidejte dropDownList do objektu EditItemTemplate a nastavte jeho ID hodnotu na Categories.

Obrázek 4: Přidání rozevíracího seznamu pro kategorie (kliknutím zobrazíte obrázek v plné velikosti)

Dále z inteligentní značky DropDownList vyberte možnost Zvolit zdroj dat a vytvořte nový ObjectDataSource s názvem CategoriesDataSource. Nakonfigurujte tento objekt ObjectDataSource tak, aby používal metodu CategoriesBLL třídy s GetCategories() (viz Obrázek 5). Dále Průvodce konfigurací zdroje dat DropDownList zobrazí výzvu k zadání datových polí, která se mají použít pro každou ListItem vlastnost s Text a Value . Nechte rozevírací seznam zobrazit CategoryName datové pole a použít CategoryID jako hodnotu hodnotu, jak je znázorněno na obrázku 6.

Obrázek 5: Vytvoření nového objektuDataSource s názvem CategoriesDataSource (kliknutím zobrazíte obrázek v plné velikosti)

Obrázek 6: Konfigurace zobrazovaných a hodnotových polí rozevíracího seznamu (kliknutím zobrazíte obrázek v plné velikosti)

Opakováním této řady kroků vytvořte rozevírací seznam pro dodavatele. ID Nastavte pro tento rozevírací seznam na Suppliers a pojmenujte jeho ObjectDataSource SuppliersDataSource.

Po přidání dvou DropDownLists přidejte CheckBox pro ukončený stav a TextBox pro název produktu. ID Nastavte hodnoty pro CheckBox a TextBox na Discontinued a ProductName. Přidejte RequiredFieldValidator, abyste zajistili, že uživatel zadá hodnotu pro název produktu.

Nakonec přidejte tlačítka Aktualizovat a Zrušit. Nezapomeňte, že u těchto dvou tlačítek je nutné, aby jejich CommandName vlastnosti byly nastaveny na Update (Aktualizace) a Cancel (Zrušit).

Neváhejte a rozložte rozhraní pro úpravy, jak se vám líbí. Rozhodl(a) jsem se použít stejné rozložení se čtyřmi sloupci <table> z rozhraní jen pro čtení, jak ukazuje následující deklarativní syntaxe a snímek obrazovky:

<EditItemTemplate>
    <h4>
        <asp:Label ID="ProductNameLabel" runat="server"
            Text='<%# Eval("ProductName") %>' />
    </h4>
    <table border="0">
        <tr>
            <td class="ProductPropertyLabel">Name:</td>
            <td colspan="3" class="ProductPropertyValue">
                <asp:TextBox runat="server" ID="ProductName" Width="90%" />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
                    ControlToValidate="ProductName"
                    ErrorMessage="You must enter a name for the product."
                    runat="server">*</asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td class="ProductPropertyLabel">Category:</td>
            <td class="ProductPropertyValue">
                <asp:DropDownList ID="Categories" runat="server"
                    DataSourceID="CategoriesDataSource"
                    DataTextField="CategoryName" DataValueField="CategoryID" />
            </td>
            <td class="ProductPropertyLabel">Supplier:</td>
            <td class="ProductPropertyValue">
                <asp:DropDownList ID="Suppliers"
                    DataSourceID="SuppliersDataSource" DataTextField="CompanyName"
                    DataValueField="SupplierID" runat="server" />
            </td>
        </tr>
        <tr>
            <td class="ProductPropertyLabel">Discontinued:</td>
            <td class="ProductPropertyValue">
                <asp:CheckBox runat="server" id="Discontinued" />
            </td>
            <td class="ProductPropertyLabel">Price:</td>
            <td class="ProductPropertyValue">
                <asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' />
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <asp:Button runat="Server" ID="UpdateButton" CommandName="Update"
                    Text="Update" />
                 
                <asp:Button runat="Server" ID="CancelButton" CommandName="Cancel"
                    Text="Cancel" CausesValidation="False" />
            </td>
        </tr>
    </table>
    <br />
    <asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
        OldValuesParameterFormatString="original_{0}" SelectMethod="GetCategories"
        TypeName="CategoriesBLL">
    </asp:ObjectDataSource>
    <asp:ObjectDataSource ID="SuppliersDataSource" runat="server"
        OldValuesParameterFormatString="original_{0}" SelectMethod="GetSuppliers"
        TypeName="SuppliersBLL">
    </asp:ObjectDataSource>
</EditItemTemplate>

Obrázek 7: Rozhraní pro úpravy je rozložené podobně jako rozhraní Read-Only (kliknutím zobrazíte obrázek v plné velikosti).

Krok 3: Vytvoření obslužných rutin událostí EditCommand a CancelCommand

V současné době není v objektu EditItemTemplate žádná syntaxe vazby dat (s výjimkou objektu UnitPriceLabel, který byl zkopírován doslovně z ItemTemplate). Na chvíli přidáme syntaxi vazby dat, ale nejprve vytvoříme obslužné rutiny událostí pro dataList EditCommand a CancelCommand události. Vzpomeňte si, že odpovědností obslužné EditCommand rutiny události je vykreslit rozhraní pro úpravy pro položku DataList, jejíž tlačítko Upravit bylo kliknutí, zatímco CancelCommand úlohou je vrátit dataList do stavu před úpravami.

Vytvořte tyto dvě obslužné rutiny událostí a nechte je použít následující kód:

Protected Sub Products_EditCommand(source As Object, e As DataListCommandEventArgs) _
    Handles Products.EditCommand
    ' Set the DataList's EditItemIndex property to the
    ' index of the DataListItem that was clicked
    Products.EditItemIndex = e.Item.ItemIndex
    ' Rebind the data to the DataList
    Products.DataBind()
End Sub
Protected Sub Products_CancelCommand(source As Object, e As DataListCommandEventArgs) _
    Handles Products.CancelCommand
    ' Set the DataList's EditItemIndex property to -1
    Products.EditItemIndex = -1
    ' Rebind the data to the DataList
    Products.DataBind()
End Sub

Když jsou tyto dvě obslužné rutiny událostí na místě, kliknutím na tlačítko Upravit se zobrazí rozhraní pro úpravy a kliknutím na tlačítko Zrušit se vrátí upravená položka do režimu jen pro čtení. Obrázek 8 znázorňuje seznam dat po kliknutí na tlačítko Upravit pro Chef Anton s Gumbo Mix. Vzhledem k tomu, že jsme ještě přidat syntaxi datové vazby do rozhraní pro úpravy, ProductName TextBox je prázdné, Discontinued CheckBox nezaškrtnuto a první položky vybrané z Categories a Suppliers DropDownLists.

Obrázek 8: Kliknutím na tlačítko Upravit se zobrazí rozhraní pro úpravy (kliknutím zobrazíte obrázek v plné velikosti).

Krok 4: Přidání syntaxe vazby dat do rozhraní pro úpravy

Aby rozhraní pro úpravy zobrazilo aktuální hodnoty produktu, musíme pomocí syntaxe vazby dat přiřadit hodnoty datových polí příslušným hodnotám webového ovládacího prvku. Syntaxi vazby dat můžete použít prostřednictvím Designer tak, že přejdete na obrazovku Upravit šablony a vyberete odkaz Upravit datové vazby z inteligentních značek webových ovládacích prvků. Případně můžete syntaxi vazby dat přidat přímo do deklarativního kódu.

Přiřaďte hodnotu datového pole vlastnosti ProductName TextBox sText, CategoryID hodnoty datových polí a SupplierID vlastnosti Categories a Suppliers DropDownLists SelectedValue a hodnotu datového Discontinued pole k Discontinued vlastnosti CheckBox sChecked.ProductName Po provedení těchto změn, buď prostřednictvím Designer, nebo přímo prostřednictvím deklarativního kódu, znovu přejděte na stránku v prohlížeči a klikněte na tlačítko Upravit pro Chef Anton s Gumbo Mix. Jak znázorňuje obrázek 9, syntaxe datové vazby přidala aktuální hodnoty do polí TextBox, DropDownLists a CheckBox.

Obrázek 9: Kliknutím na tlačítko Upravit se zobrazí rozhraní pro úpravy (kliknutím zobrazíte obrázek v plné velikosti).

Krok 5: Uložení změn uživatele v obslužné rutině události UpdateCommand

Když uživatel upraví produkt a klikne na tlačítko Aktualizovat, dojde k zpětnému odeslání a aktivuje se UpdateCommand událost DataList. V obslužné rutině události potřebujeme přečíst hodnoty z webových ovládacích prvků v EditItemTemplate rozhraní a s BLL, abychom mohli aktualizovat produkt v databázi. Jak jsme viděli v předchozích kurzech, ProductID aktualizovaný produkt je přístupný prostřednictvím DataKeys kolekce. Uživatelem zadaná pole jsou přístupná programovým odkazem na webové ovládací prvky pomocí FindControl("controlID"), jak ukazuje následující kód:

Protected Sub Products_UpdateCommand(source As Object, e As DataListCommandEventArgs) _
    Handles Products.UpdateCommand
    If Not Page.IsValid Then
        Exit Sub
    End If
    ' Read in the ProductID from the DataKeys collection
    Dim productID As Integer = Convert.ToInt32(Products.DataKeys(e.Item.ItemIndex))
    ' Read in the product name and price values
    Dim productName As TextBox = CType(e.Item.FindControl("ProductName"), TextBox)
    Dim categories As DropDownList=CType(e.Item.FindControl("Categories"), DropDownList)
    Dim suppliers As DropDownList = CType(e.Item.FindControl("Suppliers"), DropDownList)
    Dim discontinued As CheckBox = CType(e.Item.FindControl("Discontinued"), CheckBox)
    Dim productNameValue As String = Nothing
    If productName.Text.Trim().Length > 0 Then
        productNameValue = productName.Text.Trim()
    End If
    Dim categoryIDValue As Integer = Convert.ToInt32(categories.SelectedValue)
    Dim supplierIDValue As Integer = Convert.ToInt32(suppliers.SelectedValue)
    Dim discontinuedValue As Boolean = discontinued.Checked
    ' Call the ProductsBLL's UpdateProduct method...
    Dim productsAPI As New ProductsBLL()
    productsAPI.UpdateProduct(productNameValue, categoryIDValue, supplierIDValue, _
        discontinuedValue, productID)
    ' Revert the DataList back to its pre-editing state
    Products.EditItemIndex = -1
    Products.DataBind()
End Sub

Kód začíná nahlédnutím Page.IsValid do vlastnosti , aby se zajistilo, že jsou všechny ověřovací ovládací prvky na stránce platné. Pokud Page.IsValid je True, upravená hodnota produktu ProductID se načte z DataKeys kolekce a na ovládací prvky webového zadávání dat v objektu EditItemTemplate se programově odkazují. Dále se hodnoty z těchto webových ovládacích prvků načtou do proměnných, které se pak předají příslušnému UpdateProduct přetížení. Po aktualizaci dat se seznam dat vrátí do stavu předběžné úpravy.

Poznámka

Vynechal(a) jsem logiku zpracování výjimek přidanou v kurzu Zpracování výjimek BLL a DAL-Level , aby byl kód a tento příklad zaměřený. Jako cvičení přidejte tuto funkci po dokončení tohoto kurzu.

Krok 6: Zpracování hodnot CategoryID a SupplierID NULL

Databáze Northwind umožňuje používat NULL hodnoty pro Products sloupce a SupplierID tabulkyCategoryID. Naše rozhraní pro úpravy ale v současné době NULL neobsahuje hodnoty. Pokud se pokusíme upravit produkt, který má NULL hodnotu pro jeho CategoryID nebo SupplierID sloupce, zobrazí se ArgumentOutOfRangeException chybová zpráva podobná této: Kategorie mají hodnotu SelectedValue, která je neplatná, protože v seznamu položek neexistuje. V současné době také neexistuje způsob, jak změnit kategorii produktu nebo hodnotu dodavatele z jiné nežNULL hodnoty na NULL hodnotu.

Abychom mohli podporovat NULL hodnoty pro kategorie a rozevírací seznamy dodavatelů, musíme přidat další ListItem. Rozhodl(a) jsem se použít (None) jako Text hodnotu pro tuto ListItemhodnotu , ale pokud chcete, můžete ji změnit na něco jiného (například prázdný řetězec). Nakonec nezapomeňte nastavit DropDownLists AppendDataBoundItems na True. Pokud to zapomenete udělat, kategorie a dodavatelé vázané na DropDownList přepíšou staticky přidanou ListItemhodnotu .

Po provedení těchto změn by měla značka DropDownLists v sadě DataList EditItemTemplate vypadat přibližně takto:

<asp:DropDownList ID="Categories" DataSourceID="CategoriesDataSource"
    DataTextField="CategoryName" DataValueField="CategoryID"  runat="server"
    SelectedValue='<%# Eval("CategoryID") %>' AppendDataBoundItems="True">
    <asp:ListItem Value=" Selected="True">(None)</asp:ListItem>
</asp:DropDownList>
...
<asp:DropDownList ID="Suppliers" DataSourceID="SuppliersDataSource"
    DataTextField="CompanyName" DataValueField="SupplierID" runat="server"
    SelectedValue='<%# Eval("SupplierID") %>' AppendDataBoundItems="True">
    <asp:ListItem Value=" Selected="True">(None)</asp:ListItem>
</asp:DropDownList>

Poznámka

Statické ListItem s lze přidat do rozevíracího seznamu prostřednictvím Designer nebo přímo prostřednictvím deklarativní syntaxe. Při přidávání položky DropDownList představující hodnotu databáze NULL nezapomeňte přidat ListItem prostřednictvím deklarativní syntaxe. Pokud použijete ListItem Editor kolekce v Designer, vygenerovaná deklarativní syntaxe při přiřazení prázdného Value řetězce úplně vynechá nastavení a vytvoří deklarativní značky jako: <asp:ListItem>(None)</asp:ListItem>. I když to může vypadat neškodně, chybějící Value způsobí, že DropDownList použije Text hodnotu vlastnosti na svém místě. To znamená, že pokud je tato NULLListItem možnost vybrána, pokusí se přiřadit hodnotu (Žádná) k poli dat produktu (CategoryID nebo SupplierID, v tomto kurzu), což způsobí výjimku. Explicitním nastavením Value=""NULL se při výběru přiřadí k datovému poli NULLListItem produktu hodnota.

Udělejte si chvilku a podívejte se na průběh v prohlížeči. Při úpravách produktu si všimněte, že Categories oba seznamy a Suppliers Rozevírací seznamy mají na začátku rozevíracího seznamu možnost (Žádný).

Obrázek 10: Rozevírací Categories seznamy a Suppliers obsahují možnost (Žádný) (Kliknutím zobrazíte obrázek v plné velikosti).

Pokud chcete uložit možnost (Žádné) jako hodnotu databáze NULL , musíme se vrátit k obslužné rutině UpdateCommand události. categoryIDValue Změňte proměnné a supplierIDValue na celá čísla s možnou hodnotou null a přiřaďte jim jinou hodnotu než Nothing pouze v případě, že dropDownList s SelectedValue není prázdný řetězec:

Dim categoryIDValue As Nullable(Of Integer) = Nothing
If Not String.IsNullOrEmpty(categories.SelectedValue) Then
    categoryIDValue = Convert.ToInt32(categories.SelectedValue)
End If
Dim supplierIDValue As Nullable(Of Integer) = Nothing
If Not String.IsNullOrEmpty(suppliers.SelectedValue) Then
    supplierIDValue = Convert.ToInt32(suppliers.SelectedValue)
End If

Při této změně bude do UpdateProduct metody BLL předána hodnota , Nothing pokud uživatel vybral možnost (None) z některého z rozevíracích seznamů, která odpovídá hodnotě NULL databáze.

Souhrn

V tomto kurzu jsme viděli, jak vytvořit složitější rozhraní pro úpravy DataList, které obsahovalo tři různé vstupní webové ovládací prvky TextBox, dva Rozevírací seznamy a CheckBox spolu s ovládacími prvky ověřování. Při sestavování rozhraní pro úpravy jsou kroky stejné bez ohledu na použité webové ovládací prvky: začněte přidáním webových ovládacích prvků do seznamu DataList s EditItemTemplate; pomocí syntaxe vazby dat přiřaďte odpovídající hodnoty datových polí s příslušnými vlastnostmi webového ovládacího prvku a v UpdateCommand obslužné rutině události programově přistupovat k webovým ovládacím prvkům a jejich příslušným vlastnostem, předání jejich hodnot do BLL.

Při vytváření rozhraní pro úpravy, ať už se skládá pouze z textových polí nebo kolekce různých webových ovládacích prvků, nezapomeňte správně zpracovávat hodnoty databáze NULL . Při účtování NULL pro s je nutné, abyste nejen správně zobrazili existující NULL hodnotu v rozhraní pro úpravy, ale také, abyste nabídli prostředky pro označení hodnoty jako NULL. U dropDownLists v DataLists to obvykle znamená přidání statického ListItem objektu, jehož Value vlastnost je explicitně nastavena na prázdný řetězec (Value="") a přidání trochu kódu do UpdateCommand obslužné rutiny události, aby bylo možné určit, zda byla vybrána.NULL``ListItem

Šťastné programování!

O autorovi

Scott Mitchell, autor sedmi knih o ASP/ASP.NET a zakladatel 4GuysFromRolla.com, pracuje s webovými technologiemi Microsoftu od roku 1998. Scott pracuje jako nezávislý konzultant, školitel a spisovatel. Jeho nejnovější kniha je Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Můžete ho najít na mitchell@4GuysFromRolla.comadrese . nebo prostřednictvím jeho blogu, který najdete na http://ScottOnWriting.NETadrese .

Zvláštní poděkování

Tato série kurzů byla zkontrolována mnoha užitečnými recenzenty. Hlavními recenzenty tohoto kurzu byli Dennis Patterson, David Suru a Randy Schmidt. Chcete si projít moje nadcházející články na WEBU MSDN? Pokud ano, dejte mi čáru na mitchell@4GuysFromRolla.comadresu .

Předchozí