ASP.Net Kontrolleri nasıl html render edilir ?

  • 10.09.2015
  • M.Tayyip Yetiş
  • ASP.Net

Merhaba, başlık biraz karmaşık gelebilir ama problem bir o kadar açık aslında. Kendimden örnek vermek gerekirse zaman zaman projelerimde kullandığım Gridview, Repeater, Listview vs. veri listeleme ve gösterme kontrolleri sql karmaşıklığı sebebiyle sayfanın yüklenme hızını farkedilir şekilde yavaşlatıyor bu problemi sql cümlesini daha optimize ederek bir nepze giderebiliriz ama bazı durumlarda özellikle çok fazla veriyle çalıştığımızda sayfa hala yavaş yükleniyor olabilir. o zaman geriye tek çare bu kontrollerin render edilmesini senkronize yani sayfanın yüklenmesinden bağımsız şekilde yapmak kalıyor ki bu şekilde sayfa normal hızında yüklensin.

Bu işlemi ise AJAX kullanarak rahatlıkla yapabiliriz. Çok fazla kafa karıştırmadan senaryoyu özetlemek gerekirse; Geliştirici sayfa içinde yukarıda saydığımız ve sayfayı yavaşlatan kontrollerden birini kullanıyor. Kullanıcı sayfayı açıyor bu kontroller dışındaki herşey render ediliyor ve sonuç istemciye gönderiliyor. sayfa yüklenir yüklenmez ise bu ajax ile bu kontrollerin render edileceği fonksiyona ya da sayfanın kendisine post talebi gönderiliyor bu fonksiyon içinde sql ile veri çekilip kontrole yükleniyor ardından kontrol render edilip html çıktısı sonuç olarak gönderiliyor bu sonuç da sayfada istenilen yere ekleniyor böylece gridview'in doldurulması beklenmeden sayfa yükleniyor ardından gridview dolduruluyor. kullanıcı deneyimi açısından verim sağlanıyor. tüm bu anlatılanların özeti aşağıdadır

Örnek Repeater tasarımı

    <form id="form1" runat="server">
    <div>
    
        <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
               <div><strong>ID :</strong> : <%# Eval("ID") %></div> 
               <div><strong>Adı :</strong> : <%# Eval("adi") %></div> 
               <div><strong>Soyadı :</strong> : <%# Eval("soyadi") %></div> 
               <hr />
            </ItemTemplate>
        </asp:Repeater>
    <div id="sonuc"> </div>
    </div>
    </form>

Code behind

protected void Page_Load(object sender, System.EventArgs e)
{
	if (Request.Form("goster") == "1") {
		database db = new database();
		db.veritabanı.Baglan();
		Repeater1.DataSource = db.veritabanı.tablogetir("SELECT * FROM uyeler");
		Repeater1.DataBind();

		StringBuilder sb = new StringBuilder();
		StringWriter sw = new StringWriter(sb);
		HtmlTextWriter writer = new HtmlTextWriter(sw);

		Repeater1.RenderControl(writer);
		Response.Write(sb.ToString);
		Response.End();
	}
}

AJAX talebi

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script>
      $(document).ready(function () {
          $("#sonuc").html("<img src='http://www.hgtvhome.com/wp-content/themes/twentytwelve/assets/loading-icon.gif' />");
         $.ajax({
          url: 'WebForm1.aspx',
          type: 'POST',
          data: 'goster=1',
          success: function (data) {
             $("#sonuc").html(data);
          },
          error: function (e) {
             alert("hata oldu");
          }
         });
         });
</script>

Bu şekilde hız problemini aşarak kullanıcılarınıza daha iyi bir deneyim sunabilirsiniz. Faydalı olması dileğiyle

Mustafa Tayyip YETİŞ
Yazılım Geliştirme Uzmanı

Yorum Yap

Diğer Makaleler

Etiketler