mehmetduran.com - Paylaşmak Güzeldir...
Jquery ve Ajax ile Kullanıcı Kontrollerini Kullanma - 2
Bu yazımda jquery ve ajax ile kullanıcı kontrollerini (web user control) dinamik olarak yani çalışmasını istediğimiz c# kodlarıyla beraber nasıl kullanabileceğimizi göstereceğim. Bu bölümdeki ilk yazımda sadece kullanıcı kontrollerinin html çıktısını alıp kullanıyorduk. Ancak daha kullanışlı olması ve kullanıcı kontrollerini daha etkin kullanabilmek için kullanıcı kontrollerini çalışır kodlarıyla kullanmak gerekir. Bunun için yapmamız gerekenleri şöyle sıralayabiliriz:

Öncelikle kullanacağımız kullanıcı kontrollerinin page_load eventı gibi onload eventını kullanmamız gerekiyor.

    protected override void OnLoad(EventArgs e)
    {
        //kontrol yüklendiğinde çalışacak kodlar
        base.onLoad(e)
    }

Daha sonra ise jquery ajax metodu ile çağıracağımız webmethodun içerisinde bu kullanıcı kontrolünün onload eventının çalışarak gelmesi için şu şekilde bir kod yazmalıyız:

    [System.Web.Services.WebMethod]
    public static string doldur(string adres)
    {
        string sonuc = "";
        Page p = new Page();
        UserControl u = (UserControl)p.LoadControl(adres);
        u.LoadControl(adres);
        p.Controls.Add(u);
        StringWriter sw = new StringWriter();
        HttpContext.Current.Server.Execute(p, sw, false);
        sonuc = sw.ToString();
        sw.Close();
        return sonuc;
    }

Bu kodu da yazdıktan sonra artık jquery ajax ile webmetodu çağırabiliriz ve kullanıcı kontrollerini yüklerken onload eventında ki kodlarının çalışmasını sağlayabiliriz.

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

$.ajax({
          type: "POST",
          url: "default.aspx/doldur,
          data: "{adres:'"+adres+"'}", // adres, kullanıcı kontrolünün adı/adresi olacak.
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function(msg){
                        $("#alan").html(msg.d);
            }
        });

Böylece kullanıcı kontrolünde asp.net kontrollerini ve istediğimiz kodları çalıştırabiliriz. Çok verimli çok kullanışlı uygulamalar geliştirebiliriz. Benim son olarak yaptığım Ajaxgaleri tamamen bu yöntem üzerine hazırlandı. Sizler de bu yöntem ile çok verimli uygulamalar geliştirebilirsiniz.

İyi Çalışmalar!
Mehmet Duran 27 Eylül Cumartesi 2008 39 33978 3,9
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 XNA Game Studio Creator's Guide (E-Book) Jquery İnner Fade Uygulaması Foundations of Asp.net Ajax (E-Book) jQuery Ajax ile Dropdown Etkileşimleri (Eklenti ile) Linq to Xml (Linq Konusuna Devam)
Yorumlar
Yorum Yaz
RSS Yorum Takibi
EmrE TURAN 27 Aralık Cumartesi 2008 23:37 #1
Sende olmasan jQuery nasıl öğrencez hiç bilmiyorum. Anlamadığım birşey var OnLoadtaki base.OnLoad(e); tam olarak ne işe yarıyor
Mehmet Duran 27 Aralık Cumartesi 2008 23:50 #2
Burada kullandığımız metot override olduğundan dolayı dediğin ifade kullanılıyor. Yani yazdığımız bu metodun çalışması gereken bir adım. Zira visual studio ile bu kodlamayı yaparken bu kod bloğu otomatik oluşuyor.
Serdar BÖLÜM 07 Şubat Cumartesi 2009 11:14 #3
Çok güzel bir uygulama teşekkür ederim. Acaba bu işlem sırasında kullanıcı kontrolüne parametre göndermenin bir yolu var mı? Ben bulamadım şahsen.
Mehmet Duran 07 Şubat Cumartesi 2009 12:00 #4
Tabiki parametre veya istediğimiz bir bilgiyi gönderebiliriz. Bunu da ajax metodunda belirlediğimiz url ile yapabiliriz. Url`de tıpkı querystring mantığı ile parametre gönderebiliriz. Bunu da kullanıcı kontrolünün kod kısmında request.rawurl deyip tüm url`yi alabiliyoruz. Daha sonra ise elde ettiğimiz ifadeyi split edip istediğimiz bilgiye ulaşıyoruz. Ancak burada split ile uğraşıyoruz. Çünkü; request.querystring çalışmıyor.
Tuncay Peker 18 Şubat Çarşamba 2009 15:48 #5
Mehmet çok işime yarıyacak bir yol göstermişsin.Çok teşekkür ederim sana..
Ercüment 09 Mart Pazartesi 2009 15:39 #6
Yüklediğimi Kullanıcı kontrolüne test için protected override void OnLoad(EventArgs e) { base.OnLoad(e); Response.Write("Geldi"); } Yazıyorum. hiç bir şekilde çalışmıyor. Nerede yanlış yapıyorum..
Mehmet Duran 09 Mart Pazartesi 2009 21:31 #7
Tam olarak nasıl kullanıyorsun ve ne yapmak istiyorsun?
Ercüment 10 Mart Salı 2009 11:42 #8
Sorunu düzellttim. webservis ayarlamasında aşağıdaki yöndemle usercontrol`u yüklüyordum. HtmlTextWriter ht = new HtmlTextWriter(sw); p.RenderControl(ht); HttpContext.Current.Server.Execute(p, sw, false); olarak değiştirdiğimde düzeldi.. Fakat sayfada AutoPostBack özelliğini kullanamıyorum. DataGrid sayfalama yapmıyor. örneğin. test için dropDownList ekledim oda AutoPostBack olmuyor. Bunun için ne yapmam gerekyor? theform.__EVET TARGET null hatası veriyor. yardımların için teşekkür ederim.
Mehmet Duran 10 Mart Salı 2009 18:17 #9
Daha önce hiç karşılaşmamıştım bu sorunla. Daha doğrusu postback`i engelleyecek bir işlem yok burada. Sadece ajax ile kullanıcı kontrolünü okuyup alıyoruz. Postback`i engelleyen başka birşey olsa gerek.
fethi su 08 Ağustos Cumartesi 2009 13:53 #10
Selamun Aleyküm . Merhaba mehmet Duran. Hocam bu yöntemi kullanıyorum ancak şöyle bir sıkıntı var örneğin usercontrolumde normal html işlemleri yapınca veya respoense.write yapınca işlem gerçekleşiyor ve user control yükleniyor. Ancak usercontrole bir gridview attığımda şöyle bir sorun ile karşı karşıya kalıyorum. Error executing child request for handler 'System.Web.UI.Page' Bir server kontrol attığımda çalışmmıyor bu durumda benim herşeyi html kontrol olarak mı yapmam lazım. iyi çalışmalar
Mehmet Duran 09 Ağustos Pazar 2009 01:31 #11
Gridview'ın çalışması form tagı arasında olması ve bu form tagının runat=Server gibi özelliği olması gerekiyor. Bu yüzden hatayı alıyorsundur. Gridview yerine datalist, repeater kontrolünü kullanabilirsin.
HasanG 11 Aralık Cuma 2009 12:32 #12
Merhabalar Mehmet, Sormak istediğim birşey var. Bu usercontrolleri sunucu tarafından isterken ne şekilde parametre gönderebiliriz? Şu an bir haber portali tasarlıyorum ve yorumları jQuery ile çekmek istiyorum. User Controlü talep ederken bir parametre gönderebilirmiyiz? Mesela NewsComments.ascx?action=GetComments?NewsID=x Teşekkür ederim şimdiden.
Mehmet Duran 11 Aralık Cuma 2009 12:55 #13
Evet dediğin olay mümkün ve ben de aynen o şekilde bir kullanım yapıyorum çoğu yerde. Hem url'de dediğin gibi bir parametre iletimi mümkün hem de ajax metodunda data özelliği ile veri göndermek mümkün. Hangisini tercih edeceğin sana kalmış.
HasanG 11 Aralık Cuma 2009 13:44 #14
Ben jquery ile o sayfaya istek göndermiyorum yanlız. Çektiğim kontrolü gizlemek adına sadece sayfa indexi ile istek gönderiyorum sunucu tarafında bu indexi kontrol edip url belirliyorum fakat aşağıdaki gibi hataya düşüyorum: System.Web.HttpException: '~/Controls/NewsComments.ascx?a=5' is not a valid virtual path. Bunun önlenmesi adına birşey yapabilirmiyim? Ya da farklı bir kullanım mı denemem gerek?
Mehmet Duran 11 Aralık Cuma 2009 22:41 #15
Sayfaya istek yapmak gerekmiyor. Dediğim gibi data iletimi yapabilirsin. Hataya gelince virtual path'de bir sorun var. Bu değeri server.mappath ile vermeyi dene bir de. Sorun sadece path sorunu.
HasanG 11 Aralık Cuma 2009 23:04 #16
Çok sağol Mehmet, yapmaya çalıştığım şeyinsaçma olduğunu biraz geç anladım. Yorumları jQuery ile çekmemin bir faydası yokmuş aslında. Yabancı kaynaklardan da araştırdığıma göre controle query string paslayamıyoruz o şekilde. Session variable ile yapmayı önermişler fakat o durumda da başka sorunlar çıkacaktı. Herneyse :) Yine ufak bir not: Belki bilerek yapmışsındır ama yazdığımız yorumlardaki "\n"leri br tagıyla değiştirmen güzel olurdu. Teşekkür ederim.
Mehmet Duran 11 Aralık Cuma 2009 23:10 #17
Yapmak istediğini anladım ve bu yöntemi sitemin yönetim panelinde kullanıyorum. Yorum bölümünü de bu şekilde Ajax ile yapmıştım ama daha sonra değiştirdim. Direk ilk yorumunda söylediğin gibi url ile data gönderebilirsin. Ben kullanıyorum ve bir sorun yok. Ayrıca yorum konusunda belirttiğin kontrolü yapmak istiyorum veya basit bir editör koymak istiyorum. Bunu da zamanla hallederim. Şimdilik pek vaktim yok.
Ahmet YASİN 09 Temmuz Cuma 2010 16:17 #18
Arkadaşım blogun çok faydalı nerdeyse imdat simidimiz desem yeri. Sorum şu olacak usercontrolde şöyle bi tanımlama yaptım.
for (int i = 0; i < 5; i++)
{
fu[i] = new FileUpload();
fu[i].ID = "fu_" + i.ToString();
resimler.Controls.Add(fu[i])
}
daha sonra jquery ile bunu render ettiğimde hata veriyor.İmage veya runat="server" özelliği eklediğim divlerde hata vermiyor. Ama yukarıdaki kod bloğunu denediğimde hata veriyor.(System.Web.UI.Page'.)
Mehmet Duran 09 Temmuz Cuma 2010 18:30 #19
Merhaba. Hatanın metnini yazmış olsaydın daha iyi olurdu. Bu konuda hatanın nedeni bazı kontrollerin runat="server" tagı olan formların içinde çalışmak zorunda olması. Ayrıca yazdığın kodlarda resimler adındaki kontrolün runat="server" özelliği olmak zorunda. Onun dışında hatanın ne olduğunu anlamak için hata nedenine bakmak lazım. Bu şekilde pek brşey söyleyemem.
can kaya 18 Temmuz Pazar 2010 14:56 #20
merhaba neden onload ı override edelim ki pageload da herhangi bir işlem yapmıyoruz. dolayısıyla ben webservisle bu örnegi gerçekleştirdim. override etmeden de calıstı. gridview biraz vaktimi aldı. dedigin gibi runat=server blokları arasında calısan bir kontrol form id=Deneme runat="server" asp:GridView ID="GridView1" runat="server" formyapısını usercontrolde kullanırsanız problem aşılmış olur.
umut 16 Ağustos Pazartesi 2010 19:42 #21
iyi günler...bu uygulma ile ilgili bir sorum olacak. yaptığınız örneği kendi uygulamamda kullanmaya çalıştım fakat HttpContext.Current.Server.Execute(p, sw, false); kodu çalıştığında user controlun onload u ve ondan sonra load eventi çalıştı fakat tekrar static fonksiyonuma geri dönmüyor yani sonuc = sw.ToString(); sw.Close(); return sonuc; kodları çalışmıyor.. sizce bu sorun neden kaynaklanıyor olabilir? şimdiden teşekkürler..
Mehmet Duran 17 Ağustos Salı 2010 15:13 #22
Merhaba. Böyle bir sorun yaşıyorsan muhakkak bir yerde sorun oluşuyordur. Break point ile sorun yaşadığın yerleri bulabilirsin veya Firebug ile Ajax sonucunda dönen değerden hatanın nedenini görebilirsin.
fatih 06 Ekim Çarşamba 2010 18:35 #23
merhaba. ben chat.aspx sayfasından Mesaj.aspx sayfasına jquery ile mesaj içeriğini(txtIcerik) ve kullanıcı ID (UID)sini gonderiyorum. Mesaj.aspx dosyasında iç içe iki repeater bulunmakta. Mesaj.aspx sayfasını .cs bolumunde [System.Web.Services.WebMethod] public static string Gonder(string txtIcerik, string UID) { //Bu sayfada tanımladığım repeaterlara(iç içe iki repeater) erişemiyorum. Yapmak istediğim şey mesaj içeriğini ve kullanıcı ID sini alıp repeatırı güncellemek. } Yardım?
Mehmet Duran 07 Ekim Perşembe 2010 11:23 #24
@fatih, bir sayfada veya başka bir yerde tanımlanan static metot içinde kontrollere erişemezsin. Buradaki yöntem için bu geçerli. Bunun için burada işlem yaparken kontrollere ihtiyaç duymayacağın bir plan yapmalısın veya alt yapıyı kontrollere erişebilecek şekilde değiştirmelisin (UpdatePanel, vb.).
Sezai 22 Ekim Cuma 2010 18:48 #25
Merhaba... Öncelikle bu örnek uygulamaları paylaştığınız için teşekkür ederim. Bu örnek uygulamayı hazırlamaya çalıştığımda "StringWriter sw = new StringWriter();" satırında hata verdi. Hatada "'StringWriter' tür veya ad alanı adı bulunamadı" diyor. jQuery kodlarında UserControl'ün adresini verirken hata yaptığımı düşünüyorum. Şu şekilde yazdım: "data: "{adres:'"+~/Kontroller/Deneme.ascx+"'}", yazdığım formatta mı bir sorun var acaba çünkü adres doğru.
Mehmet Duran 23 Ekim Cumartesi 2010 13:05 #26
@Sezai, eğer belirtiğin hatayı o satırda almışsan sorunun nedeni System.IO kütüphanesini eklememiş olmandır. Bu kütüphaneyi eklersen o satırdaki hatayı almazsın. Parametreleri doğru göndermiş isen devamında da bir problem oluşmaz.
fatih 28 Ekim Perşembe 2010 12:52 #27
merhaba. ya ben login panelini jquery ile çağırmak istiyorum. jquery url('./LoginPanel.ascx') şeklinde. fakat hata veriyor. demek istediğim giriş yapa tılkadığında ajax ile loginPanel.ascx yuklensin ve kullanıı bilgilerini giriş yapabilsin. yardımlarınız için simdiden tesekkurler.
Mehmet Duran 30 Ekim Cumartesi 2010 10:47 #28
@fatih, söylemiş olduğun şey için buradaki örnek yeterli. Ancak dikkat etmen gereken nokta giriş yapılacak kısımda yani giriş butonunun yapacağı işlemi de webmethod ile yapmak zorunda olman. Bu şekilde örneği uyarlayarak işlemi gerçekleştirebilirsin.
fatih 31 Ekim Pazar 2010 12:22 #29
Teşekkürler hallettim onu. fakat bi sorun daha var. ajax ile login.aspx sayfasını ana sayfada gösterebiliyorum. ama login.aspx deki resimler gorunmuyor. imageUrl si doğru fakat ajax ile çağırınca görünmüyor. neden olabilir sizce
Mehmet Duran 01 Kasım Pazartesi 2010 11:36 #30
@fatih, resimlerin adresi login.aspx için doğru olabilir ama çağırdığın sayfanın dizini ne ise ona göre adresleri vermelisin. Ajax ile çağırdığın anda dizi ne ise resimlerin dizini de aynı olmalı.
fatih 01 Kasım Pazartesi 2010 15:29 #31
tam olarak ne anlatmaya çalıstıgınızı anladım da çözüm yolunu bulamadım buna benzer yaptığınız bi örnek varsa paylaşın lütfen. teşekkürler ilgilendiğiniz için.
Mehmet Duran 02 Kasım Salı 2010 15:53 #32
@fatih, şu anda gösterebileceğim örnek yok. Ancak biraz daha açmak gerekirse resmin yolunu verirken (src veya url değeri) adresi / ile başlatıp olduğu gibi yazmalısın. / işareti root demektir ve hangi dizinde olursa olursa root'tan itibaren dosyaları arar. (Örnek <img src=/klasör/images/a.jpg>)
fatih 02 Kasım Salı 2010 17:23 #33
~/ işareti vardı basında. Yani ~/UserFolders/KullanıcıKlasor/... şeklinde devam ediyo. Ama şu şekilde yazınca (UserFolders/KullanıcıKlasor) düzeldi. teşekkürler. bi konu hakkında fikir danışmak istiyorum. Yarın Mesaj atacam size. kontrol ederseniz sevinirim. teşekkürler
fatih 23 Kasım Salı 2010 00:10 #34
merhabalar. default sayfama jquery ile login.aspx sayfasını cağırıyorum. login.aspx sayfasında istediğim divleri gorunur yapamıyorum. yani login.aspx sayfasındaki tanımlı dive tıklayınca gorunmesini istiyorum.(login.aspx sayfasında bi kac div var. tıklayınca bunların ID sini gosterebiliyorum.) fakat tıklayınca gorunup hemen kayboluyor. sizce neden ya lutfen cok ihtiyacım var.
Mehmet Duran 24 Kasım Çarşamba 2010 16:13 #35
@fatih, yaptığın işlemde div görünür olup tekrar görünmez oluyorsa kullandığın metotta sıkıntı vardır. Kodları görmeden nedir ne değildir birşey söylemek pek doğru değil.
Ümit 09 Aralık Perşembe 2010 22:31 #36
Örneği projede uygulamaya kalktığımda "HttpContext.Current.Server.Execute(p, sw, false);" bu kısmın altını çiziyor ve The best overloaded method match for 'System.Web.HttpServerUtility.Execute(System.Web.IHttpHandler, System.IO.TextWriter, bool)' has some invalid arguments. hatasını veriyor bu şekilde uyguladığımda ise HttpContext.Current.Server.Execute((IHttpHandler)p, sw, false); sayfada hata meydana geliyor ve "p" IhttpHandler a atanamadı diyor. Sorun nerde acaba.
Mehmet Duran 11 Aralık Cumartesi 2010 00:11 #37
@Ümit, senin execute etmek istediğin dosya user control veya page olmalı. Ama sen HttpHandler'i execute etmek istiyorsun. Burada httphandler ile yapacağın şeyi usercontrol ile yapmalısın veya direk olarak Ajax isteğini httphandler'a yapmalısın. Bu konuda sitemde yazı ve örnek mevcut.
halil 20 Nisan Çarşamba 2011 12:49 #38
Merhabalar. Galiba uygulamanızı eksik anlatmışsınız. MasterPage var ama Default5.aspx falan post ediyor. Kaynak dokümanları bi upload sitesine atabilme imkanınız var mı?
Mehmet Duran 20 Nisan Çarşamba 2011 16:20 #39
@halil, bu yazının ilkinde verdiğim kodlara baktın sanırım. Ancak örnekte masterpage yok. Sadece bir sayfa altında tanımlaığım webmethod var ve ona istediğim sayfadan (aynı projede olmak koşuluyla) istekte bulunuyorum. Buradaki örnekler şu anda indirilebilir değil ama sitemdeki diğer Ajax örneklerinin çoğu bununla benzer ve örnekler mevcut. Onlara bakmanı tavsiye ederim.
İ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.
Hata yapmayan bir insan genellikle hiçbirşey yapmıyordur.
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