ASP.NET ile DataGrid Kullanımı (C#)

Makalemiz boyunca vereceğimiz örnekler, C# diliyle Visual Studio .NET ortamında ve Access Database ile olacağı için bir çok arkadaşımıza güzel bir kaynak olacağına inanıyorum.

Adım adım gideceğimiz uygulamamızın sonunda, elinizde mükemmel bir kaynak olacak. İsterseniz hemen başlayalım.

1) Yeni bir Web Application açıyoruz ve DataGrip.aspx olarak yeni bir web form oluşturuyoruz. Uygulamamız CodeBehind şeklinde olacağı için kodlarımız DataGrid.aspx.cs dosyasında bulunacak.

2) Toolbar dan sürükle bırak yardımıyla, bir adet DataGrid nesnesini sayfamıza koyalım. Farkettiğiniz üzerine DataGrid nesnemizin adı DataGrid1 oldu. Kodlama sırasında nesnemizin adı önemli olduğu için, doğabilecek karışıklıklarıda önlemek amacıyla, Properties penceresinden DataGrid nesnemizin (ID) özelliğini, varolan DataGrid1 değeri yerine myGrid olarak değiştirelim.

3) Properties ekranında bulunan auto format ile DataGrid inize istediğiniz formatı verebilrsiniz. Biz Professional1 Formatı nı seçiyoruz.

4) Properties ekranında bulunan bir önemli özellik de AutoGenerateColumns.
Değerinin true olması durumunda, DataGrid e bağlanan verikaynağı ile aynı özellikleri kullanarak run-time da oluşturulacaktır. Yani bir nevi veritabanına ait tabloyu size sunacaktır.
Değerinin false olması durumunda ise, run-time oluşturulmayacak ve siz istediğiniz kolanları ekleyebilecek ve hatta verilerin gösterimini bile değiştirebileceksiniz. Biliyorum, eğer ilk uygulamanızsa kafanız biraz karışmış olabilir. Ancak biz iki türlüsünü de deneyeceğimiz için biraz sabretmenizi istiyorum. Şimdilik değerini true olarak ayarlayınız.

5) Bir Önemli özelliğimiz ise, yine properties penceresinden erişebileceğiniz AllowPaging. Eğer DataGrid imizde otomatik olarak sayfalama yapmak istersek bu değeri true olarak değiştirmemiz gerekecektir. Biz şimdilik değerini false olarak ayarlayacağız. (Herşey sırayla.)

6) Şimdi, hafiften kod kısmına geçelim. Sayfamızın Load eventine ulaşarak gerekli veritabanı bağlantılarını gerçekleştireceğiz. Ve ardından verilerimizi DataGrid imize bağlayacağız. Hatırlatmama gerek var mı bilmiyorum, gerekli namespace leri lütfen import etmeyi unutmayınız.
Biz makalemizde herkezde MSSQL server olmaması ihtimaline karşın Access DataBase dosyası ile OleDB bağlantısı yapacağız. İsterseniz SQL bağlantısı ile de tüm işlemleri gerçekleştirebilirsiniz.
Varolan veritabanını makalemizin sonunda bulunan linkten dosyayı indirerek kullanabilirsiniz.

private OleDbDataAdapter oleAdap;
private DataSet ds;
private void Page_Load(object sender, System.EventArgs e)
{

//bağlanti cümlemizi belirtiyoruz
OleDbConnection oleConn;
oleConn = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; DATA Source=" + Server.MapPath("db/db.mdb"));

// OleDbDataAdapter ile Command cümlemizi giriyoruz
oleAdap = new OleDbDataAdapter("SELECT * FROM namestable", oleConn);

// Yeni bir DataSet oluşturup
ds = new DataSet();

// bu DataSet e verileimizi dolduruyoruz.
oleAdap.Fill(ds,"namestable");

// DataGrid imizin veri kaynağını belirtiyoruz.
myGrid.DataSource = ds;

// ve verilemizi bağlıyoruz.(PostBack değilse)
if(!IsPostBack) myGrid.DataBind();

Bu kodları yazdıktan sonra projenizi çalıştırdığınızda, veritabanındaki tüm verilerin DataGrid içersinde liselendiğini göreceksiniz.

Gördüğünüz gibi bu haliyle DatGrid imiz pek hoş durmuyor, ve ayrıca pek de bir özelliği yok. Sadece veritabanındaki verileri komple listeledi. Şimdi isterseniz yavaş yavaş daha kullanışlı bir hale getirelim.

7) Öncelikle DataGrid imize ait properties ekranında bulunan Property Builder linkine tıklayalım ve Columns sekmesine gelelim. Karşınıza aşağıdaki gibi bir ekran çıkacaktır.

8) En yukarıda bulunan Create columns automaticaly at run time ChackBox ını boş bırakın. Bu makalemizin başında bahsettiğimiz AutoGenerateColumns ile aynı işi yapmaktadır.

9) Öncelikle 6 adet Bound Column seçip sağ tarafa geçirin. Yukarıdaki şekilde ID alanına ait Bound Column sağ tarafa geçirilmiş durumda. Ve Header Text ve Data Field özellikleri bizim tarafımızdan doldurulmuştur.
Header Text; DataGrid de o alanın en yukarsında yazılması istenen başlıktır.
Data Field ise; veritabanımızdaki alanın ismidir.
Bu şekilde; name, surname, age, tel ve fax alanlarımızıda Bound Column olarak olşturuyoruz. DataField kısımlarına sırasıyla; name, surname, age, tel, fax yazıyoruz. Header Text kısımlarına ise sırasıyla; İsim, Soayad, Yaş, Telefon, Fax yazıyoruz.

Bu ekranda en altta görülen Read Only CheckBox ı; DataGrid in Edt Modunda iken var alon alanın asla değiştirilmemesini sağlar. Bu kullanıma en uygun alan ID alanımız için bu ChechkBox ı seçiyoruz.

10) Şimdiye kadar eklediğimiz kolonlar,  veri tabanından verilerimiz almak için gereken kolanlardı. Şimdi ise birde Button Column ekleyeceğiz. Button Columunlar göreceğiniz üzere bir kaç alternatiften oluşmaktadır. Biz öncelikle Edit, Update, Cancel Kolonu ekleyeceğiz. Aşağıdaki şekildeki gibi bir ekleme yapınız.

11) Birde Button Columnlardan Delete Column u ekleyelim. Header Text ini Sil olarak değiştirelim ve Button Type kısmını da PushButton yapalım.

12) Son olarak da bir adet HyperLink Column Ekleyelim. Gereli ayarlarıda aşağıdaki gibi yapalım.

13) Gerekli görsel ayarları yaptıktan sonra, gerekli kodlara geçelim;

14) Öncelikle DataGrid imizin EditCommand Event i içersine aşağıdaki kodu girelim.

private void myGrid_EditCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
myGrid.EditItemIndex = e.Item.ItemIndex;
myGrid.DataBind();
}

15) DataGrid imizin CancelCommand Event i içersine aşağıdaki kodu girelim.

private void myGrid_CancelCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
myGrid.EditItemIndex = -1;
myGrid.DataBind();
}

17)  DataGrid imizin UpdateCommand Event i içersine aşağıdaki kodu girelim.

private void myGrid_UpdateCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
TextBox txt1 = (TextBox)e.Item.Cells[1].Controls[0];
TextBox txt2 = (TextBox)e.Item.Cells[2].Controls[0];
TextBox txt3 = (TextBox)e.Item.Cells[3].Controls[0];
TextBox txt4 = (TextBox)e.Item.Cells[4].Controls[0];
TextBox txt5 = (TextBox)e.Item.Cells[5].Controls[0];

ds.Tables[0].Rows[e.Item.ItemIndex].BeginEdit();
ds.Tables[0].Rows[e.Item.ItemIndex][1]= txt1.Text;
ds.Tables[0].Rows[e.Item.ItemIndex][2]= txt2.Text;
ds.Tables[0].Rows[e.Item.ItemIndex][3]= txt3.Text;
ds.Tables[0].Rows[e.Item.ItemIndex][4]= txt4.Text;
ds.Tables[0].Rows[e.Item.ItemIndex][5]= txt5.Text;
ds.Tables[0].Rows[e.Item.ItemIndex].EndEdit();

OleDbCommandBuilder oleCmdBuild = new OleDbCommandBuilder(oleAdap);
oleAdap.Update(ds);

18)  DataGrid imizin DeleteCommand Event i içersine aşağıdaki kodu girelim.

private void myGrid_DeleteCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
ds.Tables[0].Rows[e.Item.ItemIndex].Delete();

OleDbCommandBuilder oleCmdBuild = new OleDbCommandBuilder(oleAdap);
oleAdap.Update(ds);
myGrid.DataBind();
}

19) Son olarakta, DataGrid imizi sayfalı bir şekilde listelersek çok daha kullanışlı olacaktır. Bunun için yine, DataGrid imizin properties penceresinden Propetry Builder i açıp Paging sekmesine gelelim.
Burdan Allow Paging ChckBox ını işaretlemeniz, sayfalama yapmak için yeterli olacaktır. İsteseniz diğer ayrıntıları da düzenleyebilirsiniz.
Her sayfada kaç kayıt listelenmesi gerektiğini; Page Size ile
Sayfa Numaralarının yerini; Position ile
Sayfa Numarası veya ileri geri ok ile mi gösterileceğini; Mode ile
ve dahasını istediğiniz gibi gerçekleştirebilirsiniz.

20) Sayfalama işlemi için gerekli olan kodu da DataGrid imizin PageIndexChanged eventi altına yazmamız gerekmektedir.

private void myGrid_PageIndexChanged(object source, System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
{
myGrid.CurrentPageIndex = e.NewPageIndex;
myGrid.DataBind();
}

21) Ayrıca, tasarım konusunda daha detaylı özelliklere yine Property Builder sayesinde ulaşabilrsiniz.
 

Gördüğünüz gibi çok da fazla kod yazmadan, ASP ile saatlerce sürebilecek bir uygulamayı çok kısa bir zaman dilimi içersinde hallettik. DataGrid kullanımı konusunda tasarımı da güzel yatığınız taktirde, çok kullanışlı bir raporlama sistemi yapmak hiçde zor olmayacaktır.

Projenin Kaynak kodunu ve ilgili Veritabanı dosyasını aşağıdaki linkte bulabilirsiniz.

Lütfen veritabanın bulunduğu klasöre yazma yetkisi vermeyi unutmayınız :)

Sorularınız için bana ulaşabilirsiniz...

Herkeze çalışmalarında başarılar dilerim.


turkmcsd .NET WindRacer = (C#)Özcan İLHAN;
WindRacer.Email = "turkmcsd@hotmail.com";
WindRacer.WWW = "http://www.turkmcsd.net";