mehmetduran.com - Paylaşmak Güzeldir...
Jquery ve Ajax ile Kullanıcı Kontrollerini Kullanma - 1
Bu yazımda jquery ve ajax metodu ile kullanıcı kontrollerini (user control) okuyup sayfamıza eklemeyi göstereceğim. Bu yöntemi kullanarak tek sayfa ile basit bir websitesi hazırlayabiliriz. Masterpage gibi tek bir sayfa tasarlayıp, kullanıcı kontrollerini belirlediğimiz bölüme jquery ve ajax kullanarak sayfa postback olmadan yükleyip, sitemizin tüm içeriğini tek seferde yani sayfa yenilemeden kullanıcılara sunabiliriz.

Bunun için yazacağımız webmethod şu şekilde olacak:

    [System.Web.Services.WebMethod]
    public static string getir(string adres)
    {
        System.Threading.Thread.Sleep(1000);
        string sonuc = "";
        Page p = new Page();
        UserControl u = (UserControl)p.LoadControl(adres);
        u.LoadControl(adres);
        p.Controls.Add(u);
        StringWriter sw = new StringWriter();
        HtmlTextWriter ht = new HtmlTextWriter(sw);
        p.RenderControl(ht);
        sonuc = sw.ToString();
        sw.Close();
        return sonuc;
    }

Jquery kodlarımız da şöyle olacak:

    function al(adres){
        $('#ajaxloading').show();
        $("#data").html("");
        $.ajax({
          type: "POST",
          url: "Default5.aspx/getir",
          data: "{adres:'"+adres+"'}",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function(msg) {
                $('#ajaxloading').hide();
                $('#data').html(msg.d);
            }
        });
    }


Bu kodları kullancağımız html kontrollerin kodları ise şu şekilde olacak:

<input id="Button1" type="button" value="Control - 1" onclick="al('d.ascx')" /> <input id="Button2" type="button" value="Control - 2" onclick="al('c.ascx')" /><br /><br /> <div id="ajaxloading" style="display:none; position:absolute;"><img alt="" src="ajaxloading.gif" /></div> <div id="data" style="margin-top:10px;"></div>

Kullanıcı kontrollerini ben div kontrolüne yüklüyorum. Sizler istediğiniz kontrole yükleyebilirsiniz.
Uygulamayı aşağıdan test edebilirsiniz.


İyi Çalışmalar!
Mehmet Duran 19 Eylül Cuma 2008 0 2070 4,8
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Javascript (Ajax) ile Elde Edilen Datetime Türündeki Veriyi İşleme MySql'de Stored Procedure Tanımlama ve Kullanma C Sharp'ta Switch-Case Kullanımı Jquery ile Saydamlık(Opacity) Kullanarak Menü Hazırlama Javascript ile Klavye Tuşlarının Kontrolü
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Bu Yazı Hakkında Henüz Yorum Yapılmamış.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Büyük işler gibi, büyük düşüncelerinde davula ihtiyaçları yoktur.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009