İlk olarak datatable ımızı olusturan sınıfın kodunu yazalım.
Yeni bir class acarak adını DataTableClass verelim.
Daha sonra static bir metod yazarak datatable ımızın
verilerini girelim.Bu metod cagrıldıgında da geriye datatableımızı dondurelım.Ben
burada elimde veri olmadıgı ıcın verileri kendım olusturuyorum siz bir sorgu
sayesınde veritabanından da alabilirsiniz.
- Static Metodun Kodları:
public static DataTable GetDataTable() {
DataTable dt=new DataTable("Names");
DataColumn dc1=new
DataColumn("Name");
DataColumn dc2=new
DataColumn("Age");
DataColumn dc3=new
DataColumn("Index");
dt.Columns.AddRange(new DataColumn[] { dc1,dc2,dc3 });
DataRow dr1=dt.NewRow();
dr1[0]="Ahmed";
dr1[1]="27";
dr1[2]="1";
DataRow dr2=dt.NewRow();
dr2[0]="Peter";
dr2[1]="30";
dr2[2]="2";
DataRow dr3=dt.NewRow();
dr3[0]="John";
dr3[1]="20";
dr3[2]="3";
DataRow dr4=dt.NewRow();
dr4[0]="Ali";
dr4[1]="30";
dr4[2]="4";
dt.Rows.Add(dr1);
dt.Rows.Add(dr2);
dt.Rows.Add(dr3);
dt.Rows.Add(dr4);
return dt;
}
- Kullanacagımız List için bir sınıf tanımlayalım ve parametrelerimizi belirleyelim.
DataTableSatirlar.cs
public DataTableSatirlar() {
//
// TODO: Add constructor logic here
//
}
private string
_firstName;
private string _age;
private string index;
public string Index {
get {
return index;
}
set {
index=value;
}
}
public string
FirstName {
set {
_firstName=value;
}
get {
return _firstName;
}
}
public string Age {
set {
_age=value;
}
get {
return _age;
}
}
- Simdi de sayfamızın code behind ında bir web metod tanımlayalım.Bu web metod da bize datatble dakı verileri kendı olusturdugumuz bir liste atasın.
Web metod olusturmamızın nedeni ajax ile bu metodu
kullanabılmemızdır.
public static DataTableSatirlar[] GetNames() {
public static DataTableSatirlar[] GetNames() {
List<DataTableSatirlar>
list=new List<DataTableSatirlar>();// Kendi list dizimizi olusturduk.
DataTable dt=DataTableClass.GetDataTable();//
Verilerimzi cekiyoruz.
foreach(DataRow
row in dt.Rows) {
DataTableSatirlar _names=new DataTableSatirlar();
_names.FirstName=row["Name"].ToString();
_names.Age=row["Age"].ToString();
_names.Index=row["Index"].ToString();
list.Add(_names);
}
return list.ToArray();
}
}
- Sayfamızın Page_Load kısmında da verilerimizi gride yukleyen kodumuzu yazalım.
DataTable dt=new
DataTable();
dt.Columns.AddRange(new DataColumn[] { new
DataColumn("Name"),new DataColumn("Age"),new
DataColumn("Index")
});
NamesGridView.DataSource=dt;
NamesGridView.DataBind();
- Şimdi sıra geldi client tarafta verilerimzi gride yuklemeye.Buradaki javascriptimizn kodlarını asagıda veriyorum.
Sayfamızın head tagları arasına asagıdaki kodu
ekleyelim.
<script type="text/javascript">
function BindGridView() {
$.ajax({
type: "POST",
url: "Default.aspx/GetNames",
data: "{}",
contentType: "application/json",
dataType: "json",
success: function (data) {
for (var
i = 0; i < data.d.length; i++) {
$("#GridViewAdi").append("<tr>"+
"<td>" + data.d[i].FirstName +
"</td><td>" + data.d[i].Age +
"</td><td>"+ data.d[i].Index
+"</td></tr>");
}
}
})
}
</script>
- Jquery kodlarının calısması için sayfamıza su kutuphaneyı ekleyelım.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
- Bu javascripti tetikledıgımız yer body onload fonksiyonudur.
<body onload="BindGridView();">
Proje Kodları:
Default.aspx
Default.aspx.cs
DataTableSatirlar.cs
DataTableClass.cs
