👋 Nový obsah na borekb.cz

Info Tento blog je v "read-only módu" a nový obsah již nebude přibývat. O vývoji píšu na DevBlog.

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:

Struktura tabulky Customer

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

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:

Kontrola SQL příkazů

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.

GridView v akci

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):

Převod na TemplateField

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

Vlastnost ShowFooter nastavit na true

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:

Editace šablon

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:

Šablona je hotova

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

Trocha kódu na závěr

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ý.

Zařazeno do kategorií |
B. Stanik T. (Út, 2006-01-10 14:58):

Abych pravdu řekl, tak přidávání řádku pomocí patičky v GridView mi nepřijde šťastné. Domnívám se, že použití DetailsView je k tomu mnohem účelnější.

Z praxe bych nedoporučoval dělat v tabulce přidávácí řádek, existuje k tomu několik důvodů:

1. Řádek je na konci tabulky, což může být mimo zorné pole uživatele, navíc je potom kvůli každé validaci údajů scrolovat obrazovkou. Pokud se použije stránkování, tak se přidávací formulář hrubě plete do navigátoru.

2. Celá tabulka se musí stále překreslovat.

3. Riziko vícenásobného přidání. Poslední přidaný řádek se po odeslání nemusí uživateli zobrazit nakonci, ale někde uprostřed tabulky (podle zvoleného sortu) a pro uživatele je obtížné jej identifikovat (v případě zapnutého stránkování přímo nemožné).

Borek (Út, 2006-01-10 22:58):

Díky za dobré připomínky. Článek je zaměřen na technickou stránku věci, ale určitě neuškodí popřemýšlet nad použitelností řešení.

1. Možná nejsem typický uživatel, ale já bych možnost přidání řádku skutečně na konci tabulky hledal. Jsem na to zvyklý třeba z Excelu nebo z Accessu. Pravdou ale je, že viditelný odkaz hned nahoře je asi přeci jen pro uživatele lepší možností. S validací by v typickém případě být problém neměl, protože na prvním místě zafunguje JavaScript (má ho zapnutý drtivá většina uživatelů), takže scrollování odpadá. Rovněž mi nepřipadá, že by se přidávací řádek pletl do stránkového navigátoru.

2. Pokud chápu správně, že máte na mysli víc přidávaných záznamů za sebou, potom máte pravdu.

3. Ano, to je nepříjemné. Řešení, které mě napadá, je provést cross-page posting na nějakou jinou stránku, která oznámí úspěšné vložení do databáze a potom nabídne link nebo rovnou přesměruje zpět na tabulku.

4. Jako čtvrtou výhradu připomenu tu z článku – při nulovém počtu záznamů příklad zcela přestane fungovat.

Postup má ale i své výhody:

1. Integruje do GridView možnost přidávat řádky, takže z něj dělá kompletní editor databáze. Mě při prvním setkání s GridView poměrně překvapilo, že operace insert není podporována.

2. Přidání řádku přes patičku je úsporné na místo. Není potřeba vytvářet žádný další formulář.

Celkově vzato se mi zdá, že přidávání řádku přes DetailsView by asi mělo dostat přednost, ale znovu opakuji, že smyslem článku bylo popsat technický postup bez zbytečného filosofování okolo. Třeba se to někomu bude hodit.

B. Stanik T. (St, 2006-01-11 09:13):

Mé připomínky byly samozřejmě spíše filosofického rázu a vyvěrají ze zkušeností s vývojem administračních rozhraní v různých platformách a s různými nástroji.

P.S.: Jak slouží nový monitor?

B. Stanik T. (St, 2006-01-11 11:41):

Ještě mne napadá jedno trochu čistší řešení:

Ponechat v patičce pouze tlačítko AddNewRow, to vygeneruje nový řádek s NULL hodnotou a automaticky spustí jeho editaci, takže nový řádek bude přidán při jakémkoli sortu vždy na začátek nebo na konec tabulky a vkládání hodnot již bude ošetřeno standartním způsobem jako EDIT.

Nevýhodou může být:

  • Nutnost odstranit nullový řádek při ukládání.
  • V případě existence nullového řádku nabídnout k editaci existující nullový řádek.
  • Nutnost speciálního ošetření primárního klíče (a všech skrytých hodnot – u nich může být velký problém, pokud se používají)
Borek (St, 2006-01-11 12:12):

P.S.: Jak slouží nový monitor?

K mému rozčarování ještě nedorazil. Ale nechci pana Lisého otravovat už potřetí, lhůta na doručení je 30 dní, takže ještě mají chvilku času. Proč jen jsem tak nedočkavý… :)

B. Stanik T. (St, 2006-01-11 12:21):

K nám asi před hodinou dorazil pošťák od České pošty ;-)

Anonymous (Pá, 2007-11-16 14:41):

To je fakt supr! Další opsaný návod. A k čemu mi to je, když potřebuju zobrazit data, které nejsou z databáze? Ani sortovat mi to nejde!

Joe (So, 2009-08-22 13:31):

Dík moc, přesně tohle jsem hledal !!!

RP (St, 2009-09-09 14:18):

Dobrý den, chtěl bych se zeptat na jednu věc týkající se GridView, kterou se mi nedaří vyřešit ani vygooglovat.

Pokud v GridView zobrazuji data z SQL databáze, tak jsou vždy setříděna podle sloupce „Id“. Lze nějak nastavit, aby se při prvním otevření aplikace/webu otevřela tabulka setříděná např. podle sloupce „Name“?

Díky RP

Komentáře jsou uzavřeny (blog je v read-only módu). Pokud mě chcete kontaktovat, můžete mailem.