Jak přidat řádek pomocí GridView

GridView je mocný ovládací prvek ASP.NET 2.0. Prakticky bez nutnosti psaní kódu umí natáhnout data z databáze, třídit je, stránkovat, editovat nebo mazat. Bohužel je ale neumí nijak jednoduše přidávat – k tomu účelu slouží prvek DetailsView. Přesto však existuje postup, který umožňuje řádky přidávat i přes prvek GridView.

Ačkoliv tato možnost pravděpodobně zajímá mnoho ASP.NET vývojářů, na webu moc konkrétních informací nalézt nelze, a když už jsou, týkají se spíše programového přidávání řádků. Tento článek se tedy snaží zaplnit určitou mezeru, když ukazuje konkrétní vizuální postup ve Visual Studiu.

Upozornění: Zde předvedený postup používá přímý přístup do databáze bez využití business vrstvy, což není pro rozsáhlejší aplikace doporučeníhodné. Pro některé jednoduché scénáře se však může jednat o rychlé a pohodlné řešení.

Pointa postupu spočívá ve využití oblasti zápatí (FooterRow), kam lze ručně přidat textboxy a případně nějaké ty validátory. Zde je postup krok za krokem:

1. Příklad používá jednoduchou tabulku Customer s následující strukturou:

Zde jsou nějaká ukázková data:

2. Do stránky vložíme prvek GridView, třeba přetažením databázové tabulky na formulář. Tím dojde k automatickému vytvoření connection stringu a přednastavení ovládacích prvků SqlDataSource a GridView. Můžeme zkontrolovat, zda Visual Studio v prvku SqlDataSource dobře připravilo SQL dotazy:

Dialog lze zobrazit pomocí kontextového menu prvku SqlDataSource1. V druhém kroku průvodce vyberte „Specify a custom SQL statement or stored procedure“ (defaultně je vybrána druhá možnost), čímž získáte přístup ke konkrétním SQL příkazům. Druhá možnost, jak se k nim dopracovat, vede přes vlastnosti prvku SqlDataSource1 – zde najdete položky SelectQuery, UpdateQuery atd., které můžete podle libosti přímo upravovat. No a nakonec samozřejmě existuje třetí, nevizuální možnost: ve zdrojovém kódu stránky se rovněž můžete přesvědčit, že Visual Studio odvedlo svoji práci dobře a že SQL příkazy jsou nastaveny dobře.

3. Využijeme sílu Visual Studia, resp. ASP.NET a v rychlosti uděláme z GridView výkonný editor naší databáze.

Až sem se zkušený „klikač“ může dostat takřka za pár sekund, ale jak přidat nový řádek do databáze? V dialogu „Edit columns“ lze sice přidat tlačítko s akcí insert, ale očekávaná funkčnost se nekoná (tento linkbutton se využije u prvku DetailsView, který přidávání nových záznamů do databáze podporuje). Přišel čas na speciální postup.

4. Převedeme všechny sloupečky na šablonové sloupce (template field):

5. Prvku GridView nastavíme vlastnost ShowFooter na true (výchozí je false):

6. Nyní se pustíme do editování šablon pro patičku. Přepnutí do módu editování šablony je přístupné přes pravé tlačítko nebo přes smart tag. Zde je příklad práce se šablonou patičky sloupce se jménem zákazníka:

Pár poznámek:

• Pole pro Id nepřidáváme, protože toto číslo je generováno automaticky při vkládání do databáze.
• Do sloupce s tlačítky přidáme vlastní tlačítko, které zatím nic nedělá.
• Všechny textboxy nějak pojmenujeme, např. NewName a NewCity.
• Pro jednoduchost není validován vstup. Nebyl by ale problém do jednotlivých patičkových šablon potřebné validátory přidat.

Výsledek snažení vypadá takto:

7. Nyní už jen stačí přidat trochu kódu, aby tlačítko „Add new row!“ něco dělalo:

Jak vidno, kód je triviální. Na událost Click našeho tlačítka se volá metoda SqlDataSource­1.Insert(). Jelikož SqlDataSource zatím nemá potřebné informace o tom, jaké hodnoty má dosadit do parametrů, je potřeba zavěsit se na jeho událost Inserting, která proběhne těšně před vykonáním insertu. Zde jsou získány hodnoty z námi přidaných textových polí a ty jsou nastaveny jako parametry INSERT příkazu.

A to je vše. Celý postup je poměrně jednoduchý, většinou stačí jen hodně klikat a také nutného kódu je velmi málo. Zde uvedený příklad ukazuje základní ideu postupu a rozhodně se nejedná o dokonalou implementaci: bylo by záhodno data získávat a aktualizovat pomocí business vrstvy a také provádět validaci uživatelského vstupu, ale tyto věci byly v zájmu jednoduchosti záměrně vynechány. Rovněž je potřeba upozornit na jeden háček, který spočívá v tom, že příklad přestane fungovat v případě, že v tabulce nebude ani jeden řádek. Potom se totiž nerenderuje tabulka, ale pouze text oznamující, že není co zobrazit.

Pokud máte k postupu poznámky, ať už konstruktivní nebo destruktivní, obohaťte další čtenáře v komentářích. Nejen já vám budu vděčný.