Anasayfa / Yazılım / ASP.NET / GridView Kontrolünü SqlDataSource Objesine Bağlamak

GridView Kontrolünü SqlDataSource Objesine Bağlamak

Bu yazımda GridView kontrolünü DataSource kontrolüne bağlamaya değineceğim. Bu uygulamaya başlamadan önce aşağıdaki linkten mevcut örneği indiriniz ve bunun üzerinden yazı ile birlikte devam ediniz. Tabi yine SQL Server’da NorthWnd database kurulu olduğunu farzediyorum.

Şu anda indireceğiniz dosyanın içeriğinde olan kodları da paylaşayım :

web.config dosyası :







    
        
    
  
    
  


StyleSheet.css dosyası :

h1 
{
	color : #0997EF;
}

.GridMain
{
border-right: gainsboro thin solid;
border-top: gainsboro thin solid;
border-left: gainsboro thin solid;
border-bottom: gainsboro thin solid;
background-color : #333333;
width: 400px;
font-weight : bold;
}

.GridRow
{
background-color : #0997EF;
color: White;
font-family : Calibri, Arial, Sans-Serif;
}
.GridSelectedRow
{
font-family : Calibri, Arial, Sans-Serif;
background-color: #E6E6FA;
}
.GridHeader
{
background-color: #ADD8E6;
font-weight: bold;
text-align: left;
color : #606166;
font-family : Calibri, Arial, Sans-Serif;
}

Default.aspx dosyası :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>







    


    

Veri Listesi


<%#Eval("FirstName")%> <%#Eval("LastName")%>

Default.aspx.cs dosyası :

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page
{
}

Kodlar bu şekilde, aşağıdan uygulamayı indirebilirsiniz..

Şimdi uygulamamıza burdan itibaren başlıyoruz aslında.. Web formumuzu design formunda açalım. ToolBox kısmından Data kontrolleri içinden bir adet SqlDataSource alıp sayfamıza sürükleyelim, nereye sürüklediğimizin bir önemi yok, sayfaya sürükleyelim yeterli.

Daha sonra web formumuzun kod kısmına geçelim ve SqlDataSource objemizin adını düzenleyelim. Ben CalisanlarSqlDataSource adını verdim.

...
...

...
...

Tekrar web formumuzun design bölümüne geçelim. SqlDataSource kontrolümüzün sağ üstünde yer alan smart tag okuna tıklayıp buradan Configure Data Source diyelim.

Açılan dialog penceresi bize veri kaynağı bilgilerini içeren ayrıntılı bilgileri verir. Bu dialog penceresinin ilk sayfasında hangi veritabanına bağlanmak istiyorsak bu işlemi tanımlayabiliyoruz. Biz web config dosyasında Baglantim adında bir connectionstring tanımladığımız için Which data connection should your application use to connect to the database? sorusunun altındaki oka bastığımızda Baglantim ifadesini görürürüz. Eğer istediğimiz bağlantıyı bulamaz isek sağda yer alan New Connection butonuna basarak bağlantımızı yeniden oluştururuz. Bağlantımızın doğruluğunu kontrol etmek içinde ilgili bağlantımızı seçtikten sonra ConnectionString yazan yerin solundaki kısma tıkladığımızda ConnectionStringimizi görebiliriz. Bu işlemlerin ardından Next diyoruz.

Bir sonraki ekranda, DataSource objemizde hangi veriler görünsün bunu seçebiliyoruz. Çalışmak istediğim tablo Employees. Onu seçiyorum öncelikle. Ardından da Columns bölümünden EmployeeID, LastName, FirstName, City sütunlarını seçiyorum. (istediğinizi seçebilirsiniz)

Ben birde sıralama yapmasını istiyorum, dolayısı ile bu kısım açıkken birde ORDER BY diyorum.

Daha sonra bu sayfayı NEXT diyerek geçiyorum. Daha sonra çıkan sayfada yapmış olduğum sorguyu test edebiliyorum. Test Query diyorum ve testimi gerçekleştiriyorum. Veriler listeleniyor. Sonra finish der ve bitiririz.

Şimdi Web formumun source bölümüne geçiyor ve bakıyorum ne gibi değişiklikler olmuş. SqlDataSource objemde şu değişiklikler olmuş :

...
...

...
...

Daha sonra WEB formumuzda design bölümünde iken GridView kontrolümüzü seçelim. Properties alanından aşağıdaki gibi ayarları yapalım.

DataSourceID = CalisanlarSqlDataSource
DataKeyNames = EmployeeID
AllowPaging = True
PageSize = 3
AllowSorting = True

Burada PageSize özelliği GridView’de listelenen kayıtlar bir sayfada kaç tane olsunu belirtir. Biz 3 tane yaptık normalde tabi 3 az ama az kaydımız olduğu için sayfalama yapıldığını göstermek adına 3 yaptım. Sayfalama yapılmasına izni de AllowPaging özelliğini True yaparak sağladım. Böylelikle altta sayfalara geçebilmek için rakamlar link şeklinde olacak. AllowSorting özelliğini True yaparak da sıralama yapılabilmesi için izin vermiş oldum. Böyelelikle listelenen verilerin sütun başlıkları link haline gelebilir ve buna göre sıralama yapılabilir.

Böylelikle GridView kontrolümün kodlarında şöyle bir değişiklik oluyor :

...
...

...
...

Daha sonra CSS dosyamdan bir de stil veriyorum. Bunu da GridView kontrolüm içinde

...
...

...
...

Diyerek yapıyorum. Aynı şekilde şimdiden DetailsView kontrolü içinde yapalım. DetailsView kontrolü içinde de

...
...

...
...

diyorum.

Sıralama yapılabilmesine izin verdik ancak henüz sıralama için olması gereken işlemi yapmadık. Bunu yapalım. Web formumun design alanına dönüyorum. GridView kontrolümün sağ üstünde yer alan smart tag oka tıklıyorum ve buradan Edit Columns diyorum. FirstName ve LastName’e göre sıralama yapılsın istiyorum. Dolayısı ile sadece bu kolonlar için işlem yapacağım.

Çıkan Fields dialog penceresinde sol altta yer alan Selected fields alanından LastName seçiyorum ve sağ tarafta yer alan BoundField properties alanından biraz aşağı inerek SortExpression kısmını LastName seçiyorum. Daha sonra aynı işlemi FirstName seçerek sağ tarafta da Boundfields properties alanında SortExpression FirstName seçerek gerçekleştiriyorum.

Bu işlemin ardından artık LastName ve FirstName bir linkmiş gibi görüntülenir.

Şimdi geldik web formumuzun tekrar design view alanına, GridView kontrolümüz seçili iken sağ tarafta properties alanında yıldırım işaretine tıklayalım ve eventleri listeleyelim, buradan Sorting eventine çift tıklayalım, bizim yerimize Visual Studio bu eventi boş bir şekilde Code Behind tarafında oluştursun.

Daha sonra kod tarafında şunu yazalım.

...
...
 protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
    {
        GridView1.DataBind();
    }
...
...

Ve son olarak uygulamamızı çalıştıralım. Aşağıdaki gibi bir görüntü ile karşılaşırsınız. Sayfalama çalışıyor, ada göre listeleme yapıyor, soyada göre listeleme yapıyor. Henüz seçiniz kısmı çalışmıyor çünkü yapmadık.

Tüm kodları aşağıda paylaşayım :

Default.aspx.cs :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>







    


    

Veri Listesi


<%#Eval("FirstName")%> <%#Eval("LastName")%>

Default.aspx.cs :

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page
{
    protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
    {
        GridView1.DataBind();
    }
}

Aşağıdaki linktende uygulamayı indirebilirsiniz. Bir sonraki yazıda DetailsView kontrolünü DataSource objesine bağlamaya değineceğim.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir