C# - Web DataGrid

DataGrid 5. rész

forráskód letöltése
Sorozatunk mostani részében azt vizsgáljuk, hogy miként szerkesztheti a felhasználó a megjelenő HTML táblázat egy adott sorát és a változtatások miként érvényesíthetőek az MS SQL szerver adott táblájában is.
A példa használatához hozzunk létre a web szerverünkön egy DataGrid05 virtuális könyvtárat, mely a mellékelt példára mutat. A példához az MS SQL adatbázis szerver Northwind példaadatbázisát használjuk. A példa fordítása előtt az sqlConnection1 komponens ConnectionString-jén valószínűleg változtatni kell annak függvényében, hogy mi az SQL szervert futtató gép neve, milyen bejelentkezési nevünk és jelszavunk van annak eléréséhez!
A példában látható adatkapcsolatot (SqlConnection - SqlDataAdapter) ugyanazzal a módszerrel hoztuk létre mint sorozatunk előző részében, így ezt most nem ismételnénk meg.
A kapcsolat biztosítani fogja, hogy a Customers táblát megtekinthetjük teljes terjedelmében. Kattintsunk most jobb gombbal a DataGrid-en és válasszuk a Property Builder menüpontot. A megjelenő ablakban a DataSource és DataMember mezőknél válasszuk ki az adatkapcsolatot.
A Columns lapon a Create columns automatically at run time CheckBox ki van jelölve. Ezt szüntessük meg, így ekkor mi magunk adhatjuk meg, hogy milyen oszlopok legyenek láthatóak a DataGrid-ben és azok nem automatikusan generálódnak. Válasszuk ki a DataFields-ből a CustomerID, CompanyName, Address, City oszlopokat és mozgassuk át a Selected columns listába. Itt kattintsunk a CustomerID-re és a lap alján lévő ReadOnly CheckBox-ot jelöljük meg. Ennek az lesz a haszna, hogy amikor szerkesztjük a táblázat valamely sorát, a CustomerID mező akkor is csak egy feliratként jelenik meg, értéke nem lesz szerkeszthető.
Szükségünk lesz még egy oszlopra, mely az adott sorok szerkeszthetőségét biztosítja. Ehhez a Button Column-ból az Edit, Update, Cancel elemet mozgassuk át szintén a Selected columns listába, annak végére. Ezzel létrehoztunk egy olyan oszlopot, ahol nyomógombok, vagy linkek jelenhetnek meg. Ha ezek valamelyikére kattint a felhasználó, akkor az adott sort szerkesztheti majd.
Az új oszlop fejlécének szövegét a Header text mezőben adhatjuk meg. Háromféle gomb, vagy link jelenhet meg, ezek mindegyikéhez adhatunk egy egyedi feliratot az Edit text, Update text és Cancel text mezőbe. A Button type listájából választhatjuk ki, hogy nyomógombot, vagy linket szeretnénk látni.
Mivel első oszlopunk a CustomerID csak olvasható, jelöljük ezt úgy a felhasználó részére, hogy ezt az oszlopot más háttérszínnel jelenítjük meg. Ehhez a Format lapon a Columns - Columns [0] CustomerID - Items hierarchiában lévő elem kijelölése után, a Back Color listából választhatunk egy tetszőleges háttérszínt.
Ezzel a DataGrid-et előkészítettük, most nézzük, miként kezelhetjük a három lehetséges funkciót: a szerkesztést, a változtatást, vagy a változtatás elvetését.
Ehhez három eseményt kell kezelnie alkalmazásunknak. Alapesetben a táblázat minden sorában csak a szerkesztés gomb jelenik meg. Ha erre kattintunk, akkor jön létre az EditCommand nevű esemény.
Ahhoz, hogy a DataGrid által megjelenített táblázat egy sora szerkeszthető legyen - vagyis a celláiban egy-egy adatbeviteli mező jelenjen meg - nem kell mást tennünk, mint az EditItemIndex property-be egy -1-nél nagyobb számot írni. Az itt megadott szám lesz annak a sornak a száma, mely szerkeszthető lesz. A sorszámozás nullától kezdődik. Hogy melyik gombra kattintott a felhasználó, vagyis hogy hányadik sor lett így kiválasztva, azt az esemény DataGridCommandEventArgs típusú paraméterének Item property-jében található ItemIndex property adja.
    private void DataGrid1_EditCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
    {
      DataGrid1.EditItemIndex = e.Item.ItemIndex;
      ...
Amikor megjelenik egy sor szerkesztésre, akkor annál a sornál eltűnik a „Szerkesztés” gomb és helyette megjelenik a tárolás, illetve a változtatás visszavonására irányuló két gomb. Ha a visszavonást választja a felhasználó, akkor jön létre a CancelCommand esemény.
Itt igen egyszerű a helyzetünk: a DataGrid EditItemIndex property-jének egyszerűen adjunk -1-et értékül.
    private void DataGrid1_CancelCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
    {
      DataGrid1.EditItemIndex = -1;
      ...
Bonyolultabb a helyzet, ha a felhasználó a változtatások tárolása mellett dönt. Ekkor az UpdateCommand esemény jön létre.
Itt el kell érnünk a táblázatban megjelenő TextBox-okat, melyben az adatok szerkesztése történik ahhoz, hogy az új értékeket kiolvashassuk.
    private void DataGrid1_UpdateCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
    {
      TextBox comapanyname = (TextBox)e.Item.Cells[1].Controls[0];
      TextBox address = (TextBox)e.Item.Cells[2].Controls[0];
      TextBox city = (TextBox)e.Item.Cells[3].Controls[0];
Ezt követően megnyitjuk a már létrehozott kapcsolatot az SQL szerverrel.
      sqlConnection1.Open();
Majd megfogalmazunk egy SQL Update parancsot a szükséges három érték megváltoztatásához.
      SqlCommand command = new SqlCommand("UPDATE Customers SET CompanyName = '"+comapanyname.Text+"', Address = '"+address.Text+"', City = '"+city.Text+"' where CustomerID='"+e.Item.Cells[0].Text+"'", sqlConnection1);
Az ExecuteNonQuery függvénnyel lefuttatjuk az Update-et és zárjuk az SQL kapcsolatot.
      command.ExecuteNonQuery();      
      sqlConnection1.Close();      
Ezt követően már csak az új adatok megjelenítéséről kell gondoskodnunk a már ismert módon: sqlDataAdapter1.Fill(dataSet11);
      DataGrid1.DataBind();
    }

DataGrid cikksorozat