24 Mar 2007 AJAX'ın Dünü Bügünü Kategori: AJAX Etiketler: ASP.NET Ajax 0 Yorum 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
23 Mar 2007 Ajax Sunumu Kategori: Yazılım Etiketler: ASP.NETASP.NET Ajax 9 Yorum Hazırlamıs oldugum Ajax Sunumunu indirmek için tıklayınız.
23 Mar 2007 Ustalarla tanıştım... Kategori: Benden Etiketler: 1 Yorum Bugün Burak Selim Senyurt, Bülent Sözge, Özgür Altuntas ile tanıstım. Her ne kadar beni biraz terletselerde güzel bir tanısma idi :)
16 Mar 2007 XML ve XSLT Kullanarak Dinamik ASP.NET Sayfaları Oluşturmak Kategori: ASP.NET Etiketler: ASP.NET 2 Yorum Merhaba arkadaşlar bu makalemizde Bir XML dökümanı oluşturup, oluşturduğumuz XML dökümanını XSLT ile sitil uygulayıp ASP.NET sayfalarında kullanacağız… Kısaca XML(Extensible Markup Language)XML veri alısverisinde kullanılacak standart bir format olarak kullanılan bir dildir. Uygulamalarımızı farklı platformalara tasımak istedigimizde en iyi çözümdür. XML belgelerine kendi etiketlerinizi ekleyebilir aynı veritabanlarındaki gibi istedigim fieldları gösterebiliriz. Application, dil, isletim sistemi vb. gibi kısıtlamalara baglı degildir. Uygulamalar kendi veri yapılarını tanımlayabilir. Son derece güvenligi oldugu için veri paylasımında yada dagıtımında sürekli kullanılır. Örnek olarak Haberler.XML'i olusturalım;<?xml version="1.0" encoding="utf-8" ?><Haberler> <Haber ID="1"> <Baslik>Sem Göksu MVP Oldu</Baslik> <Tarih>bugünün tarihi iste.</Tarih> <Icerik>Bi tebrigi hakettim J</Icerik> </Haber> <Haber ID="2"> <Baslik>Sem Göksu AJAX Semineri</Baslik> <Tarih>Gelecekte.</Tarih> <Icerik>Bilmemki.</Icerik> </Haber> <Haber ID="3"> <Baslik>Ajax güzel sey</Baslik> <Tarih>Gelecekte.</Tarih> <Icerik>güzel.....</Icerik> </Haber> <Haber ID="4"> <Baslik>Ajax güzel sey 2</Baslik> <Tarih>Gelecekte.</Tarih> <Icerik>güzel.....</Icerik> </Haber> <Haber ID="5"> <Baslik>Ajax güzel sey 3</Baslik> <Tarih>Gelecekte.</Tarih> <Icerik>güzel.....</Icerik> </Haber></Haberler>Simdi bu XML'i açtıgımız da neler olacak bi bakalım :) Ben bir sey anlamadım ziyaretçi nasıl anlasın. Bunu biraz biçimlendirelim. Ama nasıl? Kısaca XSLT(Extensible Stylesheet Language Transformation)Sitemizde haberleri farklı sitelerin de kullanması için XML'e döktük. Ama siteler Xml verisinin farklı bir formata dönüstürülmesini istiyor. XSLT standardı tam bu noktada karsımıza çıkıyor. XSLT, XML içerigine sitiller uygulayarak sayfalarımızın HTML formatına dönüstürülmesini saglar. Ayrıca xml üzerinde sıralama, filtreleme ve gruplama gibi islemler yapabiliriz. Örnek olarak HaberlerSitili.xsl'i olusturalım;<?xml version="1.0" encoding="utf-8"?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="/"><html><body><h1>Haberlerim...</h1><table border="0" borderColor="gray" cellpadding="0" cellspacing="0" width="700"><tr bgcolor="Yellow" height="20"><td>ID</td><td>Tarih </td><td>Baslık </td><td>Icerik </td></tr><xsl:for-each select="Haberler/Haber"><tr><td><xsl:value-of select="@ID"/></td><td><font size="2" color="Blue"><xsl:value-of select="Baslik"/></font></td><td><b><xsl:value-of select="Tarih"/></b></td><td align="right"><xsl:value-of select="Icerik"/></td></tr></xsl:for-each></table></body></html></xsl:template></xsl:stylesheet>Evet Simdi bu olusturdugumuz XML ve XSLT dökümanlarını birlestirerek HTML gibi bir çıktı alalım. Projemize bir sayfa ekleyelim;Ilk olarak sayfamızın namespacelerine System.XML ve System.XML.XSL'i ekleyelim.Sonra Forlm'un loadıında;VB.NETDim xdoc As New XmlDocument()xdoc.Load(Server.MapPath("haberler.xml"))Dim xsltran As New XslCompiledTransform()xsltran.Load(Server.MapPath("HaberlerSitili.xsl"))xsltran.Transform(xdoc, Nothing, Response.Output)C#NETXmlDocument xdoc = new XmlDocument();xdoc.Load(Server.MapPath("haberler.xml"));XslCompiledTransform xsltran = new XslCompiledTransform();xsltran.Load(Server.MapPath("HaberlerSitili.xsl"));xsltran.Transform(xdoc , null, Response.Output);Simdi sayfaımızı çalıstıralım; Az önceki çirkin XML simdi ne güzel oldu : )Bu makalemizinde de sonuna geldik. Tesekkür eder iyi çalısmalar dilerim. Sem GÖKSUMCP | MCAD.NET | MCTS | ASP.NET MVPÖrnek Kodlar için mail adresimi kullanabilirsinizsemgoksu@semgoksu.com Kaynaklar www.codeproject.com
09 Mar 2007 AJAX ListSearch Extender Kategori: AJAX Etiketler: ASP.NETASP.NET AjaxASP.NET 2.0 1 Yorum Merhaba arkadaslar, bu makalemizde ajax control toolkit’innesnelerinden Ajax ListSearch Extenderi ve özelliklerini inceleyecegiz.ListSearchExtenderList SearchExrender kontrolü ASP.NET Dropdownlist ve Listbox itemleri içinde yazarak aramayapmamizi saglar. Listeleme elemanlari üzerine tiklandiginda Bir uyari mesaji çikarörnegin; arama için birkaç harf giriniz. Bu uyariya sitil verebilir vepozisyonun belirleyebiliriz.Kullanimi<ajaxToolkit:ListSearchExtender id="LSE" runat="server"TargetControlID="ListBox1"PromptText="Type to search"PromptCssClass="ListSearchExtenderPrompt"PromptPosition="Top" /> ÖzellikleriPromptText - Listeleme elemanina tiklandigindagösterilecek olan mesaj PromptCssClass - Uyari mesajina uygulanacak olan sitil adiPromptPosition - Uyari mesajinin gösterilecegi yer. Bottomve Top degerlerini alir.ÖrnekBuanlattiklarimizi bir örnekle devam ettirelim. Örnegimizde Dropdownlist veListbox elemanlarinda arama yapacagiz. Örnegimize baslayalim ve ilk olarak birAJAX Projesi açalim. Simdiolusturdugumuz bu sayfaya 1 adet Dropdownlist ve Listbox ekleyelim. Bukontrollerde arama yapmak için 2 adet de ListSearch Extender ekleyelim. Benimolusturdugum sayfa asagidaki gibidir. Benlisteleme elemanlarina bir miktar item ekledim. Bu elemanlari Databaseden dedoldurabiliriz. Ama suan için buna gerek yok.Simdi ilkolarak Listbox için ListSearch Extenderinin gerekli propertylerini yazalim.<cc1:ListSearchExtender ID="ListSearchExtender2" runat="server"TargetControlID="ListBox1"PromptText="Aramayapmak için yaziniz..." PromptPosition="Top" PromptCssClass="modalPopup"></cc1:ListSearchExtender>Yukarida ="text/css">.modalPopup {background-color:#ffffdd;border-width:2px;border-style:solid;border-color:Gray;padding:0px;}</style>Simdidedropdownlist için ListSearch Extender için gerekli kodlari yazalim. Hiçbir farkyok sadece TargetControlID Propertysini degistirecegiz. <cc1:ListSearchExtender ID="ListSearchExtender1" runat="server"TargetControlID="DropDownList1"PromptText="Aramayapmak için yaziniz..." PromptPosition="Top" PromptCssClass="modalPopup"></cc1:ListSearchExtender>Simdi buyazdiklarimizi test edelim;Simdi aramaiçin bir seyler yazalim; örnegin " Sem " : )Simdi dediger DropdownList' deneyelim;Simdi aramayapmak için bir seyler yazalim;Gerçektençok kullanisli ve ise yarayacak bir kontrol : ) Projelerinizde güle gülekullanin : )Bumakalenin de sonuna geldik, baska bir makalede görüsmek üzere basari ve iyigünler dilerim. SemGÖKSUMCP | MCAD.NET | MCTS | ASP.NET MVPÖrnekKodlar için mail adresimi kullanabilirsinizaskisem@hotmail.comKaynaklar http://ajax.asp.net