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
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çinu1,u2,u3 butonlar ve e1,e2,e3 labeller. Etiketlerimizi doldurralım.
ö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.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ğıdaprotected void sec(object sender, ImageClickEventArgs e){//hangi buton istek gönderdiImageButton 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ı.protected void Button1_Click(object sender, EventArgs e){//labelları sıfırlayalımLabel6.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 halfor (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 hemenImageButton 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.
