Asp.Net de kullanılan ve çok önemli bir konu olan Masterpage konusunun netten indirilen bir hazır CSS template üzerinde uygulanışı ile alakalı ayrıntılı bir video iyi seyirler dilerim

Merhaba arkadaşlar bu yazımda sizlere Javascript ile yapılabilen çok yararlı bir o kadar performanslı hep görüp acaba nasıl dediğimiz bir yapıyı anlatmaya çalışacağım…
XML HTTP REQUEST Javascript ile herhangi bir server’a http request yapmanıza olanak veren guzel bir objedir. Gelen cevabı parse edip sayfadaki bazi öğeleri değistirebilir ve sayfa refresh olmadan bir cok şey yapilabilir. Yani işin kısası Postback olmadan bilgileri çekebilme işlemini gerçekleştirmemize yardımcı oluyor. Örnek olarak Google da yazdığımız bir harf tamamlanarak öneriler halinde geliyor. Sayfanın yenilendiğini görmüyoruz sadece önerilerin belirdiği gözlemleniyor ama bu verilerde bir veritabanından geliyor o derece hızlı

Bu teknolojiyi Internet Explorer, Mozilla Firefox,Opera ve Safari destekliyor.Xml Http Request İnternet Explorer ‘da ActiveX Control , Firefox ‘ta ise DOM (Document Object Model)’ in bizzat parçasidir. Internet Explorer 7’ den itibaren native olarak desteklenmektedir. Bu sayede de artik ActiveX ‘i kapatilmis browserlarda dahi calisabilmektedir.
Bu yapının avantajlarını şöyle sıralayabilirim :
• En önemli artısı, sayfa yenilenmediği için değişken olmayan diğer kısımların sunucuda yeniden işlenip sunucuyu yorması engellenir;
• Kullanıcıda tekrar yüklenmediğinden bant genişliği boşa harcanmaz, aynı zamanda kullanıcı tarafında sayfalarda daha hızlı işlem yapılır.
• Sayfayı yenilenmeden içeriğimizi alıyor olmamız, web uygulamamıza bir masaüstü uygulama görünümü katar.
• Web uygulamalarının tek sıkıntısı, hızlı ve pratik çalışamıyor olmanızdır. Web yazılımları masaüstündeki yazılımlar gibi pratik kullanılan şeyler olmalıdır
• XMLHttpRequest aslında javascript ile sunulmuş bir kolaylıktır. Web sitesinin eş zamanlı olarak arka planda çalışan olaylarını takip eder. XML CSS ve javascript ile sonucun anında görülmesini sağlar.
• XMLHttpRequest istemci tarafında (Client Side) çalışır. Birden fazla asenkron web sayfasına postback ve yenileme yapmadan istekte bulunabilir ve gelen cevapları istekte bulunanlara iletir.

ONREADYSTATECHANGE
Sunucuya bir istek gönderilmesinden sonra, sunucudan dönen veriyi alabilecek bir işleve ihtiyacımız var. onreadystatechange özelliği sunucunun yanıtını işleyecek olan fonksiyonu tutar.
Aşağıdaki kod hem boş bir fonksiyon tanımlar hemde onreadystatechange özelliğini ayarlar

READYSTATE ÖZELLİĞİ
Sunucu yanıtının durumunu tutar. readyState her değiştiğinde onreadystatechange fonksiyonu çalıştırılır. Sunucudan gelen yanıtın tamamlandığını (veriyi alabileceğimiz durumu) kontrol etmek için onreadystatechange işlevimize bir If ifadesi ekleyeceğiz:

RESPONSETEXT ÖZELLİĞİ
Sunucudan gelen veri responseText özelliği ile alınabilir.
Kodumuzda “time” form değişkenimizin değerini responseText değerine eşitleyeceğiz:

XMLHttpRequest nesnesini etkin şekilde kullanmanın 2 yolu mevcut:

Send the Request
Bu yöntem bir XMLHttpRequest nesnesi yaratıp olayları dinlemesi için atamaktır.
Basit olarak bir xhr nesnesi yaratıyoruz:

Daha sonra oluşturduğumuz nesneyi onreadystatechange ile olayları dinlemesi için görevlendirmek:

Ardından open() metodunu çağırıyoruz.

ilk parametre HTTPRequest tipini belirler (GET,POST,HEAD,……) Get ve Post en sık kullanılanlardır. Get deyimini istekle birlikte çok fazla data göndermemiz gerekmiyorsa kullanırız. Bunun aksi durumlarda POST kullanırız.
İkinci parametre bizim istekte bulunduğumuz URL dir. Örnekte belirtilen bir text dosyasıdır sayfamızla aynı adres içerisinde bulunur.
Son parametremizde isteğin boolean değerdir isteğin eş zamanlı olmaması durumunu true veya false değer ile belirler.
Son adım olarak isteği göndermektir.

Send() metodu istekle birlikte herhangi bir datayıda içerebilir. Get ile gönderilen isteklerde bu boş bir stringdir çünkü data URL olarak belirttiğimiz dosya yada adrestedir. POST ile gönderilen isteklerde bir query string mevcuttur key=value&key2=value2.
Bu noktada istek gönderilir ve kodlar diğer bir göreve atanabilir. Callback fonksiyonu isteğimizim serverdan geri gelmesi ile çağırılır.

Process the Response
Olay dinleyici cevap geldiğinde uyarır ve kodlarımız gelen cevap ile yararlı işler yapar her gelen cevabı boşa kontrol ve ya işleme sokmak zorunda kalmayız.
Readystatechange olayı ile bir dinleyici yerleştirdik XHR nesnesinin readystate özelliğini çağırdık. Readystatechange olayı çalıştığında her zaman değişen bir özelliktir .
Readystate özelliği şu değerleri takip eder
0—uninitialized
1—loading
2—loaded
3—interactive
4—complete = istek geri geldi ve işlendi.
Readystate özelliğini 4 olarak ayarladığımızda bunun anlamı istek geri geldi ve işleme girdi demektir. 4 özelliği sadece bununlada kalmayarak HTTP istek durum kodlarınıda inceler. Olmayan bir URL gönderildiğinde alınadan HTTP istek kodu 404 (Dosya bulunamadı) hatasıdır.
Eğer dönen durum kodu 200 (ok ) ise bu geçerli bir adres bulunduğunu XHR nesnesinin çalışabileceğini belirtir.

Önce istekte bulunduğumuz sayfayı yeni içerik olarak almış olacağız ve bunu ister sayfada görüntüleyebilir istersekte bir takım hesaplamalarda kullanabiliriz.

Hadi bununla ilgili bir uygulama yapalım kafalarda nasıl çalışır bu sorusu olmasın
XMLHTTP REQUEST yöntemiyle databasede bulunan kategorilere ait ürünleri hızlı bir biçimde ekranda görüntüleyeceğiz.
Öncelikle XmlHttpRequest nesnemizi yaratmak için bir function yazıyoruz.

Daha sonra oluşturduğumuz bu nesneye get ile parametre yollayabileceğimiz ve geri dönüş sağlayabileceğimiz başka bir function daha yazıyoruz.

Daha sonra Handler ile istekte bulunduğumuz ürün grubunun kategori id sini birlikte yollayabileceğimiz başka bir function daha yazıyoruz.

Sayfamızın CodeBehind kısmındada Repeater nesnesi ile databasedeki “Categories” tablosundaki kategori isimlerini buton nesneleri ile birlikte oluşturuyoruz.

Son olarak sayfamızı görüntülediğimizde hem butonlarla bir seçim yapabiliyoruz hemde Dropdown menü ile istediğimiz Kategoriye ait ürünleri görüntüleyebiliyoruz.
Hiç beklemeden sanki masaüstü uygulamasıymışcasına hızlı ve pratik

Umarım Yararlı olur

M.Zeki Osmancık

Projemize kaldığımız yerden devam ediyoruz
Kaydet işleminden farklı olarak mevcut olan kaydı düzenlemek için düzenleme butonumuzun Click olayına ilgili kodları yazıyoruz.

Farklı bir işlem yapmadık aslında. XmlNode iledüğümü belirledik ve InnerText ile o düğüm içersinde var olan veriyi almış olduk. Yeni değerleride yine InnerText ile yerine yazmış olduk. Bütün işlemleri element içersindeki düğümlerdeki bilgiler ile yaptık yeni kayıt için yeni düğümler ekledik mevcut düğümler ekledik. Silme işlemi içinde tabiki düğüm silmemiz gerekecek bunun içinde Sil butonuna…

RemoveChild ile ChildNode dediğimiz seçilen düğümü silme işlemini gerçekleştirebiliyoruz.

Peki 3 temel işlemimiz bitti birde bu Xml sayfası içersinde arama yapmak istersek ?

Bunun içinde en alt kısma yerleştirdiğimiz Textbox ve Button ile bu işi çözebiliriz . Bu işlem içinde …

İşte Xml i veritabanı olarak kullanarak yaptığımız çok basit bir telefon defteri

Güle Güle kullanın

Projeyi İndirebilmek için Tıklayın!!

Bilgiyle Kalın …

M.Zeki Osmancık

Bir önceki yazının devamı olarak bu yazımızdada projemizi geliştirmeye devam ediyoruz.

Listbox a kayıtlarımızı ekledikten sonra listbox üzerinde bir kaydı seçtiğimizde bilgilerin ilgili textbox lara yazılmasını istiyoruz bunun içinde Listbox kontrolünün SelectedIndexChanged olayına ilgili kodları yazıyoruz.

Bu işlemden sonra projemizde bir adım daha atmış oluyoruz ve her kaydı seçtiğimizde o kayıtla ilgili tüm bilgiler ilgili textboxlara yazılıyor. Bu bize Update işleminde çok büyük kolaylık sağlayacak.

İlk olarak Kaydet butonunu işlevine kavuşturalım. Ve buton1 in Click olayına ilgili kodları yazalım.

XmlElement: Xml dosyası içersinde bulunan bir elemanı temsil eder.

XmlNode: Eleman içersindeki her bir düğümü temsil eder.

XmlAttribute : Düğümlerin sahip olduğu özellikleri temsil eder.

Görüldüğü üzere Xml dosyamızı bir database gibi kullanarak kayıtları görüntüleyip yeni kayıtları Xml üzerine yazabiliyoruz.

Bilgiyle Kalın…

M.Zeki Osmancık

Merhaba arkadaşlar bir önceki yazımızda XML nedir nasıl kullanılır ile alakalı bilgi vermiştik.Bu yazımızda sizlerle C# ile Xml ortak yapımı bir proje yapacağız. Bu web projemizde Xml dosyasını bir database gibi kullanarak kayıt yapacağız, kayıt okuyup, sileceğiz.

Öncelikle resimdeki gibi  4 TextBox , 4 buton, 1 Listbox dan oluşan formu tasarlıyoruz.

Bu formu tasarladıktan sonra projemizle birlikte kullanacağımız Xml dosyamızı yaratarak içersindeki düğümleri oluşturmamız gerekiyor.

Bu xml dosyası bizim veritabanımız olacak.

Genel hazırlıkları tamamladıktan sonra kodlama kısmına geçelim. İlk olarak bilmemiz gereken bir nesnemiz var  XMLDocument  nesnesi bu nesne xml dosyasını  önbellek üzerinde çalışılabilir hale getirerek işimizi kolaylaştırır.Önce bu nesneyi global seviyede tanımlayarak başlayalım.

Bu nesneden sonra yine tüm proje içersinde kullanabilecek bir değişken olan xml dosya yolunu tutacağımız bir string değişken tanımlayarak sayfanın yüklenmesi sırasında bu yolu değişkene atamalıyız.

Dosya değişkenine yolu atadıktan sonra XML dosyamız üzerindeki kayıtları okuyarak Listbox nesnemiz üzerine yazdıracak bir metot yazalım.

XPathDocument : Xpath data modeli kullanılan okuma yöntemlerinde Xml dosyalarından daha hızlı okuma sağlar.

XPathNavigator : Verilerin üzerinde bir izleme oluşturur ve XML belgesi içinde bu izlenecek olanları görüntüler.

XPathNoteIterator:Seçilen düğümler üzerinde bir yineleme sağlar.

Bu işlemi yaptıktan sonra listbox nesnesi üzerine Xml dosyası üzerindeki Ad düğümüne yazılmış kayıtlar tek tek gelecektir.

Bu kadar değil devam edecek

Bilgiyle Kalın…

M.Zeki Osmancık

Merhaba arkadaşlar bir önceki yazımızda sayfamızı bir bütün olarak nasıl  cache leyebileceğimizi gördük . Bu yazımızda ise senaryomuz farklı . Bir e-ticaret sitemizin olduğunu varsayalım ve bu sayfa üzerinde birden fazla alan bulunmakta kategoriler, markalar, yeni ürünler , indirimli ürünler gibi ayrı ayrı ama hepsi veritabanından gelen veriler bulunmakta. Bu sayfamızı bütün olarak cache e koyduğumuzda ürünlerde indirimli ürünler gibi sürekli değişebilirliği bulunan alanlarda aynı cache içersinde bulunacağından değişiklikler kullanıcılara yansımayacaktır. Peki nasıl olacak bu iş ?
Biz sayfamız içersinde değişmeyecek alanlarımızın olduğunu biliyoruz örneğin kategoriler markalar gibi alanlar bunlar kolay kolay değişmez yada güncellenmez. Sayfayı komple cache işlemine almaktansa sadece bu alanların doldurulduğu DataTable nesnesini cache işlemine alsak yani sadece sayfada istediğimiz alanları cache işlemine dahil etsek  süper olmaz mı ? Tıpkı aşağıdaki resimdeki alanlar gibi.

İşte bu işlemide data cache ile yapabiliriz kullanımı OutputCache den biraz farklı ama eminimki seveceksiniz.  Bu işlem için DataTable döndüren bir property  e ihtiyacım olacak bu property içersinde bilgileri alıp cache işlemine dahil edeceğiz.

Property ‘miz hazır artık içersine bir Datable gönderdiğimizde içersinde cache işlemini yaparak tekrar cache lenmiş datatable döndürecek.  Bu property i hazırladıktan sonra işimiz çok kolay sadece en basit olarak datalarımızı veritabanından çekmek kalıyor.

Datamızı çekerken bir noktaya dikkatinizi çekmek istiyorum öncelikle MyData boşmu diye kontrol ettikten sonra bağlantımızı kurup sorgumuzu yollayıp verilerimizi alıyoruz ve Datatable ile karşıladığımız verilerimizi MyData ya atıyoruz. Ardından Repeater nesnemizin DataSource ‘ una MyData yı verdiğimizde cachelenmiş veri nesnemizin veri kaynağı olarak belirleniyor ve belirtilen süre içerisinde  bu veriler diğer alanları etkilemeyecek şekilde cache işlemine dahil edilmiş oluyor. Fakat bu işlemi uyguladığımızda  eğer veritabanında değişiklik olursa ve belirttiğimiz cache süresi bitmeden sayfaya istekte bulunursak görünürde bilgiler hiç güncellenmiyormuş gibi görünecek çünkü MyData içersinde veriyi cache işlemine dahil ederken kullandığımız Cache.NoAbsoluteExpriration deyimi cache süresinde kayma yapar.

Yani cache süremizi 30 dakika olarak düşünürsek ilk sayfa için istekte bulunulduğunda datamız cache lenecek daha sonra 30 dakika hiç istek olmazsa veritabanından yeni verileri çekerek yeni bir cache oluşturacak. Peki ya bu 30 dakika dolmadan 15. Ci dakikada bir istekte bulunulursa o zaman ne oluyor ? o zamanda “sliding” yani kaydirma işlemi yapılarak istekte bulunulduğu dakikaya bir 30 dakika daha ekleyerek cache süresini uzatıyor.  Yani 12:00 da istekte bulunulan sayfada cache yenileme süresi 12:30 oalcaktır fakat 12:15 de  tekrar bir istekte bulunulduğunda cache in yenilenme süresi 12:45 olarak değişecektir.

Bu yöntemden başka yöntemlerde var.  Biz MyData içersine datatable gönderdiğimizde içerdeki işlemler sırasında eğer NoAbsoulateExpiration değilde NoSlidingExpiration kullanırsak bu kez bizim sayfa isteklerimizi dikkate  almadan sadece belirttiğimiz cache süresinin bitmesini bekleyecek ve süre bitiminde cache işlemini yeniler.

Böylelikle sayfamız içersinde belirttiğimiz üzere birden  fazla database ile ilgili bölüm olsada biz sadece Kategoriler bölümünü yada sadece markalar bölümünü Cache işlemine dahil etmiş olacağız bu bilgi için tekrar tekrar DB ye bağlanmak zorunda kalmayacağız.

Umarım yararlı olur. Görüşmek üzere.

Bilgiyle Kalın…
M. Zeki Osmancık

http://izmiradam.net/2010/10/396/

Merhaba Arkadaşlar
Bu yazımda sizlere ASP.Net ile dinamik web siteleri yaparken performansı etkileyecek bir yapıdan bahsetmek istiyorum. Genellikle bu tip web sayfalarında veriler veritabanından çekilir. Bir sayfada, her seferinde veritabanına bağlanmak ve özellikle farklı tablolardan veri çekiyorsak, performansı önemli derecede etkiler .Herseferinde veritabanına gidip farklı tabloları bulup verileri web sayfası üzerine çekmek sayfayı yavaşlatır kullanıcıyı usandırır. Yavaş bir web kullanıcı üzerinde negatif bir etki yaratır. Bunun için ne yapmak gerekiyor peki ?
Sayfalarımızda bulunan verinin güncellenme sıklığına göre belirli bir süre tüm verileri Cache işlemine tabi tutsak ve kullanıcı sayfayı çağırdığında her seferinde veritabanına bağlanmaktansa cache te var olan veriyi göstersek çok daha performanslı olmazmı ? Belirtilen süre bittiğinde ise 1 sefer gidip veritabanından bilgileri alıp tekrar cache içersine doldurduğumuzda tadından yenmez .
Peki sayfamızı Cache dediğimiz yapı içersine almak için ne yapmak gerekiyor ?

Yapmamız gereken sadece aspx sayfamızın ilk satırlarına yukardaki yapı gibi
<%@ OutputCache Duration=”30″ VaryByParam=”none” %> kodunu eklemek olacak böylelikle sayfamız outputcache ile komple cache işlemine tabi olacak ve Duration kısmında belirttiğimiz saniye cinsinden süre kadar cache de kalacak. Sizde bir sayfa üzerine basitçe veritabanından veri çekerek bu işlemi uygulayın ve veritabanını güncelledikten sonra sayfanızıda güncelleyin verdiğiniz Duration süresi boyunca sürekli güncellemeden önceki bilgiler gelecek.Duration süresi bittikten sonra tekrar veritabanına bağlanarak tekrar bir cache yapacaktır. Bunu sizin de yapmanızı istedim çünkü etkisini mutlaka görmelisiniz.

Senaryomuz şu olsun : Diyelimki biraz önce belirttiğim sayfanız üzerine çektiğiniz bilgi ürün kategorileri olsun. Bu kategoriler hangi sıklıkla güncellenir? Ancak yeni bir ürün grubu geldiğinde değilmi ? Buna göre sayfa üzerinde  sürekli veritabanına bağlanıp güncel kategori bilgileri ile dönmesinin bir anlamı olmaz. Bu sayfayı 1  günlük cache işlemine aldığımızda ilk kullanıcı sayfayı açtığında veriler cache atılacak daha sonra tüm gün veritabanına bağlanmayacak SqlServer için ne kadar rahatlatıcı değilmi ?J

Kategorilerin olduğu sayfayı cache e attık çok güzel!  Birde bu kategorilere tıkladığımzda o kategoriye ait olan ürünleri gösteren bir  Ürünler sayfamız olsa ve QueryString ile gelen kategoriID si ne göre ürünleri gösterse ve bu ürünler sayfasınıda Cache atmak istesek aynı işlemi uygulasak ????

Belirttiğimiz süre içersinde hangi kategoriye tıklarsak tıklayalım hep aynı kategoriye ait ürünler görülecektir.

Bu sorunuda <%@ OutputCache Duration=”30″ VaryByParam=”CatID” %>  kodu içersinde belirttiğimiz VarybyParam değeri ile düzenleyebiliyoruz. Bu değer bize cache işleminin hangi parametrelere göre yapılacağını belirttiğimiz bir değer. Buna göre VaryByParam değerine querystring deki kategoriID sini taşıyan parametreyi verirsem kategoriler sayfasında kategorilerden hangisine tıklarsam tıklayayım diğer sayfadaki cache işlemi o kategoriID sine göre düzenlenerek bize farklı kategorilerdeki ürünlerinde görüntülenmesini sağlayacaktır.

Her zaman kategori bilgisini farklı sayfadan göndermeyebiliriz. Bir sayfa içersinde bir dropdownlist içersine listelenmiş kategori bilgileri ilede aynı sayfa üzerinde ilgili ürünleri listelediğimizi varsayarsak. Aynı  yöntemle yapmaya kalkarsak yine sorun çıkacaktır çünkü burada parametre olarak querystring kullanmıyoruz bir kontrol kullanıyoruz. Bu kez ise VaryByParam yerine VaryByControl kullanıyoruz.  <%@ OutputCache Duration=”30″ VaryByControl=”DropDownList1″ %>

Parametrenin hangi değere göre cache işlemine gireceğini değeri nereden alacağını belirtmiş oluyoruz. Böylece aynı sayfa içersinde bulunan controllerin durumuna görede cache işlemini şekillendirmiş oluyoruz.

Gelin biraz işin içine , işin dibine , işin altında yatan koca ayzberge (iceberg)  bakalım

OutputCacheModule ASP.Net içersinde bir HTTP Modul olarak implement olmuştur ve  System.Web.Caching namespace i içersinde yer alır. Bu modül sayfa içersindeki isteklerin yaşam alanı içersinde  gerçekleşecek olan olayları dinler ve ilgili bir olay(event) çalışırsa harekete geçer.HTTPModule  OutputCacheModule’ e ,  ResolveRequestCache ve UpdateRequestCache olayları ile katkıda bulunur.  ResolveRequestCache olayı tetiklendiğinde, modul gelen isteğin sonucunda dönecek olan sayfanın outputcache dahilinde olup olmadığına karar verir. Eğer cache işlemi varsa cache version bilgisi döner,cache bilgisi yoksa sayfa normal render edilir.  Geriye dönen cache bilgisine göre UpdateCacheModule çalışır. Bu modül çalıştığı zaman ise render edilen sayfa cache işlemine alınır.

Aşağıdaki diagram outputcachemodülünün çalışmasıyla ilgili bir fikir verecektir.

Başka yazılarda tekrar görüşmek üzere

Bilgiyle Kalın…
M.Zeki Osmancık

http://izmiradam.net/2010/10/asp-net-output-cache/