JQUERY ile GRİDVİEWE VERİ YÜKLEME (BIND GRIDVIEW with JQUERY)


İ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() {
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








Hiç yorum yok:

Yorum Gönder