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 2 23811 4,2
Ajax Asp.net jQuery Jquery Programlama User Control Webmethod JSON
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar BlogEngine.NET Türkçe Oluyor IP Kontrolü ile Oylama (Rating) Uygulaması Jquery ile Basit Birkaç Örnek Uygulama (Karakter Saydırma) jQuery ile 'Yukarı Çık' Uygulaması jQuery Ajax ile Filtreleme İşlemlerinde Zamanlama Kullanma
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Serhat 25 Ocak Salı 2011 01:42 #1
Şunu bir yapabilsek gerisi gelecek zaten. Nedense senin örnekleri indirince çalışıyor ama kendim yapmaya çalışında "birebir" aynı olsa da çalışmıyor. bilmediğim bir referans mı ekliyorsun projelerine?
Mehmet Duran 04 Şubat Cuma 2011 15:38 #2
@Serhat, dediğin gibi hepsi çalışıyor ve örnekleri bilerek çalışır biçimde gösteriyorum. Bu şekilde çok uygulama yaptım ve yapıyorum. Yöntemi oldukça geliştirdim. Eğer sıkıntı varsa hatanın ne olduğuna bakmak lazım. Ek bir referans yok. Zaten örnekler indirebiliyor da.
İ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.
Gençken bilgi ağacını dikmesek, yaşlandığımız zaman gölgesine sığınacak bir yerimiz olmayacaktır.
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