pillinetwork hesabınızla giriş yapın.

Asp.net & Ajax ile Yalancı UI control yapalım

\
kendi hazirladigim checkbox ve radibutton tasarımları

Gerçeği nasıl yapılıyor bilmiyorum ama zahmetli olacağı kesin. şimdi kısayoldan gerçek ui control gibi çalışan radiobutton ve checkbox yapımından bahsedeceğim.

aslında baştan söylemek gerekirse kontrol yapmayacağız ajaxın avantajını kullanarak imajları yönetip radiobutton ve checkbox görevi için kullanacağız.

evet yeni bir asp.net ajax projesi açıyoruz. tabi bunun için ajax çatısını yüklemeniz gerekir. vs 2008 kullanıyorsanız yüklü geliyor.

ajax destekli proje
ajax destekli proje

Sayfamıza bir updatepanel ekliyoruz. içine image button ve labelleri koyuyoruz.image butonların resimleri için daha önce hazırlamış olduğumuz özel tasarımlı resimleri seçiyoruz.(radiobuttonlar için:r1,r2 checkboxlar için c1,c2 images altında)imagebutton ve labelleri findkontrolde bulabilmek için stratejik isimlendiriyoruz.renkler için buton adları : ter1,ter2,ter3 labellerı aynı bırakalım. label1,2,3 diye gidiyor.

Ürün tipi için
u1,u2,u3 butonlar ve e1,e2,e3 labeller. Etiketlerimizi doldurralım.

örnek ekran görüntüsü
örnek ekran görüntüsü

sonuçlar için en alta 2 tane de label attım.evet tasarımımız bitti şimdi onlick eventları tetikleyecek 2 fonskiyon yazıyoruz biri radio ve diğeri check için. tüm renk radio butonlarının click eventlarına geliyoruz ve tikla yazıyoruz. fonksiyonumuz aşağıda.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
protected void tikla(object sender, ImageClickEventArgs e)

    {



//hangi buton tıklamış

       ImageButton dugme =sender as ImageButton;

        

        if (dugme != null)

        {



//check box gibi hareket ettirecek kodumuz. aslında sadece image değişiyor.



            if (dugme.ImageUrl == "images/c2.jpg")

                dugme.ImageUrl = "images/c1.jpg";

            else dugme.ImageUrl = "images/c2.jpg";



           

        }





    }

evet checkboxlar birden çok seçime izin veriyor ama radio buttonlarda bunu engellemeliyiz. radiobutonlar için sec fonksiyonumuzu yazıyoruz. ve hepsinin onlick eventine gelip sec yazıyoruz.kodumuz aşağıda

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
protected void sec(object sender, ImageClickEventArgs e)

    {

//hangi buton istek gönderdi

        ImageButton dugme = sender as ImageButton;



        if (dugme != null)

        {



//üç tane butonu bir for döngüsüne sokuyoruz ve tek seçim olacağı için tümünün seçimlerini kaldırıyoruz.



            for (int i = 1; i <= 3; i++)

            {

//u1,u2,u3 diye adlandırdığımız butonlar sırayla r1.jpg alarak seçimlerini kaldırıyoruz.

                ImageButton ib = ((ImageButton)(FindControl("u" + i.ToString())));

                if (ib != null)

                    ib.ImageUrl = "images/r1.jpg";



            }

//en son da istek gönderen butonumuzu dolu hale getiriyoruz.

            dugme.ImageUrl = "images/r2.jpg";





        }





    }

:) sanırım test edebilirsiniz. profesyonel olmasada pratik bir çözüm olduğunu düşünüyoruz. daha da kendini zorlamak isteyenler ui componenti yazabilirler. bunun değişik kullanımları aydalı olabilir. örneğin kredi kartı seçerken yada resimden ürün seçerken. kullanabilirsiniz.

\

evet son olarak hangi değerler seçili kontrol edelim. en alttaki çirkin butonumuzun onclick eventı.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
protected void Button1_Click(object sender, EventArgs e)

    {

//labelları sıfırlayalım

        Label6.Text = "Seçilen ürünler:";

        Label4.Text = "Seçilen renkler:";



//seçili resim yolları

        string secili = "images/r2.jpg";

        string secili2 = "images/c2.jpg";

        //renkeri ve ürün tipini bulalım



//2 satırda da 3 tane buton ve 3er tane label olduğu için tek forla hal

        for (int i = 1; i <= 3; i++)

        {



//önce ürün tiplerini buluyoruz. 

//u1,u2,u3 ürün butonlarımızdı

ImageButton ib = ((ImageButton)(FindControl("u" + i.ToString())));

//e1,e2,e3 ürün labellarımızdı

            Label lb = ((Label)(FindControl("e" + i.ToString())));



            if (ib != null && ib.ImageUrl == secili && lb != null)

            {

//seçili ve boş değer dönmemişse etiket olarka kullandığımız label değerlerini sonuc labelına ekliyoruz.

                Label6.Text += lb.Text;

            }



//şimdi de renk tercihlerini bulalım burdan zaten tek sçeim dönecek. üstteki ile aynı hemen hemen

            ImageButton tr = ((ImageButton)(FindControl("ter" + i.ToString())));

            Label tercih = ((Label)(FindControl("Label" + i.ToString())));



            if (tr != null && tr.ImageUrl == secili2 && tercih != null)

            {

                Label4.Text += tercih.Text + ",";

            }





        }



    }

uygulamanın çalışır halini görmek için tıklayın.
uygulama proje dosyası için tıklayın.

Spacer
Spacer
/* Etiketler: , , , , , , , , */
/* vectro yazdı. 20 Mart 2009 15:25. 7 yorum var */
önceki yazı
Phpde linkleri seolu yapmak
sonraki yazı
CSS ile Transparan Resim

Yorumlar

süper.

/* feew | 21 Mart 2009 19:46 */

makale fena değilde* totnews çok güzel projeymiş çok beğendim eline sağlık

*bu tarz işleri jquery ya da mootools ile yapmak lazım asp.net ajax henüz yeterli seviyede değil ki bu yüzden vs 2010 da jquery entegre olarak geliyor

/* ben.ferit.im */
/* Frosten | 22 Mart 2009 13:57 */

jquery bilgim yok. haklısın daha hızlı bir çözüm olurdu. uygulama örneğinde ajax çalışmıyor postback oluyor ama projeyi indirirseniz çalışır indirirseniz. web config ayarlarını değiştirmedim hostta site çalıştığı için.

totnews konusunda ciddi misin bilmiyorum.o sadece rss feed :) biraz seo çalıştık üstünde sadece.Ama pek memnun değiliz. google bizi kazıklıyor. url şöyle olsun h1 at title'a da yaz.ee yaptık şimdi sıra sende google diyoruz yok :) bakalım zamanla büyür belki.

/* daily news | Logmania | RockLies */
/* vectro | 22 Mart 2009 14:28 */

Biraz konu dışı olacak ama ASP.NET sunucu kontrollerinden üretilen HTML kodları genelde w3C standartları doğrulamasından geçemiyor. ASP.NET ile yapılan sayfaları W3C İşaretleme Doğrulamadan (Markup Validation) geçirmeye çalıştığımda onlarca hata alıyorum. Ayrıca csharp betiklerini ayrı bir dosyada tutmasına rağmen JS betiklerini HTML içerisine yerleştiriyor. Bunları HTML'den ayrıştırmıyor.

İyi derecede ASP bilgim ve deneyimim var ancak, ASP artık fişi çekilmiş bir teknoloji olduğundan ASP.NET veya PHP'ye geçiş yapacağım fakat karar veremiyorum.

ASP.NET'i de PHP'ye biraz inceledim. PHP oldukça kolay ve keyifli geldi bana. Javascript ile de ilgilendiğimden söz dizimi pek yabancı gelmedi. ASP.NET ise sunucu kontrolleri sayesinde web tabanlı geniş ve karmaşık içerikli büyük projeleri kısa zamanda geliştirme noktasında ciddi kolaylıklar ve zaman kazancı sağlıyor. Yani edindiğim izlenimler bunlar. Her ikisi konusunda da ciddi deneyimleri olan arkadaşlardan bu konu hakkında fikir almak isterim.

/* Bildiğini zannetmek, öğrenmenin en büyük düşmanıdır. */
/* mcdream | 02 Nisan 2009 13:00 */

evet güzel tespitler yapmışsın. haklısın diyebilirim asp.net'in müdahele edilmeyen kısımları var özellikle html tarafında bela çıkarıyor. hatta zaman zaman javascriptlerin çalışmadığını bile gördüm. arada kendi sıkıştırdığı düzenlediği kodar yüzünden. microsoftun standartlara yanaşmayan tavrı burada da görülüyor. ama yine de nesnelerin geniş kütüphanelerin olduğu yönetilebilir ve pratik bil dil. kodunuz çorba olmuyor. ama asp.neti codebehind yazmazsan aspye ve phpye daha çok benzer ki önerilmiyor.

php de kullandım ben gerçekten pratik hızlı çözüm. her şeyin kodu var tam bir web dili. nl2br mesela ufak ama çok faydalı.isnumeric mesela niye microsoft bu kodları düşünmemiş. sanırım hala c# masaüstü uygulaması gibi davranıyor. hele ki codebehind yazmayın üstte bir yerde html içinde tanımladığınız değişkene bile ulaşamıyorsunuz? bu nasıl bir iştir nasıl böyle bir hata yapılır.

karar senin şahsen ben güçlü bir ide nesneleriyle. derli toplu kodluyla. exe ve masaüstü işlemlerine uyarlanabilmesi, xml, ajax gibi yapıalrın çok kolay kullanılabilmesi gibi yönleriyle .net yazmaktan keyif alıyorum. w3c'yi ise çok umursamıyorum açıkcası. sitem browserlarda iyi görünüyorsa sorun yoktur.

/* daily news | Logmania | RockLies */
/* vectro | 02 Nisan 2009 13:20 */

asp.net kullanarak server side değilde web servisler (json) ile ajax'ı birleştirerek hem php ye yakın hemde daha sağlam kontrollü parçalara bölünmüş web uygulamaları geliştirebilirsiniz. facebook un mimarisi gibi düşünebilirsiniz bunu.. en son yaptığımız projede normal bir web uygulaması ve mootools kullanarak web portalı yaptık css validate den geçiyor. uğraştırıcı olduğu doğru tabi.

@vectro w3c seo için önemli bir unsur bunu unutmamak gerekir

/* ben.ferit.im */
/* Frosten | 02 Nisan 2009 17:53 */

Paylaştığınız bilgiler için teşekkür ederim. W3C konusunda ben de Frosten ile aynı fikirdeyim. Çünkü, biz tasarımcı ve geliştiriciler standartlara uydukça tarayıcı üreten firmalar da bu standartlarla uyumlu tarayıcılar üretmeye ve/veya mevcut tarayıcılarını bu standartlarla uyumlu hale getirmeye çalışacaklardır ki, şu andaki süreç de bu şekilde işliyor. Mesela MS, IE konusunda 8 sürümü ile birlikte bir adım atmış durumda. Diğerleri (FF, Opera, Safari) zaten bu konudalardaki yeterliliklerini ispatlamışlar. CSS desteği de aynı şekilde önemli. Bizlere tasarım sırasında saç baş yolduran tarayıcıların CSS algılama farklılıkları yüzünden kaybettiğimiz zaman ve harcadığımız emeği unutmayalım.

ASP.NET konusunda aklıma takılan ve CodeBehind programlama açısından çelişki olduğunu düşündüğüm bir nokta da daha önce belirttiğim gibi, C# ve/veya VB.NET kodlarını arka planda tutmasına rağmen sunucu kontrolleri ile gelen ve istemci tarafında çalışacak JS kodlarını HTML arasına yerleştiriyor. Ve bazı kontrollerin ürettikleri HTML çıktısı standartlara uymuyor. İşin kötü tarafı bunlara .NET kütüphanelerinden (Sanırım System.Web.UI olması lazım) ulaşıldığından ve tabi ki dinamik olarak oluşturulduğundan müdahale de edilemiyor. Gerçi bildiğim kadarıyla kendi kontrollerimizi yazabiliyoruz.

/* Bildiğini zannetmek, öğrenmenin en büyük düşmanıdır. */
/* mcdream | 03 Nisan 2009 10:35 */

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu Yazıyı Tutanlar

erstn
konfigurasyon
queennothing
feew
trampfd
Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

Bu siteye ilan vermek 7ytl/gün'den başlayan fiyatlarla

son yorumlar

devamı »

arama

pillinetwork