Konkrét feladatunk a következő: legyen egy táblázat egy web oldalon, melynek egyik oszlopában linkek jelenjenek meg. Ha a felhasználó egy ilyen linkre kattint, akkor a kliens oldali böngésző nyisson egy új ablakot és abba jelenítse meg a táblázat adott sorának adatát.
Az első lap a WebForm1 lesz, míg a megjelenő kis ablak a WebForm2.
WebForm1.aspx
Először készítsünk egy adathalmazt, melynek adatai megjelennek majd a web lapon lévő táblázatban. Ehhez egy DataTable osztályt hozunk létre melybe felveszünk három oszlopot.
private void Page_Load(object sender, System.EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.Add("id", Type.GetType("System.Int32"));
dt.Columns.Add("a", Type.GetType("System.String"));
dt.Columns.Add("b", Type.GetType("System.String"));
Az adatsorok létrehozásához egy DataRow osztály segít bennünket. Egy ciklus segítségével létrehozunk tíz új adatsort. Az új sort a DataTable NewRow függvényének hívásával kapjuk. Az így nyert sor pontosan olyan szerkezetű oszlopokat fog tartalmazni, mint amilyen szerkezetű DataTable-t hoztunk létre. A sor minden oszlopába írunk egy-egy adatot, majd az új sort hozzáadjuk a már meglévőkhöz a DataTable Rows property-jén keresztül az Add függvényt meghívva.
DataRow dr;
for (int i=0; i<10; i++)
{
dr = dt.NewRow();
dr[0] = i;
dr[1] = DateTime.Now.AddDays(i).ToShortDateString();
dr[2] = DateTime.Now.AddDays(i).DayOfWeek.ToString();
dt.Rows.Add(dr);
}
A sorok hozzáadása után érvényesítjük az adatok változtatását, majd hozzákötjük a WebForm-on lévő DataGrid-hez.
dt.AcceptChanges();
DataGrid1.DataSource = dt.DefaultView;
DataGrid1.DataBind();
}
Ezt követően még rendelkeznünk kell arról, hogy miként is jöjjön létre egy DataGrid-be egy olyan oszlop, mely linkeket tartalmaz és képes új böngésző ablakot nyitni. Ehhez válasszuk ki a DataGrid-et, majd a Properties ablakban a felsorolt property-k alatt található Property Builder... linkre kattintva nyissuk meg azt a szerkesztő ablakot, ahol - többek között - ezt a beállítást elvégezhetjük.
Itt válasszuk a Columns tételt, majd a lap tetején lévő „Create columns automatically at run time” jelölőnégyzetet rögtön töröljük is. Ezzel elérjük, hogy a DataGrid oszlopai nem automatikusan jönnek létre a DataGrid-hez kötött adathalmaz szerkezete alapján, hanem azokat mi magunk határozhatjuk meg.
Az Avaliable columns-ból tegyünk át két Bound Column elemet a Selected columns listába. Ezeknél a DataField mezőnél adjuk meg egyszer az „a” egyszer pedig a „b” értéket. Ezzel létrehoztunk két olyan oszlopot a DataGrid-be, mely a hozzákapcsolt adatforrás „a” és „b” nevű oszlopának értékét fogja megjeleníteni.
Hozzuk most létre a linkeket tartalmazó oszlopot. Ehhez egy HyperLink Column elemet is vigyünk át a Selected columns listába. Itt két tulajdonságot kell megadnunk. Az egyik az URL format string lesz, melybe a linkhez tartalmazó URL-t adhatjuk meg, ez legyen az alábbi:
javascript:var win = window.open('WebForm2.aspx?ID={0}',null,'width=500,height=25,resizable=0'); win.focus();
Amint látható ez egy kis javascript lesz, amely a windows objektumon keresztül annak open függvényével nyit egy új ablakot. Az ablakba a WebForm2.aspx lap szolgáltatja majd a megjelenítendő HTML kódot, melynek egy ID paramétert is átadunk, aminél az érték egy változó lesz, amit {0} módon jelölünk. Ezt követi még néhány paraméter, mely a megjelenő ablak tulajdonságaira vonatkozik, végül egy focus függvény hívás, mely az újonnan megnyitott ablakra adja a vezérlést.
Az URL-ben használtunk egy paramétert, {0} jelöléssel. Ez a paraméter úgy kap értéket, hogy az URL field mezőben megadjuk az „id” szót. Ez utal arra, hogy a paraméter értékét a DataGrid-hez kötött adatforrás ID nevű oszlopa adja. Így mire a web lap előáll, a linkek már az alábbiak szerint néznek ki a HTML kódban:
<a href="javascript:var win = window.open('WebForm2.aspx?ID=0',...
<a href="javascript:var win = window.open('WebForm2.aspx?ID=1',...
WebForm2.aspx
Amikor a WebForm2 meghívásra kerül, akkor kapunk egy ID paramétert, melyből tudhatjuk, hogy melyik sorában is történt a kattintás a DataGrid-en. Így nincs más tennivalónk, mint ezt a kódot meghatározni és ettől kezdve már egyszerű a dolgunk.
private void Page_Load(object sender, System.EventArgs e)
{
int i = Convert.ToInt32(Request.QueryString["id"]);
...
}