Zobrazení hlavních záznamů / podrobností výběrem hlavního záznamu prvkem GridView s podrobnostmi v prvku DetailView (VB)
Tento kurz bude obsahovat Objekt GridView, jehož řádky obsahují název a cenu každého produktu spolu s tlačítkem Vybrat. Kliknutí na tlačítko Vybrat pro konkrétní produkt způsobí, že se jeho úplné podrobnosti zobrazí v ovládacím prvku DetailsView na stejné stránce.
Úvod
V předchozím kurzu jsme viděli, jak vytvořit hlavní/podrobnou sestavu pomocí dvou webových stránek: "hlavní" webové stránky, ze které jsme zobrazili seznam dodavatelů; a webovou stránku s podrobnostmi, na které jsou uvedené produkty poskytnuté vybraným dodavatelem. Tento dvoustránkový formát sestavy může být zhuštěný do jedné stránky. Tento kurz bude obsahovat Objekt GridView, jehož řádky obsahují název a cenu každého produktu spolu s tlačítkem Vybrat. Kliknutí na tlačítko Vybrat pro konkrétní produkt způsobí, že se jeho úplné podrobnosti zobrazí v ovládacím prvku DetailsView na stejné stránce.
Obrázek 1: Kliknutím na tlačítko Vybrat zobrazíte podrobnosti o produktu (kliknutím zobrazíte obrázek v plné velikosti).
Krok 1: Vytvoření ovládacího prvku GridView s možnostmi výběru
Vzpomeňte si, že v dvoustránkové sestavě předlohy a podrobností obsahoval každý hlavní záznam hypertextový odkaz, který po kliknutí odeslal uživatele na stránku podrobností a předal hodnotu kliknutého SupplierID
řádku v řetězci dotazu. Takový hypertextový odkaz byl přidán do každého řádku GridView pomocí HyperLinkField. Pro jednostránkovou sestavu předlohy nebo podrobností budeme potřebovat tlačítko pro každý řádek GridView, který po kliknutí zobrazí podrobnosti. GridView ovládací prvek lze nakonfigurovat tak, aby zahrnoval tlačítko Vybrat pro každý řádek, který způsobí postback a označí tento řádek jako GridView SelectedRow.
Začněte tím, že na DetailsBySelecting.aspx
stránku ve Filtering
složce přidáte ovládací prvek GridView a nastavíte jeho ID
vlastnost na ProductsGrid
. Dále přidejte nový objekt ObjectDataSource s názvem AllProductsDataSource
, který vyvolá metodu ProductsBLL
GetProducts()
třídy .
Obrázek 2: Vytvoření objektu s názvem AllProductsDataSource
ObjectDataSource (kliknutím zobrazíte obrázek v plné velikosti)
Obrázek 3: Použití ProductsBLL
třídy (kliknutím zobrazíte obrázek v plné velikosti)
Obrázek 4: Konfigurace objektu ObjectDataSource pro vyvolání GetProducts()
metody (kliknutím zobrazíte obrázek v plné velikosti)
Upravte pole GridView odebrání všech polí kromě ProductName
a UnitPrice
BoundFields. Také můžete tato rozhraní BoundField podle potřeby přizpůsobit, například naformátovat UnitPrice
pole BoundField jako měnu a změnit HeaderText
vlastnosti BoundFields. Tyto kroky lze provést graficky, kliknutím na odkaz Upravit sloupce z inteligentní značky GridView nebo ruční konfigurací deklarativní syntaxe.
Obrázek 5: Odebrání všech polí kromě ProductName
a UnitPrice
BoundField (kliknutím zobrazíte obrázek v plné velikosti)
Konečný kód pro GridView je:
<asp:GridView ID="ProductsGrid" runat="server"
AutoGenerateColumns="False" DataKeyNames="ProductID"
DataSourceID="AllProductsDataSource" EnableViewState="False">
<Columns>
<asp:BoundField DataField="ProductName"
HeaderText="Product" SortExpression="ProductName" />
<asp:BoundField DataField="UnitPrice"
DataFormatString="{0:c}" HeaderText="Unit Price"
HtmlEncode="False" SortExpression="UnitPrice" />
</Columns>
</asp:GridView>
Dále musíme označit GridView jako vybratelný, čímž se na každý řádek přidá tlačítko Vybrat. Chcete-li to provést, jednoduše zaškrtněte políčko Povolit výběr v inteligentní značce GridView.
Obrázek 6: Nastavení možnosti výběru řádků objektu GridView (kliknutím zobrazíte obrázek v plné velikosti)
Zaškrtnutím možnosti Povolení výběru přidáte CommandField do objektu ProductsGrid
GridView s jeho ShowSelectButton
vlastností nastavenou na Hodnotu True. Výsledkem je tlačítko Vybrat pro každý řádek GridView, jak je znázorněno na obrázku 6. Ve výchozím nastavení se tlačítka Select vykreslují jako LinkButtons, ale můžete místo toho použít Buttons nebo ImageButtons prostřednictvím vlastnosti CommandField ButtonType
.
<asp:GridView ID="ProductsGrid" runat="server"
AutoGenerateColumns="False" DataKeyNames="ProductID"
DataSourceID="AllProductsDataSource" EnableViewState="False">
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="ProductName"
HeaderText="Product" SortExpression="ProductName" />
<asp:BoundField DataField="UnitPrice"
DataFormatString="{0:c}" HeaderText="Unit Price"
HtmlEncode="False" SortExpression="UnitPrice" />
</Columns>
</asp:GridView>
Při kliknutí na tlačítko Vybrat řádku GridView se objeví zpětné zpětné a vlastnost GridView SelectedRow
je aktualizována. Kromě SelectedRow
vlastnosti GridView poskytuje SelectedIndex, SelectedValue a SelectedDataKey vlastnosti. Vlastnost SelectedIndex
vrátí index vybraného řádku, zatímco SelectedValue
vlastnosti a SelectedDataKey
vrátí hodnoty založené na Vlastnosti DataKeyNames Objektu GridView.
Vlastnost DataKeyNames
se používá k přidružení jedné nebo více hodnot datových polí ke každému řádku a běžně se používá k přiřazení jedinečných identifikačních informací z podkladových dat s každým řádkem GridView. Vlastnost SelectedValue
vrátí hodnotu prvního DataKeyNames
datového pole pro vybraný řádek, kde jako SelectedDataKey
vlastnost vrátí objekt vybraného řádku DataKey
, který obsahuje všechny hodnoty polí zadaných datových klíčů pro daný řádek.
Vlastnost DataKeyNames
se automaticky nastaví na jedinečně identifikující datová pole při vytvoření vazby zdroje dat na GridView, DetailsView nebo FormView prostřednictvím Designer. I když jsme tuto vlastnost v předchozích kurzech nastavili automaticky, příklady by fungovaly bez DataKeyNames
zadané vlastnosti. Pro objekt GridView, který se dá v tomto kurzu vybrat, i pro budoucí kurzy, ve kterých budeme zkoumat vkládání, aktualizaci a odstraňování, ale musí být vlastnost nastavená DataKeyNames
správně. Chvíli se ujistěte, že je vlastnost objektu DataKeyNames
GridView nastavená na ProductID
hodnotu .
Podívejme se na náš dosavadní pokrok v prohlížeči. Všimněte si, že GridView uvádí název a cenu všech produktů spolu s Select LinkButton. Kliknutím na tlačítko Vybrat dojde k zpětnému odeslání. V kroku 2 se dozvíte, jak zobrazit DetailsView odpověď na tento zpětný příspěvek zobrazením podrobností o vybraném produktu.
Obrázek 7: Každý řádek produktu obsahuje tlačítko Vybrat odkaz (kliknutím zobrazíte obrázek v plné velikosti)
Zvýraznění vybraného řádku
GridView ProductsGrid
má SelectedRowStyle
vlastnost, kterou lze použít k diktování vizuálního stylu vybraného řádku. Při správném použití to může zlepšit uživatelské prostředí tím, že jasněji ukazuje, který řádek GridView je aktuálně vybrán. Pro účely tohoto kurzu zvýrazníme vybraný řádek žlutým pozadím.
Stejně jako v našich dřívějších kurzech se snažíme zachovat estetická nastavení definovaná jako třídy CSS. Proto vytvořte novou třídu CSS v Styles.css
souboru s názvem SelectedRowStyle
.
.SelectedRowStyle
{
background-color: Yellow;
}
Pokud chcete tuto třídu CSS použít na SelectedRowStyle
vlastnost všech objektů GridView v naší sérii kurzů, upravte GridView.skin
skin v motivu DataWebControls
tak, aby zahrnoval SelectedRowStyle
nastavení, jak je znázorněno níže:
<asp:GridView runat="server" CssClass="DataWebControlStyle">
<AlternatingRowStyle CssClass="AlternatingRowStyle" />
<RowStyle CssClass="RowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<SelectedRowStyle CssClass="SelectedRowStyle" />
</asp:GridView>
S tímto přidáním je nyní vybraný řádek GridView zvýrazněn žlutou barvou pozadí.
Obrázek 8: Přizpůsobení vzhledu vybraného řádku pomocí vlastnosti GridView SelectedRowStyle
(kliknutím zobrazíte obrázek v plné velikosti)
Krok 2: Zobrazení podrobností vybraného produktu v zobrazení DetailsView
ProductsGrid
Po dokončení GridView, vše, co zbývá, je přidat DetailsView, který zobrazí informace o konkrétním vybraném produktu. Přidejte ovládací prvek DetailsView nad GridView a vytvořte nový ObjectDataSource s názvem ProductDetailsDataSource
. Vzhledem k tomu, že chceme, aby tento DetailsView zobrazoval konkrétní informace o vybraném produktu, nakonfigurujte ProductDetailsDataSource
tak, aby používal metodu ProductsBLL
třídy GetProductByProductID(productID)
.
Obrázek 9: Vyvolání ProductsBLL
metody třídy GetProductByProductID(productID)
(kliknutím zobrazíte obrázek v plné velikosti)
productID
Musí mít hodnotu parametru získanou z vlastnosti GridView ovládacího prvkuSelectedValue
. Jak jsme probrali dříve, vlastnost GridView SelectedValue
vrátí první hodnotu datového klíče pro vybraný řádek. Proto je nutné, aby vlastnost GridView DataKeyNames
byla nastavena na ProductID
hodnotu , aby se hodnota vybraného ProductID
řádku vrátila parametrem SelectedValue
.
Obrázek 10: Nastavení parametru productID
na vlastnost GridView SelectedValue
(kliknutím zobrazíte obrázek v plné velikosti)
Jakmile productDetailsDataSource
je objekt ObjectDataSource správně nakonfigurovaný a svázaný s objektem DetailsView, je tento kurz dokončený. Při první návštěvě stránky není vybrán žádný řádek, takže vlastnost GridView SelectedValue
vrátí Nothing
. Vzhledem k tomu, že neexistují žádné produkty s NULL
ProductID
hodnotou, metoda nevrácí GetProductByProductID(productID)
žádné záznamy, což znamená, že DetailsView se nezobrazuje (viz Obrázek 11). Po kliknutí na tlačítko Vybrat na řádku GridView se vytvoří zpětná vazba a detailsView se aktualizuje. Tentokrát gridView SelectedValue
vlastnost vrátí ProductID
hodnotu vybraného řádku, GetProductByProductID(productID)
metoda vrátí ProductsDataTable
s informacemi o tomto konkrétním produktu a DetailsView zobrazí tyto podrobnosti (viz Obrázek 12).
Obrázek 11: Při první návštěvě se zobrazí pouze GridView (kliknutím zobrazíte obrázek v plné velikosti).
Obrázek 12: Po výběru řádku se zobrazí podrobnosti o produktu (kliknutím zobrazíte obrázek v plné velikosti).
Souhrn
V tomto a předchozích třech kurzech jsme viděli řadu technik pro zobrazení hlavních a podrobných sestav. V tomto kurzu jsme prozkoumali použití ovládacího prvku GridView s možností výběru pro hlavní záznamy a zobrazení DetailsView k zobrazení podrobností o vybraném hlavním záznamu na stejné stránce. V předchozích kurzech jsme se podívali na to, jak zobrazit hlavní sestavy nebo sestavy podrobností pomocí dropDownLists a zobrazit hlavní záznamy na jedné webové stránce a podrobné záznamy na druhé.
Tento kurz uzavírá naši zkoušku mistrovských/podrobných zpráv. Počínaje dalším kurzem začneme zkoumat přizpůsobené formátování pomocí gridView, DetailsView a FormView. Uvidíme, jak přizpůsobit vzhled těchto ovládacích prvků na základě dat, která jsou na ně vázaná, jak sumarizovat data v zápatí GridView a jak pomocí šablon získat větší míru kontroly nad rozložením.
Všechno nejlepší na 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 zastihnout na mitchell@4GuysFromRolla.comadrese . nebo prostřednictvím jeho blogu, který najdete na adrese http://ScottOnWriting.NET.
Zvláštní poděkování
Tato série kurzů byla zkontrolována mnoha užitečnými recenzenty. Hlavním recenzentem pro tento kurz byl Hilton Giesenow. Chtěli byste si projít své nadcházející články na webu MSDN? Pokud ano, dejte mi řádek na mitchell@4GuysFromRolla.com.
Váš názor
https://aka.ms/ContentUserFeedback.
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat problémy z GitHub coby mechanismus zpětné vazby pro obsah a nahrazovat ho novým systémem zpětné vazby. Další informace naleznete v tématu:Odeslat a zobrazit názory pro