C# - ButtonColumn osztály bemutatása

A DataGridColumn osztály leszármazottai 1. rész

forráskód letöltése
Most induló, öt részes cikksorozatunkban szentelünk egy kis figyelmet a Webes DataGrid kontrol oszloptípusainak, melyek közös jellemzője, hogy a DataGridColumn osztályból származnak, és segítségükkel hasznos funkciókat kapcsolhatunk a vizuális megjelenítés mellé. Azon túl, hogy ismertetjük jellemzőiket, egy-egy példa kíséretében bemutatjuk, hogyan lehet ezeket az oszlopokat létrehozni, és az egyes eseményekhez kezelőmetódusokat hozzáadni. Mai cikkünkben a ButtonColumn osztállyal foglalkozunk részletesebben, melynek segítségével nyomógombokat helyezhetünk el az egyes oszlopok celláiban, melyeknél megadhatjuk, hogy a kattintáskor milyen kérés jusson el a szerverhez.
Mellékelt példa megnyitása előtt szükséges egy WebGridColumnTypes01 nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
Általános jellemzők
Ahogy a bevezetőben már utaltunk rá, az adott oszlop celláiban megjelenő gomb kontrol a System.Web.UI.WebControls.ButtonColumn osztályból származik. Az egyes rekordokban megtalálható nyomógombok működésüket tekintve egyetlen tulajdonságban térnek el egymástól, mely tulajdonság meghatározza a gombok egyediségét, minek eredményeképpen eltérő eseménykezelés kapcsolható a megnyomásukhoz. Ráadásul minden eseménykezelő kód egyetlen metódusba ágyazható, mely egyszerűvé, nem utolsósorban átláthatóvá teszi a kódolást.
Az osztály jellemzőit property-jein keresztül adhatjuk meg, így ezek bemutatásával kezdjük az ismertetést. A property-k ismertetése után még ebben a szakaszban bemutatjuk az említett eseménykezelő működését, paraméterének jellemzőit. A következő részekben szót ejtünk a deklarációról, vagyis hogy miként használható a varázsló, illetve hogyan adhatjuk meg az oszlopokat manuálisan. Lássuk a property-ket:
ButtonType
Osztály: ButtonColumn
public virtual ButtonColumnType ButtonType {get; set;}
Megadhatjuk, hogy milyen típusú nyomógomb jelenjen meg az egyes cellákban. Lehetséges értékei a ButtonColumnType felsorolt típus elemei, melyek LinkButton, és PushButton. Az előbbi esetben egy link, utóbbi esetben egy normál nyomógomb stílusú elem jön létre.
CommandName
Osztály: ButtonColumn
public virtual string CommandName {get; set;}
Ebben a property-ben specifikálhatjuk egy név megadásával, hogy milyen műveletet szeretnénk végrehajtani a gomb megnyomásával. Értékként tetszőleges karakterlánc megadható, az eseménykezelőben erre a névre kell hivatkozni. A gombra kattintva egy ItemCommand esemény keletkezik, melynek kezeléséről a szakasz későbbi részében szólunk. Alapértelmezett értéke az üres karakterlánc (””), vagyis a String.Empty értéke.
DataTextField
Osztály: ButtonColumn
public virtual string DataTextField {get; set;}
Megadhatjuk, hogy az adatforrásul szolgáló virtuális adattábla mely oszlopát kapcsoljuk össze a DataGrid kontrol ezen oszlopával, vagyis ennek Text property-jével. Természetesen lehetőségünk van arra is, hogy a Text property értékét manuálisan adjuk meg. Alapértelmezett értéke az üres karakterlánc (””), vagyis a String.Empty értéke.
DataTextFormatString
Osztály: ButtonColumn
public virtual string DataTextFormatString {get; set;}
Lehetőségünk van arra, hogy a megjelenő nyomógombok feliratának szövegét formázzuk egy formázó karakterlánc megadásával. Alapértelmezett értéke az üres karakterlánc (””), vagyis a String.Empty értéke. A formázó karakterlánc a következő összetételű: {A:Bxx}, például {0:D2}. A karakterlánc két részből áll: az A értéke mindig nulla, a B értéke pedig a következő táblázat értékeinek valamelyike.
Formázó karakter Leírás
C A formázandó számértéket pénz formátumban jeleníti meg.
D A formázandó számértéket decimális formátumban jeleníti meg.
E A formázandó számértéket exponenciális formátumban jeleníti meg.
F A formázandó számértéket fixpontos formátumban jeleníti meg.
G A formázandó számértéket általános formátumban jeleníti meg.
N A formázandó számértéket számformátumban jeleníti meg.
X A formázandó számértéket hexadecimális formátumban jeleníti meg.
A példában, a második tag után szereplő számérték adja meg azt, hogy hány helyi értéken kell megjeleníteni az adott számot.
HeaderImageUrl
Osztály: ButtonColumn
public virtual string HeaderImageUrl {get; set;}
A property-ben megadhatjuk, hogy milyen képet szeretnénk látni az adott oszlop fejlécmezőjében szöveg helyett. Értékül egy valós URL-t kell megadni.
HeaderText
Osztály: ButtonColumn
public virtual string HeaderText {get; set;}
A property alkalmas annak a szövegnek a megadására, mely a fejlécmezőben megjelenik. Alapértelmezett értéke az üres karakterlánc (””), vagyis a String.Empty értéke.
Text
Osztály: ButtonColumn
public virtual string Text {get; set;}
A property-ben adhatjuk meg a nyomógombon megjelenő feliratot. Alapértelmezett értéke az üres karakterlánc (””), vagyis a String.Empty értéke.
Visible
Osztály: ButtonColumn
public bool Visible {get; set;}
Meghatározhatjuk, hogy legyen-e látható az adott oszlop az oldal betöltődése után, vagy sem. Alapértelmezett értéke TRUE.
A DataGrid kontrol megjelenésének formázására számtalan lehetőségünk van. A Properties ablak alsó felében az „Auto Format” feliratú linkre kattintva lehetőségünk van arra, hogy néhány előre megalkotott stílust húzzunk a DataGrid kontrolra.
Azonban az egyes oszlopokat egyedi formára is szabhatjuk, mivel rendelkeznek néhány property-vel, melyek a TableItemStyle osztályból származnak, és property-k tucatjával segítik, hogy az oszlopoknak, vagy akár az egyes celláknak egyedi megjelenést kölcsönözzünk. Az oszlopok esetén a FooterStyle, a HeaderStyle, és az ItemStyle property-k azok, melyekkel a formázás megadható. Mivel minden egyes cella a TableCell osztályból származik, annak ControlStyle property-jén keresztül van lehetőségünk egyediséget adni cellaszinten.
Az egyes oszlopokban megjelenő gombokra kattintva az ItemCommand esemény fut le, melynek kezelésére a System.Web.UI.WebControls.DataGridCommandEventHandler típusú kezelőmetódus alkalmas. A metódus paraméterként megkapja a küldő objektum referenciáját, valamint egy DataGridCommandEventArgs típusú változót, melynek lekérdezésével információt kaphatunk arra vonatkozóan is, hogy mely rekordban elhelyezett gomb váltotta ki az eseményt.
Az osztály három fontos property-vel rendelkezik:
CommandName
Osztály: DataGridCommandEventArgs
public string CommandName {get;}
Lekérdezhető, hogy a küldő objektumnak, jelen esetben egy ButtonColumn típusú kontrolnak mi a CommandName property-je. Ennek ismeretében – ahogy később példánkban is láthatjuk – differenciálhatók az egyes nyomógomb-funkciók.
CommandSource
Osztály: DataGridCommandEventArgs
public object CommandSource {get;}
Lekérdezhető az eseményt kiváltó objektum.
Item
Osztály: DataGridCommandEventArgs
public DataGridItem Item {get;}
Lekérdezhető, hogy az adott DataGrid kontrol melyik rekordja indította el az eseményt. Az elemek DataGridItem típusúak, melynek a property-jeivel, és metódusaival elérhetjük akár az egyes cellákban megjelenő információt is. A cellák TableCell típusú elemek, elérésük a következőképpen lehetséges:
TableCell tc = e.Item.Cells[0];
A Text property-ben pedig lekérdezhető a cella tartalma.
Oszlopgeneráló varázsló
A DataGrid kontrolhoz szerkesztési időben, egy varázsló segítségével is adhatunk oszlopokat, melyek alapvető tulajdonságait néhány lépésben megadhatjuk. Ehhez a DataGrid kontrol tulajdonságait összefoglaló Properties ablak alsó szegmensében válasszuk a „Property Builder” feliratú linket.
A megjelenő dialógusablak bal oldalán választhatunk tulajdonságcsoportot. A General menüpontban az adatforrásra vonatkozóan adhatunk meg információkat.
Szempontunkból érdekesebb a Columns menüpont, ahol megadhatjuk, hogy az itt beállított oszlopok mellett legyen-e automatikus oszlopgenerálás a forrás betöltésekor, valamint rendelkezhetünk az egyes oszlopok létrehozásáról, tulajdonságaik megadásáról. Az „Available Columns” listából kiválasztott oszlophoz megadhatunk tulajdonságokat, mint Text property, ButtonType property, stb.
A Paging menüpont alatt akkor van értelme engedélyeznünk, és tulajdonságainak megadásával inicializálnunk a DataGrid kontrol Paging szolgáltatását, ha a megjelenítendő adattartalom sok rekordból áll, és az egész információ nem látható az oldalon egyszerre görgetés nélkül. Ekkor megjelennek a megfelelő navigáló gombok a tartalom „görgetésére”.
A Format menüpontban a megjelenő feliratok betűtípusára vonatkozóan adhatunk meg adatokat, míg a Borders pontban a keretekre vonatkozóan.
A varázsló használatának eredményeképpen a HTML forrásban megjelennek a szükséges kódok, melyeket természetesen mi is megadhatunk, a varázsló használata után javíthatunk, testre szabhatunk.
Manuális oszlopmegadás
A példa alkalmazásban egy DataGrid kontrolt olyan forrásból töltünk fel, mely oszlopaiban egy képzeletbeli terméklista elemeinek nevét és árát tároljuk.
A DataGrid kontrolban ezen két oszlop mellett megjelenítünk két oszlopot, melyek ButtonColumn típusúak, és arra szolgálnak, hogy egy terméket kiválasztva az egyikkel hozzáadjuk az elemet egy listához, majd a másikkal elvegyük azt. A listát egy másik DataGrid objektumban jelenítjük meg, figyelve arra, hogy egy terméket a rekord egyik gombjával hozzáadva a listához csak a rekord másik gombjának segítségével lehessen azt a listából törölni.
A ButtonColumn típusú oszlopokkal rendelkező DataGrid kontrolt a következőképpen deklaráltuk a HTML-forrásban. Az OnItemCommand attribútumban adható meg annak a kezelőmetódusnak a neve, mely a nyomógombok kattintásának eseményét kezeli:
<asp:datagrid id="ItemsGrid" runat="server" AutoGenerateColumns="False" OnItemCommand="Grid_CartCommand">
Megadjuk a listába berakó gomb deklarációját:
...
<Columns>
<asp:ButtonColumn Text="Berak" ButtonType="PushButton" HeaderText="Felvétel a kosárba" CommandName="AddToCart"></asp:ButtonColumn>
A listából törlő gomb deklarációját:
<asp:ButtonColumn Text="Kivesz" ButtonType="PushButton" HeaderText="Törlés a kosárból" CommandName="RemoveFromCart"></asp:ButtonColumn>
És a két értéket tároló oszlopot is létrehozzuk:
<asp:BoundColumn DataField="StringValue" HeaderText="Termék neve"></asp:BoundColumn>
<asp:BoundColumn DataField="CurrencyValue" HeaderText="Termék ára" DataFormatString="{0:c}">
...
</asp:BoundColumn>
</Columns>
A lap első töltődésekor a termékeket tartalmazó DataGrid kontrolunknak megadjuk forrásként a feltöltött adattáblát. A forrás DataTable objektum a CreateDataSource metódusban töltődik fel.
A listát tartalmazó DataGrid kontrol tartalmát pedig minden lapbetöltődés között a Session objektum egy rekeszébe tesszük, hogy a lista következő elemei ne egy üres listába kerüljenek, hanem az előző választásokhoz fűződjenek. Az inicializációban természetesen egy üres DataTable objektumot kap forrásként.
Nézzük meg a kattintások eseménykezelőjét:
void Grid_CartCommand(Object sender, DataGridCommandEventArgs e) 
{
A céllista egy új rekorddal gazdagodik egy kattintáskor, amikor a „Betesz” feliratú gombok valamelyikét nyomjuk meg.
  DataRow dr = Cart.NewRow();
A paraméter objektumból kivesszük, hogy milyen lesz ez a tartalom:
  TableCell item = e.Item.Cells[2];
  TableCell price = e.Item.Cells[3];
  string itemstr = item.Text;
  string pricestr = price.Text;
Megvizsgáljuk, hogy milyen CommandName property-vel rendelkező gomb nyomódott meg:
  if (((Button)e.CommandSource).CommandName == "AddToCart") 
  {
Hozzáadás esetén egy rekordot felfűzünk a listára a kiemelt tartalommal:
    dr[0] = itemstr;
    dr[1] = pricestr;
    Cart.Rows.Add(dr);
  }
Egyébként pedig a megfelelő rekordot töröljük, a DataView osztály RowFilter property-jével választva ki a rekordot:
  else
  {  
    CartView.RowFilter = "Item='" + itemstr + "'";
    if (CartView.Count > 0) 
    {     
      CartView.Delete(0);
    }
    CartView.RowFilter = "";
  }
Majd frissítjük a forrást:
  ShoppingCart.DataBind();
}

A DataGridColumn osztály leszármazottai cikksorozat