Kişiselleştirilebilir LightBox üretimi 2 - Ajax işlemleri
Tarih 23 Ocak 2010 Cumartesi | Etiket(ler) jQuery, JavaScript, Css, Ajax | Yorumlar 4 yorum
Bu yazıyı okumadan önce bir önceki yazımda (
Kişiselleştirilebilir LightBox üretimi) bahsettiğim konuya göz atmanızı öneririm. Çünkü genel şablonumuzu ona göre oluşturacağız.
Şimdi bu pencerelerin içinde nasıl Ajax çağrısı yapabileceğimizi incelemeye başlayalım. Bir önceki örnekten yola çıkarsak penceremizin genislik,uzunluk,baslik ve icerik adlarında 4 parametre aldığını hatırlıyoruz. icerik isimli parametreyi, çağıracağımız sayfanın adı olarak değiştirip ufak bir modifikasyonla ajax çağrısı yapalım.
Bu sefer bize 1 adet yükleniyor imajı ve ajax ile çağırılacak bir sayfa gerekecek (Bu server side bir dosya olabilir). Bunun için aşağıdaki imajı ve kodları kullanabilirsiniz.
Yükleniyor imajımız :
Ajax ile çağıracağımız sayfa :
<html>
<head>
<title></title>
</head>
<body>
bu sayfa ajax isteği sonucunda gönderilmiştir.
</body>
</html>
Eski
pencereGoster() javascript fonksiyonumuzu şu şekilde değiştirelim :
var pencereAcikmi = false;
function pencereGoster(genislik,uzunluk,baslik,sayfa) {
var apSec = $("#pencere");
if(pencereAcikmi == false) {
$("#karart").css("display","block");
var winH = $(window).height();
var winW = $(window).width();
$("#pencerebasliksol").html(baslik);
$("#pencereicerik").html("<div style='text-align: center;'><br /><br /><img src='ajaxLoading.gif' width='220' height='19'></div>");
$.ajax({
type: "GET",
url: sayfa,
cache: false,
success: function(msg){
$("#pencereicerik").html( msg );
}
});
apSec.css("width",genislik);
apSec.css("height",uzunluk);
apSec.css('top', winH/2-apSec.height()/2);
apSec.css('left', winW/2-apSec.width()/2);
pencereAcikmi = true;
}
else {
pencereAcikmi = false;
}
apSec.css("display","block");
}
pencereGoster() fonksiyonumuz yine 4 parametre alıyor. Fakat bu sefer son parametremiz değişik. Bunlar
genislik, uzunluk, baslik ve
sayfa. Tek değişen
sayfa parametremiz. Bu da çağıracağımız sayfayı temsil ediyor.
Herşey bittiğinde pencere açma fonksiyonumuzu artık şu şekilde çağırıyoruz.
<a href="javascript:pencereGoster(350,100,'Penceremizin başlığı','ajaxSayfa.html');">Pencere aç</a>
Bunları uygulamak için yazının başında söylediğim gibi
şu sayfadaki genel şablona ihtiyacınız olacak.
Bittiğinde şöyle gözükecek.
Daha önce de söylediğim gibi siz kendi tasarımınıza göre özelleştirip daha güzel bir görüntüye dönüştürebilirsiniz fakat bu haliyle de güzel görünüyor.
Penceremizin çalışan halini buradan indirebilirsiniz.Tarih 14 Ocak 2010 Perşembe | Etiket(ler) Ajax, JavaScript, jQuery, Asp.Net | Yorumlar 2 yorum
Yeni bir yazıyla yine birlikteyiz. Bu sefer başlıktan anlaşılacağı gibi Asp.Net ve jQuery Ajax ile XML dosyalarını nasıl okuyacağımızı anlatmaya çalışacağım. Aslında bu blogda projelerde kullanmamız gereken ve faydalı olduğuna inandığım bilgileri paylaşmaya çalışıyorum. Gerçek hayatta deneyimler ile kazanılmış ve zaman ayrılıp araştırılıp sonuca ulaşılmış çözümler her zaman daha sonuç odaklı olur diye düşünüyorum. Teorik olan bilgi uygulanmadan tecrübe edilmez mottosuyla yazımıza başlayalım.
Okumamız gereken XML dosyasını ilk etapta generic handler olarak oluşturacak, arkasından bu datayı jquery ile dinamik olarak Asp.Net formu üzerinden ajax ile okuyacağız.
jQuery'i indirip projenize ekleyin ve aşağıdaki şekilde bir generic handler (.ashx) oluşturun.
Bu datayı kişiselleştirebilir, session veya cookie değerlerine göre şekillendirebilir, kullanıcılarınıza özel çözümler üretebilirsiniz. Ben örnek olması amacıyla şöyle bir veri oluşturdum.
Verileri sağlayan Handler.ashx dosyamız.
Imports System
Imports System.Web
Imports System.Xml
Public Class Handler : Implements IhttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
context.Response.ContentType = "text/xml"
Dim xmlYazici As New XmlTextWriter(context.Response.OutputStream, Encoding.UTF8)
xmlYazici.Formatting = Formatting.Indented
xmlYazici.WriteStartDocument()
xmlYazici.WriteStartElement("Sonuclar")
xmlYazici.WriteElementString("AdiSoyadi", "Cenk SARI")
xmlYazici.WriteElementString("KullaniciID", "13")
xmlYazici.WriteElementString("Sonuc", "Giriş işlemi başarıyla sonuçlandı")
xmlYazici.WriteEndElement()
xmlYazici.WriteEndDocument()
xmlYazici.Flush()
xmlYazici.Close()
End Sub
Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property
End Class
Gördüğünüz gibi 3 adet veri üretiyoruz. AdıSoyadı, Kullanıcı ID ve Sonuç. Şimdi dosyayı okuyacağımız javascript fonksiyonumuza gelelim.
function xmlParse(gidecek) {
$.ajax({
url: gidecek,
type: 'GET',
dataType: 'xml',
cache: false,
success: function(xml){
$(xml).find('Sonuclar').each(function(){
var AdiSoyadi = $(this).find('AdiSoyadi').text();
var KullaniciID = $(this).find('KullaniciID').text();
var Sonuc = $(this).find('Sonuc').text();
$('#adi').html(AdiSoyadi);
$('#kid').html(KullaniciID);
$('#son').html(Sonuc);
});
},
error: function(){
$('#son').html('Sonuçlar alınırken bir hata oluştu!');
}
});
}
Sonuçları basacağımız Default.aspx sayfamız
<form id="form1" runat="server">
<a href="javascript:void(0);" onclick="xmlParse('Handler.ashx');">XML al ve sonucu bas</a>
<br />
<h1>Sonuçlar</h1>
<div id="sonuc">
<div id="adi"></div>
<div id="kid"></div>
<div id="son"></div>
</div>
</form>
Siz isterseniz bu handler'a veri post edebilir, session ve cookie gibi yardımcı elemanlar dışında sonuçları girilen veriye göre de şekillendirebilirsiniz.
Projenin çalışan halini buradan indirebilirsinizTarih 12 Kasım 2009 Perşembe | Etiket(ler) Ajax, JavaScript | Yorumlar 0 yorum
Web programcılarının kullanımına sunulan ve her geçen gün bir yenisi doğan javascript kütüphanelerini eminim birçoğumuz kullanıyoruz ve elimiz ayağımız olmuş durumdalar. Bunlara örnek vermek gerekirse jQuery, prototype, script.aculo.us, mootools vs. sektörde başı çeker durumdalar. Şahsen projelerimde jQuery'i tercih etmekteyim. Bu kütüphaneler hem client side kod yazma zamanını minimuma indirmiş, sahip oldukları geniş fonksiyonlar sayesinde satırlarca kod yazma devrini tarihe gömmüş, tarayıcı farklılıklarından kaynaklanan problemler ile uğraşmayı bitirmiş, ajax ve animasyon özellikleri sayesinde daha şık web siteleri oluşturmaya olanak sağlamış ve tabii ki web programcılarına büyük kolaylıklar sağlamıştır. Projelerimize ilk eklediğimiz referanslardan biri belki de bu kütüphaneler olmaya başlamıştır. Öyle ki jQuery Microsoft tarafından kabul görüp asp.net MVC projelerinde dahili olarak gelmektedir.
Bir web programcısı için optimize kod kelimeleri tabii ki pek çok şey ifade etmektedir. Oluşturduğumuz projenin hem server taraflı hemde istemci taraflı olarak hızlı ve stabil çalışması bazı durumlarda hayati önem taşımaktadır. Bu aşamada CDN'den bahsederken server tarafından daha çok istemci tarafına göz atacağız. Pek çok kütüphanenin minimize edilmiş sürümleri olsa da kendi server’ımız üzerinde çağırdığımızda belirli bir bant genişliği harcamaktadır.
CDN – Content Delivery Network kavramı google ve microsoft başta olmak üzere web üzerinde araştırılınca örneklerine rastlanabilecek bazı kaynaklarla hayatımıza girmiştir. Peki nedir bu Content Delivery Network ? İçerik dağıtım ağı olarak Türkçe'ye çevirebileceğimiz bu cümle aslında büyük çaplı web uygulamalarında aynı zamanda küçük maliyetli web sitelerinde (bant genişliği sınırı olan) hem zaman hemde mali olarak kazanım sağlayacak ağlardır.
Bu kütüphananelerden en yaygın olarak kullanılanları kendi sunucularında barındıran google ve microsoft gibi büyük servis sağlayıcılar, bir nevi hosting görevi görmektedirler. Bu sayede hem bu CDN 'i kullanan bir siteyi daha önceden ziyaret eden bir kullanıcının tarayıcısı dosyaları hali hazırda önbelleğe attığı için yeniden indirme zahmetine girip sitenizin bandwidth'ini kullanmayacak, hem de bu .js dosyasını indirme zamanını minimuma indirerek büyük projelerde hatırı sayılır bir tasarruf sağlayacaktır. jQuery'nin minified versiyonunun 55 KB boyutlarında olduğunu düşünürsek tahmini olarak 100 kullanıcıda 5,5 MB 1000 kullanıcıda 55 MB gibi bant genişliği tasarrufuna gitmiş olacağız. Aynı zamanda bu kütüphanelerin yeni sürümleri çıktığında otomatik olarak sitemize dahil edilmiş olacak adresler de mevcut. Sözü fazla uzatmadan adresleri vereyim
jQuery'i Google CDN'den kullanmak için :
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
Microsoft CDN den kullanmak için :
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js">
</script>
Projelerinize dahil edebileceğiniz kütüphanelerin listesi için :
http://code.google.com/intl/tr/apis/ajaxlibs/documentation/
adresini inceleyebilirsiniz.
Tarih 19 Ekim 2009 Pazartesi | Etiket(ler) Ajax, jQuery, Asp.Net | Yorumlar 0 yorum
Bu yazımda
jQuery kütüphanesini kullanarak form verilerini nasıl başka bir sayfaya göndereceğimizi anlatmaya çalışacağım. jQuery ve bu tip kütüphaneler kısaca kod yazarken geçirdiğimiz zamanı minimuma indirmek için geliştirilmiş, tarayıcı farklılıkları nedeni ile birbirinden değişik, aynı işi yapan kod yazma derdini tarihe gömmüş kullanışlı JavaScript kütüphaneleridir. Daha önceki zamanlarda prototype.js ve script.aculo.us u tercih etmeme rağmen jQuery çok daha geniş kapsamlı ve kullanışlı olduğu için tercihimi bu yönde değiştirmeme neden oldu. Lafı uzatmadan örneğimize geçelim.
Bu proje için Form.aspx ve GelenVeriyiAl.aspx adında iki sayfa oluşturuyoruz. Formumuzda adi ve soyadi adinda iki adet textbox olduğunu varsayıyorum. Formdan gelen verilerimizi sayfaya post eden JavaScript kodumuz şöyle
function FormGonder(){
var formAl = $('#veriGonderForm').serialize() ;
$('#sonucdiv').html('Form gönderiliyor. Lütfen bekleyiniz.');
$.ajax({
type: "POST",
url: "GelenVeriyiAl.aspx",
data: formAl,
success: function(gelen){
if (gelen=="tamam")
{
$('#sonucdiv').html("Veriler başarıyla alındı.");
}
else
{
$('#sonucdiv').html( gelen );
}
}
});
}
Kodu kısaca açıklamak gerekirse #veriGonderForm id değerindeki formumuzun içindeki elemanları alıp uygun hale getiriyoruz ve #sonucdiv id değerindeki div in içine Form gönderiliyor. Lütfen bekleyiniz. yazdırıyoruz. Formdan gelen sonuc "tamam"sa #sonucdiv 'e Veriler başarıyla alındı yazdırıyoruz. Eğer gelen sonuç "tamam"dan farklıysa gelen mesajımızı tekrar #sonucdiv e yazdırıyoruz. (Örn:Hata mesajı)
Şimdi gelen kodları işleyecek GelenVeriyiAl.aspx dosyamızı hazırlayalım. (Siz istediğiniz server side dil ile bu işlemi yapacak bir kod oluşturabilirsiniz)
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim adi As String = Trim(Request.Params.Item("adi"))
Dim soyadi As String = Trim(Request.Params.Item("soyadi"))
Response.Clear()
If adi = "" Then
Response.Write("Adı alanını boş bırakmışsınız!")
ElseIf soyadi = "" Then
Response.Write("Soyadı alanını boş bırakmışsınız!")
Else
Response.Write("tamam")
End If
Response.End()
End Sub
Asp dosyamıza formdan gelen verileri almak için küçük bir kod yazıyoruz. adi veya soyadi alanlarından herhangi biri boş ise hangisi olduğunu yazıyor. Doluysa tamam yazıyor ve işlem tamamlanıyor. Bu verileri alıp veritabanına yazabilir veya herhangi bir şekilde kullanabilirsiniz. Tabii ki güvenliği elden bırakmayın ve gelen verileri bir güvenlik mekanizmasına tabi tutun.
Bu kodu geliştirip gönderim anında jQuery efektleri uygulayabilir, button veya herhangi bir elementi görünmez veya görünür kılabilirsiniz. Herşey hayal gücünüz ile sınırlı...
We're in this together, we share the same skin!