Přidání sloupce rádiových tlačítek do GridView (VB)

V tomto kurzu se dozvíte, jak přidat sloupec přepínačů do ovládacího prvku GridView, který uživateli poskytne intuitivnější způsob výběru jednoho řádku GridView.

Úvod

Ovládací prvek GridView nabízí spoustu předdefinovaných funkcí. Obsahuje několik různých polí pro zobrazení textu, obrázků, hypertextových odkazů a tlačítek. Podporuje šablony pro další přizpůsobení. Po několika kliknutích myši je možné vytvořit Objekt GridView, ve kterém lze vybrat každý řádek pomocí tlačítka, nebo povolit úpravy nebo odstranění funkcí. I přes celou řadu poskytovaných funkcí se často objeví situace, kdy bude potřeba přidat další nepodporované funkce. V tomto kurzu a dalších dvou se podíváme, jak vylepšit funkce GridView tak, aby zahrnovaly další funkce.

Tento kurz a další se zaměřují na vylepšení procesu výběru řádků. Jak bylo zkoumáno v Předloha/Podrobnosti pomocí vybratelného hlavního GridView s podrobnostmi DetailView, můžeme do GridView přidat pole příkazů, které obsahuje tlačítko Vybrat. Po kliknutí dojde k postbacku a vlastnost GridView s SelectedIndex se aktualizuje na index řádku, na které bylo kliknuto tlačítkem Select. V kurzu Master/Detail s volitelným hlavním GridView a podrobným DetailView jsme viděli, jak použít tuto funkci k zobrazení detailů pro vybraný řádek GridView.

I když tlačítko Vybrat funguje v mnoha situacích, nemusí fungovat i pro ostatní. Místo použití tlačítka se k výběru běžně používají dva další prvky uživatelského rozhraní: přepínač a zaškrtávací políčko. GridView můžeme rozšířit tak, aby místo tlačítka Vybrat obsahoval každý řádek přepínač nebo zaškrtávací políčko. Ve scénářích, kdy uživatel může vybrat pouze jeden ze záznamů GridView, může být radio button upřednostněn před tlačítkem Vybrat. V situacích, kdy uživatel může potenciálně vybrat více záznamů, například ve webové e-mailové aplikaci, kde uživatel může chtít vybrat více zpráv ke smazání, nabízí zaškrtávací políčko funkci, která není k dispozici prostřednictvím uživatelského rozhraní tlačítka Vybrat nebo přepínače.

Tento kurz popisuje, jak přidat sloupec přepínačů do GridView. V dalším kurzu se zkoumá použití zaškrtávacích políček.

Krok 1: Vytvoření vylepšení webových stránek GridView

Než začneme GridView rozšiřovat tak, aby obsahoval sloupec přepínačů, napřed si vyhraďme chvíli na vytvoření ASP.NET stránek v našem webovém projektu, které budeme potřebovat pro tento tutoriál a další dva. Začněte přidáním nové složky s názvem EnhancedGridView. Dále do této složky přidejte následující ASP.NET stránky a nezapomeňte přidružit každou stránku ke stránce předlohy Site.master :

Default.aspx
RadioButtonField.aspx
CheckBoxField.aspx
InsertThroughFooter.aspx

Přidání ASP.NET stránek pro kurzy SqlDataSource-Related

Obrázek 1: Přidání stránek ASP.NET pro kurzy SqlDataSource-Related

Stejně jako v ostatních složkách, ve složce Default.aspx bude uveden seznam kurzů v této části. Vzpomeňte si, že SectionLevelTutorialListing.ascx uživatelské řízení tuto funkci poskytuje. Tento uživatelský ovládací prvek přidejte do Default.aspx přetažením z Průzkumníka řešení do návrhového zobrazení stránky.

Obrázek 2: Přidání SectionLevelTutorialListing.ascx uživatelského ovládacího prvku do Default.aspx (kliknutím zobrazíte obrázek v plné velikosti)

Nakonec přidejte tyto čtyři stránky jako položky do Web.sitemap souboru. Konkrétně přidejte následující kód za použití ovládacího prvku <siteMapNode>SqlDataSource:

<siteMapNode 
    title="Enhancing the GridView" 
    url="~/EnhancedGridView/Default.aspx" 
    description="Augment the user experience of the GridView control.">
    <siteMapNode 
        url="~/EnhancedGridView/RadioButtonField.aspx" 
        title="Selection via a Radio Button Column" 
        description="Explore how to add a column of radio buttons in the GridView." />
    <siteMapNode 
        url="~/EnhancedGridView/CheckBoxField.aspx" 
        title="Selection via a Checkbox Column" 
        description="Select multiple records in the GridView by using a column of 
            checkboxes." />
    <siteMapNode 
        url="~/EnhancedGridView/InsertThroughFooter.aspx" 
        title="Add New Records through the Footer" 
        description="Learn how to allow users to add new records through the 
            GridView's footer." />
</siteMapNode>

Po aktualizaci Web.sitemapsi chvíli prohlédněte web kurzů prostřednictvím prohlížeče. Nabídka vlevo teď obsahuje položky pro úpravy, vkládání a odstraňování kurzů.

Mapa webu teď obsahuje položky pro vylepšení kurzů GridView.

Obrázek 3: Mapa webu teď obsahuje položky pro vylepšení kurzů GridView

Krok 2: Zobrazení dodavatelů v objektu GridView

Pro účely tohoto kurzu vytvoříme GridView, který uvádí americké dodavatele, přičemž každý řádek GridView umožňuje výběr pomocí přepínače. Po výběru dodavatele prostřednictvím přepínače může uživatel zobrazit produkty dodavatele kliknutím na tlačítko. I když tento úkol může znít triviální, existuje řada drobných vlastností, které z něj dělají obzvláště složité. Než se pustíme do těchto drobných funkcí, pojďme nejprve získat GridView se seznamem dodavatelů.

Začněte otevřením RadioButtonField.aspx stránky ve EnhancedGridView složce přetažením objektu GridView z panelu nástrojů do Návrháře. Nastavte atribut ID objektu GridView na Suppliers a zvolte vytvoření nového zdroje dat pomocí jeho inteligentní značky. Konkrétně vytvořte ObjectDataSource s názvem SuppliersDataSource , který načítá data z objektu SuppliersBLL .

Obrázek 4: Vytvoření nového objektu ObjectDataSource s názvem SuppliersDataSource (kliknutím zobrazíte obrázek s plnou velikostí)

Obrázek 5: Konfigurace ObjectDataSource pro použití SuppliersBLL třídy (kliknutím zobrazíte obrázek v plné velikosti)

Vzhledem k tomu, že chceme uvést pouze tyto dodavatele v USA, zvolte metodu GetSuppliersByCountry(country) z rozevíracího seznamu na kartě SELECT.

Obrázek 6: Konfigurace ObjectDataSource pro použití SuppliersBLL třídy (kliknutím zobrazíte obrázek s plnou velikostí)

Na kartě AKTUALIZOVAT vyberte možnost (Žádné) a klikněte na Další.

Obrázek 7: Konfigurace ObjectDataSource pro použití SuppliersBLL třídy (kliknutím zobrazíte obrázek s plnou velikostí)

Vzhledem k tomu, že GetSuppliersByCountry(country) metoda přijímá parametr, Průvodce konfigurací zdroje dat nás vyzve k zadání zdroje tohoto parametru. Chcete-li zadat pevně zakódovanou hodnotu ( USA, v tomto příkladu), ponechte rozevírací seznam Zdroj parametru nastavený na Hodnotu None a zadejte výchozí hodnotu do textového pole. Kliknutím na tlačítko Dokončit dokončete průvodce.

Obrázek 8: Použití USA jako výchozí hodnoty parametru country (kliknutím zobrazíte obrázek s plnou velikostí)

Po dokončení průvodce bude GridView obsahovat BoundField pro každé pole dat dodavatele. Odeberte všechny kromě objektů CompanyName, City a Country BoundFields, a přejmenujte vlastnost CompanyName BoundFields HeaderText na Supplier. Potom by deklarativní syntaxe GridView a ObjectDataSource měla vypadat podobně jako v následujícím příkladu.

<asp:GridView ID="Suppliers" runat="server" AutoGenerateColumns="False"
    DataKeyNames="SupplierID" DataSourceID="SuppliersDataSource" 
    EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="CompanyName" HeaderText="Supplier" 
            SortExpression="CompanyName" />
        <asp:BoundField DataField="City" HeaderText="City" 
            SortExpression="City" />
        <asp:BoundField DataField="Country" HeaderText="Country" 
            SortExpression="Country" />
    </Columns>
</asp:GridView>
<asp:ObjectDataSource ID="SuppliersDataSource" runat="server" 
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetSuppliersByCountry" TypeName="SuppliersBLL">
    <SelectParameters>
        <asp:Parameter DefaultValue="USA" Name="country" Type="String" />
    </SelectParameters>
</asp:ObjectDataSource>

V tomto kurzu umožníme uživateli zobrazit vybrané produkty dodavatele na stejné stránce jako seznam dodavatelů nebo na jiné stránce. Chcete-li to přizpůsobit, přidejte na stránku dva webové ovládací prvky button. Nastavil jsem ID těchto dvou tlačítek na ListProducts a SendToProducts, s myšlenkou, že po kliknutí na ListProducts dojde k postbacku a produkty vybraného dodavatele budou uvedeny na stejné stránce, ale po kliknutí na SendToProducts bude uživatel přesměrován na jinou stránku, která uvádí produkty.

Obrázek 9 znázorňuje Suppliers GridView a dvě webová tlačítka, když jsou zobrazena v prohlížeči.

Obrázek 9: Tito dodavatelé z USA mají uvedené informace o jejich jménu, městě a zemi (kliknutím zobrazíte obrázek v plné velikosti).

Krok 3: Přidání sloupce rádiových tlačítek

V tomto okamžiku Suppliers má GridView tři BoundFields zobrazující název společnosti, město a zemi každého dodavatele v USA. Sloupec přepínačů však stále chybí. GridView bohužel neobsahuje žádné předdefinované pole RadioButton, jinak bychom ho mohli jednoduše přidat do mřížky a mít hotovo. Místo toho můžeme přidat TemplateField a nakonfigurovat jej tak, aby vykreslil rádiové tlačítko, což povede k rádiovému tlačítku v každém řádku GridView.

Zpočátku můžeme předpokládat, že požadované uživatelské rozhraní lze implementovat přidáním ovládacího prvku RadioButton Web do ItemTemplate TemplateField. I když se tím skutečně přidá jedno rádiové tlačítko do každého řádku GridView, rádiová tlačítka nelze seskupit, a proto se vzájemně nevylučují. To znamená, že koncový uživatel může vybrat více přepínačů současně z GridView.

I když použití TemplateField of RadioButton Web controls nenabízí funkce, které potřebujeme, pojďme tento přístup implementovat, protože je vhodné prozkoumat, proč výsledné přepínače nejsou seskupené. Začněte tím, že do ovládacího prvku Suppliers GridView přidáte pole TemplateField, čímž se vytvoří pole úplně vlevo. Dále v inteligentní značce GridView klikněte na odkaz Upravit šablony a přetáhněte webový ovládací prvek RadioButton ze sady nástrojů do TemplateField ItemTemplate (viz obrázek 10). Nastavte vlastnost ID u RadioButton na RowSelector a vlastnost GroupName na SuppliersGroup.

Obrázek 10: Přidání webového ovládacího prvku RadioButton do ItemTemplate (kliknutím zobrazíte obrázek v plné velikosti)

Po provedení těchto doplňků v Návrháři by vaše označení GridView mělo vypadat podobně jako následující:

<asp:GridView ID="Suppliers" runat="server" AutoGenerateColumns="False"
    DataKeyNames="SupplierID" DataSourceID="SuppliersDataSource" 
    EnableViewState="False">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:RadioButton ID="RowSelector" runat="server" 
                    GroupName="SuppliersGroup" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="CompanyName" HeaderText="Supplier" 
            SortExpression="CompanyName" />
        <asp:BoundField DataField="City" HeaderText="City" 
            SortExpression="City" />
        <asp:BoundField DataField="Country" HeaderText="Country" 
            SortExpression="Country" />
    </Columns>
</asp:GridView>

Vlastnost GroupName RadioButton je to, co se používá k seskupení řady přepínačů. Všechny ovládací prvky RadioButton se stejnou GroupName hodnotou jsou považovány za seskupené. Ze skupiny lze současně vybrat pouze jeden přepínač. Vlastnost GroupName specifikuje hodnotu atributu name pro vykreslené rádiové tlačítko. Prohlížeč prozkoumá atributy přepínačů name a určí seskupení přepínačů.

S přidáním ovládacího prvku RadioButton Web do ItemTemplate přejděte na tuto stránku v prohlížeči a klikněte na přepínače v řádcích mřížky. Všimněte si, že rádiová tlačítka nejsou seskupena, což umožňuje vybrat všechny řádky, jak ukazuje obrázek 11.

Obrázek 11: Přepínače v GridView nejsou seskupené (Kliknutím zobrazíte obrázek v plné velikosti)

Důvod, proč rádiové tlačítka nejsou seskupena, je ten, že jejich vykreslené atributy name jsou odlišné, přestože mají stejná nastavení vlastnosti GroupName. Aby bylo možné tyto rozdíly vidět, použijte možnost Zobrazit zdroj v prohlížeči a prozkoumejte značkování radio tlačítek.

<input id="ctl00_MainContent_Suppliers_ctl02_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl02$SuppliersGroup" 
    type="radio" value="RowSelector" />
<input id="ctl00_MainContent_Suppliers_ctl03_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl03$SuppliersGroup" 
    type="radio" value="RowSelector" />
<input id="ctl00_MainContent_Suppliers_ctl04_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl04$SuppliersGroup" 
    type="radio" value="RowSelector" />
<input id="ctl00_MainContent_Suppliers_ctl05_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl05$SuppliersGroup" 
    type="radio" value="RowSelector" />

Všimněte si, že jak atributy name, tak id nejsou přesně ty hodnoty, které jsou určené v okně Vlastnosti, ale mají před sebou řadu dalších hodnot ID. Další hodnoty ID, které byly přidány před vykreslené id a name atributy, jsou hodnoty ID rodičovských ovládacích prvků pro přepínací tlačítka GridViewRow a ID, GridView ID, Content kontrol ID a Web Form ID. Tyto ID prvky jsou přidány, aby každý vykreslený webový ovládací prvek v GridView měl jedinečnou id a name hodnotu.

Každý vykreslovaný ovládací prvek potřebuje jiný name a id protože tento způsob prohlížeč jednoznačně identifikuje každý ovládací prvek na straně klienta a jak identifikuje webovému serveru, k jaké akci nebo změně došlo při postbacku. Představte si například, že jsme chtěli spustit kód na straně serveru při každé změně stavu kontroly RadioButtonu. Toho můžeme dosáhnout nastavením vlastnosti AutoPostBack RadioButton a vytvořením obslužné rutiny pro True událost. Nicméně, pokud byly vykreslené hodnoty name a id pro všechny přepínače stejné, při postbacku jsme nemohli určit, na který konkrétní přepínač bylo kliknuto.

Stručně řečeno, nemůžeme vytvořit sloupec přepínačů v GridView pomocí ovládacího prvku RadioButton Web. Místo toho musíme použít spíše archaické techniky, abychom zajistili, že se příslušné značky vloží do každého řádku GridView.

Poznámka:

Stejně jako webový ovládací prvek RadioButton obsahuje přepínač HTML, když je přidán do šablony, jedinečný atribut name, takže přepínače v mřížce nejsou seskupené. Pokud ovládací prvky HTML neznáte, ignorujte tuto poznámku, protože ovládací prvky HTML se používají zřídka, zejména v ASP.NET 2.0. Pokud se ale chcete dozvědět více, podívejte se na K . Scotta Allena s blogovým příspěvkem o webových ovládacích prvcích a ovládacích prvcích HTML.

Použití literálového ovládacího prvku k vložení značky přepínačů

Aby bylo možné správně seskupit všechny přepínače v prvku GridView, musíme do ItemTemplate ručně vložit značky přepínačů. Každý přepínač potřebuje stejný name atribut, ale měl by mít jedinečný id atribut (v případě, že chceme získat přístup k přepínači prostřednictvím skriptu na straně klienta). Jakmile uživatel vybere přepínač a odešle stránku zpět, prohlížeč odešle zpět hodnotu vybraného přepínače value. Každý přepínač proto bude potřebovat jedinečný value atribut. Nakonec, při odeslání zpět, musíme zajistit, aby byl k vybranému radiovému tlačítku přidán atribut checked, jinak se po volbě uživatele a následném odeslání tlačítka vrátí do výchozího stavu (všechna nevybraná).

Existují dva přístupy, které lze použít, aby se do šablony vložily nízkoúrovňové značky. Jedním z nich je kombinace značek a volání metod formátování definovaných ve třídě kód v pozadí. Tato technika byla poprvé popsána v návodu Použití TemplateFields v ovládacím prvku GridView. V našem případě to může vypadat nějak takto:

<input type="radio" id='<%# GetUniqueRadioButtonID(...) %>' 
    name='SuppliersGroup' value='<%# GetRadioButtonValue(...) %>' ... />

Zde by GetUniqueRadioButton a GetRadioButtonValue byly metody definované v třídě za kódem, které by vracely odpovídající hodnoty atributů id a value pro každý přepínač. Tento přístup funguje dobře pro přiřazování atributů id a value, ale je nedostatečný při nutnosti zadat hodnotu atributu checked, protože syntaxe vazby dat se spustí pouze při prvním vázání dat na GridView. Proto pokud má GridView povolený stav zobrazení, formátovací metody se aktivují pouze při prvním načtení stránky (nebo když je GridView explicitně znovu propojen s datovým zdrojem), a proto funkce, která nastaví atribut checked, nebude volána při opětovném odeslání stránky. Je to poměrně drobný problém a trochu nad rámec tohoto článku, takže to nechám na tomto. Doporučuji vám však, abyste se pokusili použít výše uvedený přístup a projít si ho až do bodu, kde se zaseknete. I když se vám takové cvičení nebude blížit k pracovní verzi, pomůže vám to lépe pochopit GridView a životní cyklus vazby dat.

Dalším přístupem k vložení vlastních, nízkoúrovňových značek do šablony a přístupu, který budeme v tomto kurzu používat, je přidání literálového ovládacího prvku do šablony. Potom v obslužné rutině události GridView s RowCreated nebo RowDataBound lze k ovládacímu prvku Literal programově přistupovat a jeho vlastnost Text nastavit na značky, které mají být generovány.

Začněte odebráním RadioButtonu ze TemplateFieldu ItemTemplate a nahraďte ho ovládacím prvkem Literal. Nastavte ovládací prvek typu Literal s ID na RadioButtonMarkup.

Obrázek 12: Přidání ovládacího prvku literálu do obrazu ItemTemplate (kliknutím zobrazíte obrázek s plnou velikostí)

Dále vytvořte obslužnou rutinu pro událost RowCreated v GridView. Událost RowCreated se spustí jednou pro každý přidaný řádek bez ohledu na to, zda jsou data znovu připojena do GridView. To znamená, že i při zpětném volání, kdy jsou data znovu načtena ze ViewState, událost RowCreated se stále aktivuje, a to je důvod, proč ji používáme místo RowDataBound (která se aktivuje jenom v případě, že data jsou explicitně svázaná s webovým datovým ovládacím prvkem).

V tomto obslužném vlákně události chceme pokračovat pouze tehdy, jestliže se jedná o datový řádek. Pro každý řádek dat chceme programově odkazovat na RadioButtonMarkup kontrolu Literal a nastavit její Text vlastnost na značku, která se má emitovat. Jak ukazuje následující kód, emitovaný kód vytvoří přepínač, jehož name atribut je nastaven na SuppliersGroup, id atribut je nastaven na RowSelectorX, kde X je index řádku GridView, a value atribut je nastaven na index řádku GridView.

Protected Sub Suppliers_RowCreated(sender As Object, e As GridViewRowEventArgs) _
    Handles Suppliers.RowCreated
    
    If e.Row.RowType = DataControlRowType.DataRow Then
        ' Grab a reference to the Literal control
        Dim output As Literal = _
            CType(e.Row.FindControl("RadioButtonMarkup"), Literal)
        ' Output the markup except for the "checked" attribute
        output.Text = String.Format( _
            "<input type="radio" name="SuppliersGroup" " & _
            "id="RowSelector{0}" value="{0}" />", e.Row.RowIndex)
    End If
End Sub

Když je vybrán řádek GridView a dojde k obnovení stránky, zajímáme se o SupplierID vybraného dodavatele. Proto by se mohlo zdát, že hodnota každého přepínače by měla být skutečnou hodnotou SupplierID (nikoli index řádku GridView). I když to může fungovat za určitých okolností, mohlo by být riskantní bez rozmyslu přijmout a zpracovat SupplierID. Například Naše GridView uvádí seznam pouze těch dodavatelů v USA. Pokud je SupplierID však předán přímo z přepínače, co zabrání záludnému uživateli manipulovat s hodnotou SupplierID odeslanou zpět při postbacku? Použitím indexu řádku jako value a následným získáním SupplierID během zpětného odeslání z kolekce DataKeys můžeme zajistit, že uživatel používá pouze jednu z SupplierID hodnot přidružených k jednomu z řádků GridView.

Po přidání tohoto kódu obslužné rutiny události si udělejte chvilku na otestování stránky v prohlížeči. Nejprve si všimněte, že najednou lze v mřížce vybrat pouze jeden přepínač. Když vyberete přepínač a kliknete na jedno z tlačítek, dojde k postbacku a přepínače se vrátí do počátečního stavu (to znamená, že po postbacku již vybraný přepínač není vybrán). Abychom tento problém vyřešili, musíme obslužnou rutinu RowCreated události rozšířit tak, aby prověřila, který index přepínače byl vybrán a odeslán z postbacku, a přidali checked="checked" atribut do výstupního HTML, kde se index řádku shoduje.

Když dojde k postbacku, prohlížeč odešle zpět name a value vybraného rádiového tlačítka. Hodnotu lze načíst programově pomocí Request.Form("name"). VlastnostRequest.Form poskytuje znázornění NameValueCollection proměnných formuláře. Proměnné formuláře jsou názvy a hodnoty polí formuláře na webové stránce a posílají se zpět webovým prohlížečem, když dojde k postbacku. Vzhledem k tomu, že vykreslený name atribut přepínačů v GridView je SuppliersGroup, když je webová stránka odeslána zpět, prohlížeč odešle SuppliersGroup=valueOfSelectedRadioButton zpět na webový server (spolu s ostatními poli formuláře). Tyto informace pak mohou být přístupné z Request.Form vlastnosti pomocí: Request.Form("SuppliersGroup").

Vzhledem k tomu, že budeme muset určit vybraný index přepínačů nejen v RowCreated obslužné rutině události, ale také v Click obslužných rutinách událostí pro ovládací prvky Button Web, přidejme do třídy code-behind vlastnost, která vrátí SuppliersSelectedIndex pokud nebyl vybrán žádný přepínač, a vybraný index, pokud je vybrán některý z přepínačů.

Private ReadOnly Property SuppliersSelectedIndex() As Integer
    Get
        If String.IsNullOrEmpty(Request.Form("SuppliersGroup")) Then
            Return -1
        Else
            Return Convert.ToInt32(Request.Form("SuppliersGroup"))
        End If
    End Get
End Property

S přidáním této vlastnosti víme, že je třeba přidat checked="checked" značku do RowCreated obslužné rutiny události, když SuppliersSelectedIndex se rovná e.Row.RowIndex. Aktualizujte obslužnou rutinu události tak, aby zahrnovala tuto logiku:

Protected Sub Suppliers_RowCreated(sender As Object, e As GridViewRowEventArgs) _
    Handles Suppliers.RowCreated
    
    If e.Row.RowType = DataControlRowType.DataRow Then
        ' Grab a reference to the Literal control
        Dim output As Literal = _
            CType(e.Row.FindControl("RadioButtonMarkup"), Literal)
        ' Output the markup except for the "checked" attribute
        output.Text = String.Format( _
            "<input type="radio" name="SuppliersGroup" " & _
            "id="RowSelector{0}" value="{0}"", e.Row.RowIndex)
        ' See if we need to add the "checked" attribute
        If SuppliersSelectedIndex = e.Row.RowIndex Then
            output.Text &= " checked="checked""
        End If
        ' Add the closing tag
        output.Text &= " />"
    End If
End Sub

Při této změně zůstane vybraný přepínač vybraný po načtení stránky. Teď, když máme možnost určit, které přepínačové tlačítko je vybráno, můžeme změnit chování tak, aby při prvním navštívení stránky bylo vybráno přepínačové tlačítko prvního řádku GridView (místo toho, aby ve výchozím nastavení nebylo vybráno žádné přepínačové tlačítko, což je aktuální chování). Chcete-li mít první přepínač vybraný ve výchozím nastavení, jednoduše změňte If SuppliersSelectedIndex = e.Row.RowIndex Then příkaz na následující: If SuppliersSelectedIndex = e.Row.RowIndex OrElse (Not Page.IsPostBack AndAlso e.Row.RowIndex = 0) Then.

V tomto bodě jsme do objektu GridView přidali sloupec seskupených radiových tlačítek, který umožňuje výběr a zapamatování jednoho řádku GridView napříč postbacky. V dalších krocích se zobrazí produkty poskytované vybraným dodavatelem. V kroku 4 se dozvíme, jak přesměrovat uživatele na jinou stránku a přitom odeslat vybrané SupplierID. V kroku 5 uvidíme, jak na stejné stránce zobrazit vybrané produkty dodavatele v objektu GridView.

Poznámka:

Místo použití TemplateField (zaměření tohoto dlouhého kroku 3) bychom mohli vytvořit vlastní DataControlField třídu, která vykreslí příslušné uživatelské rozhraní a funkce. TřídaDataControlField je základní třída, ze které jsou odvozena pole BoundField, CheckBoxField, TemplateField a další předdefinovaná pole GridView a DetailsView. Vytvoření vlastní DataControlField třídy by znamenalo, že sloupec přepínačů by mohl být přidán pouze pomocí deklarativní syntaxe, a také by usnadnil replikaci funkcí na jiných webových stránkách a jiných webových aplikacích.

Pokud jste někdy vytvořili vlastní, zkompilované ovládací prvky v ASP.NET, víte, že to vyžaduje značné úsilí a že je třeba se vypořádat s mnoha jemnostmi a specifickými případy, které musí být pečlivě řešeny. Proto se zatím zřekneme implementace sloupce přepínačů jako vlastní DataControlField třídy a budeme se držet možnosti TemplateField. Možná budeme mít možnost prozkoumat vytváření, používání a nasazování vlastních DataControlField tříd v budoucím kurzu.

Krok 4: Zobrazení vybraných výrobků dodavatele na samostatné stránce

Jakmile uživatel vybere řádek GridView, musíme zobrazit vybrané produkty dodavatele. Za některých okolností můžeme chtít tyto produkty zobrazit na samostatné stránce, v jiných bychom to mohli raději udělat na stejné stránce. Pojďme se nejprve podívat, jak zobrazit produkty na samostatné stránce; v kroku 5 se podíváme na přidání GridView pro RadioButtonField.aspx zobrazení vybraných dodavatelů produktů.

V současné době jsou na stránce ListProducts dva ovládací prvky Button Web a SendToProducts. Po kliknutí na tlačítko SendToProducts chceme uživatele přesměrovat na ~/Filtering/ProductsForSupplierDetails.aspx. Tato stránka byla vytvořena v kurzu Filtrování předlohy/podrobností napříč dvěma stránkami a zobrazuje produkty pro dodavatele, jehož SupplierID je předán prostřednictvím pole řetězce dotazu s názvem SupplierID.

Chcete-li tuto funkci poskytnout, vytvořte obslužnou rutinu SendToProducts pro akci Button s Click. V kroku 3 jsme přidali SuppliersSelectedIndex vlastnost, která vrátí index řádku, jehož přepínač je vybrán. Odpovídající SupplierID lze načíst z kolekce GridViewDataKeys a poté může být uživatel přesměrován na ~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=SupplierID pomocí Response.Redirect("url").

Protected Sub SendToProducts_Click(sender As Object, e As EventArgs) _
    Handles SendToProducts.Click
    
    ' Send the user to ~/Filtering/ProductsForSupplierDetails.aspx
    Dim supplierID As Integer = _
        Convert.ToInt32(Suppliers.DataKeys(SuppliersSelectedIndex).Value)
    Response.Redirect( _
        "~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=" & _
        supplierID)
End Sub

Tento kód funguje úžasně, pokud je některé z radiových tlačítek vybráno z GridView. Pokud zpočátku GridView nemá vybrána žádná rádiová tlačítka a uživatel klikne na tlačítko SendToProducts, a SuppliersSelectedIndex bude -1, což způsobí vyhození výjimky, protože -1 je mimo rozsah indexu kolekce DataKeys. Není to však problém, pokud jste se rozhodli aktualizovat obslužnou rutinu RowCreated události, jak je popsáno v kroku 3, aby byl na začátku vybrán první radio button v GridView.

Chcete-li přizpůsobit SuppliersSelectedIndex hodnotu -1, přidejte popisek web ovládací prvek na stránku nad GridView. Nastavte jeho ID vlastnost na ChooseSupplierMsg, jeho CssClass vlastnost na Warning, jeho EnableViewState a Visible vlastnosti na False, a jeho Text vlastnost na Vyberte, prosím, dodavatele z mřížky. Třída Warning CSS zobrazuje text v červené, kurzívě, tučném, velkém písmu a je definován v Styles.css. Nastavením vlastností EnableViewState a Visible na False se Popisek nevykreslí, s výjimkou těch postbacků, kde je vlastnost ovládacího prvku Visible nastavena na True programově.

Obrázek 13: Přidejte webový ovládací prvek Label nad GridView (kliknutím zobrazíte obrázek v plné velikosti)

Dále rozšiřte obslužnou rutinu události Click tak, aby zobrazovala ChooseSupplierMsg popisek, pokud SuppliersSelectedIndex je menší než nula; jinak přesměrujte uživatele na ~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=SupplierID.

Protected Sub SendToProducts_Click(sender As Object, e As EventArgs) _
    Handles SendToProducts.Click
    
    ' make sure one of the radio buttons has been selected
    If SuppliersSelectedIndex < 0 Then
        ChooseSupplierMsg.Visible = True
    Else
        ' Send the user to ~/Filtering/ProductsForSupplierDetails.aspx
        Dim supplierID As Integer = _
            Convert.ToInt32(Suppliers.DataKeys(SuppliersSelectedIndex).Value)
        Response.Redirect( _
            "~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=" & _
            supplierID)
    End If
End Sub

Přejděte na stránku v prohlížeči a před výběrem dodavatele z Objektu GridView klikněte na SendToProducts tlačítko. Jak ukazuje obrázek 14, zobrazí se ChooseSupplierMsg popisek. Dále vyberte dodavatele a klikněte na SendToProducts tlačítko. Tím se dostanete na stránku se seznamem produktů poskytovaných vybraným dodavatelem. Obrázek 15 ukazuje ProductsForSupplierDetails.aspx stránku, kdy byl vybrán dodavatel Bigfoot Breweries.

Obrázek 14: Popisek ChooseSupplierMsg se zobrazí, pokud není vybrán žádný dodavatel (kliknutím zobrazíte obrázek v plné velikosti).

Obrázek 15: Vybrané produkty dodavatele jsou zobrazeny v ProductsForSupplierDetails.aspx (kliknutím zobrazíte obrázek s plnou velikostí).

Krok 5: Zobrazení produktů vybraného dodavatele na stejné stránce

V kroku 4 jsme viděli, jak odeslat uživatele na jinou webovou stránku, aby se zobrazily vybrané produkty dodavatele. Alternativně lze vybrané produkty dodavatele zobrazit na stejné stránce. Abychom to mohli ilustrovat, přidáme další GridView k RadioButtonField.aspx, abychom zobrazili vybrané produkty dodavatele.

Vzhledem k tomu, že chceme, aby se tento GridView produktů zobrazoval pouze po tom, co byl vybrán dodavatel, přidejte pod Suppliers GridView webový ovládací prvek Panel a nastavte jeho vlastnost ID na ProductsBySupplierPanel a vlastnost Visible na False. V panelu přidejte text Produkty pro vybraného dodavatele a potom GridView s názvem ProductsBySupplier. Z inteligentní značky GridView zvolte vytvořit vazbu na nový ObjectDataSource s názvem ProductsBySupplierDataSource.

Obrázek 16: Vytvoření vazby objektu ProductsBySupplier GridView k novému objektu ObjectDataSource (kliknutím zobrazíte obrázek s plnou velikostí)

Dále nakonfigurujte ObjectDataSource tak, aby používal třídu ProductsBLL . Vzhledem k tomu, že chceme načíst pouze tyto produkty poskytované vybraným dodavatelem, určete, že ObjectDataSource by měl vyvolat metodu GetProductsBySupplierID(supplierID) pro načtení svých dat. V rozevíracích seznamech na kartách UPDATE, INSERT a DELETE vyberte (Žádné).

Obrázek 17: Konfigurace ObjectDataSource pro použití GetProductsBySupplierID(supplierID) metody (kliknutím zobrazíte obrázek s plnou velikostí)

Obrázek 18: Nastavení Drop-Down seznamů na (Žádné) na kartách UPDATE, INSERT a DELETE (Kliknutím zobrazíte obrázek v plné velikosti)

Po nakonfigurování karet SELECT, UPDATE, INSERT a DELETE klepněte na tlačítko Další. Vzhledem k tomu, že GetProductsBySupplierID(supplierID) metoda očekává vstupní parametr, Průvodce vytvořením zdroje dat nás vyzve k zadání zdroje pro hodnotu parametru.

Tady máme několik možností, jak určit zdroj hodnoty parametru. Můžeme použít výchozí objekt Parameter a programově přiřadit hodnotu vlastnosti SuppliersSelectedIndex ke vlastnosti Parameter DefaultValue v obslužné rutině události ObjectDataSource Selecting. Vraťte se k tutoriálu Nastavení hodnot parametrů ObjectDataSource pro připomenutí, jak programově přiřadit hodnoty parametrům ObjectDataSource.

Alternativně můžeme použít ControlParameter a odkazovat na SuppliersGridView sSelectedValue vlastnost (viz obrázek 19). GridView s SelectedValue vlastnost vrátí DataKey hodnotu odpovídající SelectedIndex vlastnosti. Aby tato možnost fungovala, musíme při kliknutí na tlačítko programově nastavit vlastnost GridView s SelectedIndex na vybraný řádek ListProducts . Jako přidanou výhodu se po nastavení SelectedIndex, vybraný záznam převezme SelectedRowStyle definovanou v tématu DataWebControls (žluté pozadí).

Obrázek 19: Určení hodnoty GridView s SelectedValue jako zdroje parametrů pomocí controlParameter (kliknutím zobrazíte obrázek s plnou velikostí)

Po dokončení průvodce Visual Studio automaticky přidá pole pro data produktu. Odeberte všechny BoundFields kromě ProductName, CategoryName a UnitPrice a změňte HeaderText vlastnosti na Produkt, Kategorie a Cena. UnitPrice Nakonfigurujte BoundField tak, aby jeho hodnota byla formátována jako měna. Po provedení těchto změn by měl deklarativní kód Panel, GridView a ObjectDataSource vypadat takto:

<asp:Panel runat="server" ID="ProductsBySupplierPanel" Visible="False">
    <h3>
        Products for the Selected Supplier</h3>
    <p>
        <asp:GridView ID="ProductsBySupplier" runat="server" 
            AutoGenerateColumns="False" DataKeyNames="ProductID"
            DataSourceID="ProductsBySupplierDataSource" EnableViewState="False">
            <Columns>
                <asp:BoundField DataField="ProductName" HeaderText="Product" 
                    SortExpression="ProductName" />
                <asp:BoundField DataField="CategoryName" HeaderText="Category" 
                    ReadOnly="True" SortExpression="CategoryName" />
                <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}" 
                    HeaderText="Price" HtmlEncode="False" 
                    SortExpression="UnitPrice" />
            </Columns>
        </asp:GridView>
        <asp:ObjectDataSource ID="ProductsBySupplierDataSource" runat="server" 
            OldValuesParameterFormatString="original_{0}"
            SelectMethod="GetProductsBySupplierID" TypeName="ProductsBLL">
            <SelectParameters>
                <asp:ControlParameter ControlID="Suppliers" Name="supplierID" 
                    PropertyName="SelectedValue" Type="Int32" />
            </SelectParameters>
        </asp:ObjectDataSource>
    </p>
</asp:Panel>

Abychom dokončili toto cvičení, musíme nastavit vlastnost SelectedIndex GridView na SelectedSuppliersIndex a vlastnost ProductsBySupplierPanel Panelu na Visible při kliknutí na tlačítko True. K tomu vytvořte obslužnou rutinu události pro událost webového ListProducts ovládacího prvku Click Button a přidejte následující kód:

Protected Sub ListProducts_Click(sender As Object, e As EventArgs) _
    Handles ListProducts.Click
    
    ' make sure one of the radio buttons has been selected
    If SuppliersSelectedIndex < 0 Then
        ChooseSupplierMsg.Visible = True
        ProductsBySupplierPanel.Visible = False
    Else
        ' Set the GridView's SelectedIndex
        Suppliers.SelectedIndex = SuppliersSelectedIndex
        ' Show the ProductsBySupplierPanel panel
        ProductsBySupplierPanel.Visible = True
    End If
End Sub

Pokud nebyl dodavatel vybrán z objektu GridView, zobrazí se ChooseSupplierMsg popisek a ProductsBySupplierPanel panel se skryje. V opačném případě, pokud byl dodavatel vybrán, je ProductsBySupplierPanel zobrazena a vlastnost SelectedIndex GridView je aktualizována.

Obrázek 20 ukazuje výsledky po výběru dodavatele Bigfoot Breweries a kliknutí na tlačítko Zobrazit produkty na stránce.

Obrázek 20: Produkty dodané společností Bigfoot Pivovary jsou uvedeny na stejné stránce (Kliknutím zobrazíte obrázek s plnou velikostí)

Shrnutí

Jak je popsáno v kurzu Master/Detail s výběrovým Master GridView a podrobnostmi v DetailView, záznamy lze vybrat z GridView pomocí CommandField, jehož ShowSelectButton vlastnost je nastavena na True. Ale CommandField zobrazí jeho tlačítka buď jako běžná tlačítka, odkazy nebo obrázky. Alternativa uživatelského rozhraní pro výběr řádku je poskytnout přepínač nebo zaškrtávací políčko v každém řádku GridView. V tomto kurzu jsme prozkoumali, jak přidat sloupec přepínačů.

Přidání sloupce přepínačů bohužel není tak jednoduché nebo snadné, jak by se dalo očekávat. Není k dispozici žádná integrovaná RadioButtonField, kterou lze přidat po kliknutí na tlačítko a použití webového ovládacího prvku RadioButton v rámci TemplateField představuje vlastní sadu problémů. Abychom mohli poskytnout takové rozhraní, musíme buď vytvořit vlastní DataControlField třídu, nebo se uchýlit k vložení příslušného HTML kódu do TemplateField během události RowCreated.

Po prozkoumání, jak přidat sloupec přepínačů, se zaměřme na přidání sloupce zaškrtávacích políček. Se sloupcem zaškrtávacích políček může uživatel vybrat jeden nebo více řádků GridView a pak provést nějakou operaci na všech vybraných řádcích (například vybrat sadu e-mailů z webového e-mailového klienta a pak se rozhodnout odstranit všechny vybrané e-maily). V dalším kurzu se dozvíte, jak takový sloupec přidat.

Šťastné programování!

O autorovi

Scott Mitchell, autor sedmi knih ASP/ASP.NET a zakladatel 4GuysFromRolla.com, pracuje s webovými technologiemi Microsoftu od roku 1998. Scott pracuje jako nezávislý konzultant, trenér a spisovatel. Jeho nejnovější kniha je Sams Naučte se ASP.NET 2.0 za 24 hodin. Může být dosažitelný na mitchell@4GuysFromRolla.comadrese .

Zvláštní díky

Tato série kurzů byla zkontrolována mnoha užitečnými recenzenty. Hlavním recenzentem tohoto výukového programu byl David Suru. Chcete si projít nadcházející články MSDN? Pokud ano, napište mi zprávu na mitchell@4GuysFromRolla.com.

Předchozí další

Váš názor

Byla tato stránka užitečná?

Last updated on 2025-04-30