ASP.NET Ajax

  • 26 Şub 2009

ModalPopup Kontrolü ile Kullanıcı Dostu Mesaj Pencereleri Çıkarmak
Merhaba arkadaşlar bu makalemizde ASP.NET AJAX Control Toolkit içerisinde yer alan Modal Popup kontrolünü kullanarak kullanıcı dostu mesaj pencerelerinin nasıl oluşturulacağına bakacağız...

ASP.NET ile uğraşırken kullanıcıyı nasıl bilgilendireceğimiz geliştirici için her zaman sorun olmuştur. Bazen label’lar kullanırken bazı durumlarda da javascript’ten faydalanarak alert metodu kullanılır ve kullanıcıya bir mesaj penceresi çıkarılır. Label kullanıldığında kullanıcı hatanın nerede yazdırıldığını algılayamıyor, alert kullanıldığında ise görsel olmayan bir pencere ile karşılaşıyoruz ve kişiselleştiremiyoruz. Kullanıcıya mesaj verirken başka bir işleminde yaptırılmasını istersek ne label nede alert bizim ihtiyaçlarımızı karşılayamayacaktır.

Örneğin üye girişi gerektiren bir sistemimiz var, kullanıcı bu alana girmek istediğin de hem kullanıcıyı bilgilendiren bir mesaj çıkartmamız hem de üye girişi formunun görüntülenmesini istersek ne yapacağız? İşte bu durumda bizim işimizi çözecek şey ASP.NET AJAX Modal Popup kontrolüdür. Modal popup kontrolü sayfamızın üzerine yeni bir layer(div) açarak kullanıcının layerin altında kalan kısmı ile işlem yapmasını engelleyerek sadece bizim açtığımız layer ile işlem yapmasını sağlar. Bizde bu oluşturduğumuz layer üzerine hata mesajlarını gösterebileceğimiz labeller ekleyebilir, üzerinde formlar oluşturup mesaj penceremizi istediğimiz gibi kişiselleştirebiliriz.

Not:Bu işlemi yapabilmemiz için AJAX Control Toolkit’i indirip kurmamız gerekmektedir. ASP.NET AJAX Control Toolkit’i indirmek için http://www.asp.net/Ajax/ajaxcontroltoolkit adresini kullanabilirsiniz.

Yeni bir ASP.NET projesi başlattıktan sonra. Sayfamıza bir adet UserControl ekleyelim. Adı WebMessageBox olsun. UserControl için HTML kodumuz aşağıdaki gibi olacaktır.

[WebMessageBox.ascx]

<%@Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

// Modal Popup kontrolünü dinamik olarak çağıracağımız için TargetControlID’ye bir değer atayamıyoruz. Bu özelliğe bir değer atamazsak hata verecek bunu engellemek için de formda görünmeyen bir buton ekledik.
<asp:Button ID="btnShow" runat="server" Style="display: none;" />

<asp:Panel ID="pnlPopup" runat="server" Style="background-color: White; width: 420px; border-width: 2px; border-color: gray; font-size: 10pt; font-family: Tahoma; line-height: 15px; border: 1px solid #A6A6A6;">
<div style="background-color: red; background-repeat: repeat-x; width: 415px; height: 22px; padding-top: 3px; text-align: left; padding-left: 5px; font-weight: bold;">
<span style="color: #FFFFFF; direction: ltr;">Mesaj Kutusu</span></div>
<div style="padding: 5px;">
<div style="padding: 10px;">
<div style="float: left; padding-right: 10px;">
//Hata olduğunda kullanıcıyı bilgilendirecek olan resim dosyası…
<asp:Image ID="imgIcon" runat="server" />
</div>
<div>
//Hata Mesajının gösterileceği textbox…
<asp:Label ID="lblMessage" runat="server"></asp:Label>
<div style="width:100%; text-align:right; padding-top:20px">
// Açılan ModalPopup kontrolünü kapatacak olan buton…
<asp:Button ID="btnClose" Text="Kapat" runat="server" CausesValidation="False" />
</div>
</div>
</div>
</div>
</asp:Panel>
<cc1:ModalPopupExtenderID="ModalPopupExtender1" runat="server" TargetControlID="btnShow" PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" DropShadow="true" />

ModalPopup kontrolünün arka BackgroundCssClass özelliği içinde bir CSS class’ı oluşturalım.

[WebMessageBox.css]

.modalBackground
{
background-color: black; filter: alpha(opacity=70);opacity: 0.7;
}


Yaptıklarımızı inceleyecek olursak, lblMessage kontrolünü MessageBox açıldığında içerisinde göstereceğimiz hata mesajı için, imgIcon kontrolünü kullanıcıyı bilgilendiren bir resim için, btnClose’u da açılan popup penceresini kapatmak için ekledik. Peki btnShow butonunu neden ekledik? Bununda nedeni aslında basit, Modal PopupControl’ünün TargetControlID parametresine mutlaka bir değer atamak zorundayız. Bunun için bizde forma bir buton ekledik display özelliğini kapattık ve ModaPopupControl’ün TargetControlID özelliğine bu kontrolü atayıp bu sorunu çözdük.

Buton’un display özelliği kapalı olduğu için bu kontrolü kullanamıyoruz. Zaten bizim amacımız da bu değil. Bizim yapmamız gereken istediğimiz yerden bu UserControl içerisindeki ModalPopupExtender’i çağırmak. ModalPopup kontrolünün server-side çalışan Show isimli bir metodu var. Bu metot ModalPopup kontrolünün kullanıcıya gösterilmesini sağlıyor.

ModalPopupExtender.Show()


Bizde bu metodu kullanarak kod tarafından modalpopup kontrolünü görünebilir hale getirelim. Bunun için UserControl’ün kod dosyasına gidip bir metot yazalım. Bu metot ilgili yerlere değerlerini atasın ve değerleri atadıktan sonra da ModalPopup’ın gösterilmesini sağlasın.

[WebMessageBox.ascx.cs]

publicvoid Show(string Mesaj, string Action)
{
    if (Action == "success") // Burayı enumda yapabilirsiniz…
    {
        imgIcon.ImageUrl = "success.gif"; 
    }
    else if (Action == "error")
    {
        imgIcon.ImageUrl = "error.gif";
    }
    lblMessage.Text = Mesaj;
    ModalPopupExtender.Show();
}


WebMesageBox kontrolümüz hazır, şimdi bu usercontrol’ü bir sayfaya ekleyelim. Aynı zamanda bir buton ekleyelim. Bu buton WebMessageBox’ın görüntülenmesini sağlayacak.

[Default.aspx]

<%@Register src="WebMessageBox.ascx" tagname="WebMessageBox" tagprefix="uc1" %>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<uc1:WebMessageBox ID="WebMessageBox1" runat="server" />
<br/> <br />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />


Şimdi de buton’un click eventine gidelim ve UserControl içerisinde yer alan metodu kullanarak MessageBox’ı çıkartalım.

[Default.aspx.cs]

protectedvoid Button1_Click(object sender, EventArgs e)
{
    WebMessageBox1.Show("İşlem Başarılı", "success");
}


Sayfayı Çalıştıralım ve butona tıkalaylım,

Birde kodu aşağıdaki gibi değiştirelim,

[Default.aspx.cs]

protectedvoid Button1_Click(object sender, EventArgs e)
{
    WebMessageBox1.Show("Hata var…", "error");
}

Sayfadaki butona tekrar tıklayalım,

Hoş geldin WebMessageBox… Kaynak kodları indirmek için tıklayınız. Başka bir makale de görüşmek üzere. ASP.NET ile kalın J

Sem GÖKSU
www.semgoksu.com | www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com

Kaynaklar
asp.net/ajax

  • 22 Haz 2008

Edutime Ajax Semineri
Cumartesi günü Edutime ögrencilerinin istegiyle onlara ASP.NET AJAX semineri verdim. Konuları islerken zamanın nasıl geçtigini anlayamadık. Beni sabırla dinleyen arkadaslara tesekkür ediyorum.


EDUTIME ASP.NET AJAX Semineri

  • 17 May 2008

Daron'dan Yeni Kitap : ASP.NET 3.5 AJAX

Kitapta neler var?

Toplamda 700 sayfayı bulan bir AJAX kitabı olarak aslında ASP.NET ile AJAX'ı ögrenmek isteyenlerin ihtiyaç duyabilecegi neredeyse her sey var diyebilirim. Farkındaysanız kesin konusmuyorum :) çünkü bir sonraki baskıya ekleyecegim bir bölümü kenara not aldım bile :) Eksikler hiçbir zaman bitmez ama su an kitabımı elime alıp baktıgımda su kadar iddialı konusabilirim; "ASP.NET 3.5 AJAX Dünyada bulabileceginiz en iyi 5 kitap arasındadır." Türkiye'de zaten herhangi bir rakibi yok kitabın. Sanırım bir sonraki baskısından sonra dünyada da olmayacak :)

Kitap içerisinden bastan baslayarak JavaScript, XML, XSLT, XPATH, CSS konularına giris yaptıktan sonra el yapımı AJAX tekniklerine deginiyoruz. Sonrasında bagımsız JavaScript kütüphanelerini inceliyoruz. Tüm bunları kapsayan ortalama 200 sayfalık bölüm ASP.NET'ten tamamen bagımsız olarak diger sunucu programlama (ASP, PHP) dilleri ile de rahatlıkla kullanılabilir bilgiler içeriyor. Altyapıyı hallettikten sonra ASP.NET tarafına geçip sunucu taraflı kütüphaneleri incelemeye baslıyoruz. ASP.NET 2.0 ile AJAX kullanımı ve sonrasında da ASP.NET 3.5 tarafına geçerek ilerliyoruz. Sona dogru AJAX Control Toolkit'i inceliyor, örnek bir AJAX kontrolü gelistiriyor ve "Sorunlar ve Taktikler" bölümünde de tüm AJAX projelerinde karsılasacagınız genel geçer sorunlara çözümler arıyoruz. Kitaba noktayı koymadan önce de "Gelecekten Nameler" bölümünde bizi gelecekte bekleyen gelismeleri irdeliyoruz.

Kaynak: http://daron.yondem.com/tr/

  • 06 Nis 2007

Bana Makale Yaz !
Merhabalar arkadaslar;
Bu fikri daha önce bir kaç sitede görmüstüm. Sizlere daha çok yardımcı olabilmek için bende böyle bir yenilige gittim.
Hepimize hayırlı olması dilegiyle (:

"Bana Makale Yaz" diyorsanız iletisim formundan bana ulasabilirsiniz...

  • 24 Mar 2007

AJAX'ın Dünü Bügünü
Merhabalar bu makalemizde ajax teknolojisini ve çalışma prensiplerini inceleyeceğiz.

Baslamadan önce makalemizin içerigini göz atalım. 

  • AJAX Nedir? 
  • AJAX'IN Kullandıgı teknolojiler 
  • Klasik Çalısma Modeli 
  • AJAX Çalısma Modeli 
  • ASP.NET AJAX Nedir? 
  • ASP.NET AJAX Sunucu Kontrolleri 
  • ASP.NET AJAX Control Toolkit
Ajax Nedir?

AJAX (Asynchronous JavaSctiprt ve XML), XML ve javascript'in es zamanlı olmadan birlikte çalısması ile ortaya çıkan bir teknolojidir. Yani Sunucu ile istemci arasında asenkron(eszamanlı olmayan) haberlesme yapılmasını saglayan bir yöntemdir. Bu sayede sayfanın tamamını yenilemeden sadece bizim belirledigimiz alanları güncellenmesini saglanır. AJAX Zannedilenin aksine yeni bir teknoloji degil sadece var olan birkaç teknolojinin bir araya gelmesi ile olusturulmus bir yöntemdir.

Ajax ilk olarak Subat 2005 yılında yayınlandı ve yazılım gelistiriciler tarafından çok çabuk benimsen bir web teknolojisi haline geldi.

AJAX Hangi teknolojileri kullanır? 

HTML/XHTML : Sayfa içerikleri görümtülemek için kullanılır. 
CSS : Sayfada görüntülenecek olan verilere stiller uygulayarak biçimlendirmemimizi saglar. 
DOM : Sayfa yüklendiginde sayfaın dinamik olarak update olmasını saglar.
XML : Sunucu ve istemci aradındaki veri degisimini saglar. 
XSLT : XML'in CSS ile biçimlendirilip HTML/XHTML'e dönüstürülmesini saglar. 
XMLHttpRequest: Server ile browser'ın iletisimi saglayan nesnedir. Bu nesne sayfanın postback olmadan server ile konusmasını saglar. 
JavaScript : AJAX Teknolojisini ugulamak için kullanılan script dilidir.

Tüm bu teknolojiler ajax içerisinde kullanılır fakat bunlar arasında sadece üçünün kullanılması zorunludur: HTML/XHTML, DOM ve Javascript. Bilginin görüntülenmesi için HTML/XHTML'e ihtiyaç duyar, Sayfa refresh olmadan HTML/XHTML'de görüntülenenen bilgilerin degismesi içinde DOM'a ihtiyaç duyar. JavaScript ise sayfadaki verileri güncellemek için DOM'u yapılandırmak ve client-server iletisimini baslatmak için kullanılır. Diger teknolojiler ise AJAX'ın daha islevsel kullanılması içindir fakat kullanılması da zorunlu degildir.

Klasik Çalısma Modeli



AJAX Çalısma Modeli


Niçin Ajax Kullanırız?

  • Kullanıcılara daha interaktif web sayfalarının hazırlanması 
  • Kullanıcıya daha çabuk yanıt verilmesi 
  • Farklı kaynaklar ile entegreli çalısması 
  • Kullanılmasının ve gelistirilmesinin çok kolay olması 
  • Tüm browserlar tarafından desteklenmesi 
  • ASP.NET 2.0 ile entegreli çalıstıgı için AJAX'ı tercih ederiz.

AJAX Teknolojisi Kullanılan bazı siteler:

  • Kisisel Web Sitem :)
  • Gmail 
  • Google Map 
  • Google Suggest 
  • Live mail

ASP.NET AJAX

ASP.NET AJAX, Microsoft tarafından gelistirilmis ücretsiz bir AJAX Frameworkdür. Javascript kodlarını arasında kaybolmadan kolayca AJAX uygullamalarımızı gelistirmemize saglayan bir teknolojidir. Ilk kod adı "ATLAS" olarak duyuruldu. Fakat daha sonra ASP.NET AJAX adı altında kendi orijinal adını geri aldı. Ocak 2007 yılında full sürümü olan ASP.NET AJAX 1.0 yayınlandı.

En sık sorulan sorulardan biride AJAX yalnızca ASP.NET 2.0 sürümleri ile kullanabilmekteyiz. ASP.NET 1.1 ve ASP.NET 1.0 Sürümlerini desteklemiyor.

Istemci ve sunucu tarafında bazı bilesenlerle desteklenmektedir. Istemci tarafında istemci frameworkleri ve servisleri bulunmaktadır. Sunucu tarafında da sunucu frameworki bulunmaktadır. Bu framework içerisinde sunucu kontrolleri, uygulama servisleri ve web servisleri bulunmaktadır.



AJAX Sunucu Kontrolleri

Script Manager
Script Manager, Ajax script kütüphanelerini ve script dosyalarını yönetir. Ajax kullanacagımız her sayfaya bu kontrolü eklemeliyiz.

Update Panel
Sayfadaki içeriklerin postback olmadan parçalar halinde güncellenmesini saglayan ajax kontolüdür. Update panel içerisindeki verilerin güncellenmesi gerektiginde sayfa da postback islemi olmadan sadece update panel içerisindeki veri güncellenir.
Triggers:
Update panel dısarısında yer alan kontrellerin update panel içerisindeki verileri güncellemeleri gerektiginde trigger kullanırız. 2 tip trigger vardır. AsyncPostBackTrigger ve PostBackTrigger.

AsyncPostBackTrigger: Hedef kontrolü ve tetiklenecek olan eventi belirtirerek ilgili updatepanel içerisindeki verinin postback olmadan(asenkron) güncellenmesini saglar.

PostBackTrigger: Hedef kontolü belirterek Updatepanel içerisindeki verinin postback olarak(senkron) güncellenmesini saglar.

Update Progress
UpdatePanel güncellendiginde yada içerik degistiginde browser da kullancıyı bilgilendirme amaçlı kullanacagımız kontroldür.

AJAX Control Toolkit

AJAX Kontrol toolkit, Istemci taraflı çalısan ASP.NET AJAX kontolleri ve extenderleri olusturmamızı saglayan bir yapıdır. Kolayca Kisisel Kontroller ve extenderler olusturabilmemiz için güçlü bir SDK'si vardır. AJAX kontrol Toolkit'i http://ajax.asp.net adresinden indirebilirsiniz. Microsoft zamanla 70-80 arasında standart olarak kullanılabilecek kontrol gelistirmeyi planlıyor.

Beni dinlediginiz için tesekkür ederim.

SEM GÖKSU
MCP(Microsoft Certifed Professional)
MCAD(Microsoft Certifed Application Developer)
MCTS(Microsoft Certifed Technolgy Specialist)
MVP(Microsoft Most Valuable Professional)
info@semgoksu.com  
www.semgoksu.com