Hazırdan ne kadar kaçarsak yaptığımız işin kontrolüde bir okadar elimizde olur. Son zamanlarda elimden geldiği kadar hazır scriptlere bulaşmıyorum. Sebebide ekleme çıkarmalarda yada kişiselleştirmelerde yaşadığım problemler ve beraberinde çok büyük zaman kayıpları. Bu noktada jQuery dertlere deva oluyor desem sanırım abartmış olmam. Bu yazımda çoğu haber sitesinden aşikâr olduğumuz manşet mekanızmasından yapacağız. Kodları gördüğünüzde jQuery nin bize neler sunduğunu daha iyi anlayacaksınız. Kodlar gayet açık ve net, istediğiniz gibi istediğiniz yerini basitçe değiştirebilir, şekilden şekile sokabilirsiniz. Buyrun size jQuery manşet mekanızması;
Kategori: jQuery
Visual studio jQuery otomatik kod tamamlama (IntelliSense)
Otomatik kod tanımlamayı garipsemeyin çünkü intelliSense kelimesinin Türkçe karşılığını bulamadım :) Kısaca intelliSense şu demek; kodu yazmaya başladığınızda otomatik olarak ilgili kodcuklar listeleyen, aynı zamanda fonksyionların açıklamalarını alacağı parametreleri görebildiğimiz, işimizi hızlandırmaktan başka bir şeye yaramayan bir özellik. Bu işlemi jQuery içinde yapabiliyoruz, yani $(document) noktaya bastığımızda ilgili fonksiyonlar geliyor. Bunun için http://code.jquery.com/jquery-1.2.6-vsdoc.js adresindeki vsdoc dosyasını indiriyoruz. Sonrasında http://docs.jquery.com/Downloading_jQuery#Current_Release adresinden en son jQuery dosyasını indiriyoruz. Yapmamız gereken tek şey indirdiğimiz jquery-1.2.6-vsdoc.js dosyasının adını, indirdiğimiz jQuery dosyası adı -vsdoc şeklinde düzenliyoruz. Garip bir cümle oldu bende farkındayım, resimlerden bakarsak daha iyi anlayabiliriz.
Artık önümüzde jQuery yazmak için hiç bir engel kalmadı. Başka bir yazıda görüşmek üzere..
Asp.Net projelerimizde neden jQuery kullanmalıyız ?
Bilmeyenler için jQuery bir javascript çatısıdır. (framework). Bilidiğiniz üzere web ortamında kullanıcı tarafında yapmamız gereken aksiyonları javascript ile yapabiliyoruz. Web 2.0 ile birlikte kullanıcı tarafındaki özellikler bir hayli arttı ve önem kazandı. Bu olayın şüphesiz öncüleri Facebook ve Google gibi isimler oldu. Hayatımıza giren yeni özelleklerden bazıları şu şekilde; sayfa yeniden yüklenmeden sunucu taraflı işlemler yapabilme (ajax), sekme (tab), aramalarda otomatik tamamlama (auto complete) gibi.. Asp.Net geliştiricilerinin bildiği üzere Ajax Control Kit ile yukarda bahsettiğim işleri çok basit bir şekilde projelerimize uygulayabiliyoruz. Böyle bir imkan varken neden jQuery kullanalım dimi ? Bunun bir çok sebebi bulunuyor, isterseniz bunlara bir göz atalım.
- Esneklik: Ajax control kit ile kalıpların az dışına taşmaya kalktığınızda önümüze öyle engeller çıkarki takla üzerine takla atmak zorunda kalırız. jQuery ile bir satırlık kod ile yapacağınız şeyi satırlarca kod yazarak ancak çözeriz, çoğu zaman çözemeyiz bile.
- Diğer scriptlerle olan çakışmalar: Projeniz bitmek üzeridir ve sizden istenen son bir özelliğin daha eklenmesi istenir. İnterneti didik didik ararsınız ve bu iş için mükemmel bir script bulursunuz. Scripti projenizde çalıştırmaya kalkarsınız fakat bir türlü çalışmaz çünkü control kit ile çakışmıştır. Durupda pirincin taşını ayıklamak çok uzun zaman alır hatta çoğu zaman taşı ayıklayamazsınız bile :) Burda şunu söyleyebilirsiniz, jQuery kullanılan bir sayfaya farklı bir script eklemeye çalıştığımızda da bu durumun olması olasıdır. Evet doğru fakat bu durum ajax control kit kadar sık karşılaşılan bir durum değildir. Ayrıca jQuery kullanıyorsanız sayfanıza çoğu zaman ekstradan bir script ekleme ihtiyacı duymazsınız, ya kendiniz yazarsınız yada yüzlerce eklentiden bir tanesini alır direk kullanır yada isteğinize göre düzenleyebilirsiniz.
- Performans: Siz kullanmasanız bile en basit işler için bile ajax control kit arka planda öyle şeyleri sayfanıza yüklerki performans bu durumdan ciddi anlamda etkilenir. Hatta çoğumuzun başına tarayıcının kitlenmesi gibi durumlar gelmiştir. jQuery ile herşeyin kontrolü bizdedir, biz ne yazarsak o olur, bu yüzden çok daha verimli çalışır.
- Tarayıcı uyumluluğu: Bu web tasarımı ile uğraşan herkesin ortak sıkıntısıdır, zaten tasarımı taracıya uydurmak için çeşitli taklalar atıyoruz birde bunun içine ajax control kit girince işkence kaçınılmaz oluyor. Çoğu zamanda elleriniz kollarınız bağlı hiç bir şey yapamıyorsunuz. jQuery tarafında ise böyle bir derdiniz yok bir kere yazın heryerde çalışsın, mobil cihaz tarayıcılarında bile..
- Kontrol edilebilirlilik: Eğer yapılan iş sizin kontrolünüz dışındaysa koda, ekleme, çıkarma veya düzenleme gibi işlemler çok zordur. Yeni açtığınız projenize jquery.js yi ekledikten sonra dışarıdan hiç bir scripte gerek kalmadan projenizi sonlandırabilirsiniz. Kodunu yazamayacağınız şeyler içinse jquery eklentilerini gönül rahatlığıyla kullanabilirsiniz.
jQuery dünyasına ilk adımı atmak biraz zor gelebilir fakat içine girdiğinizde kullanması ve kodlanması oldukça kolay bir çatı olduğunu göreceksiniz. Yaptığınız işten bir okadar daha zevk alacağınızın garantisinide ben veriyorum. Şimdilik benden bu kadar ilerleyen günlerde tekrar görüşmek üzere, hoşçakalın..
Asp.Net ile jQuery Autocomplete kullanmak
Bilmeyenler için autocomplete nedir onu söyleyeyim, bir textbox’ a kelime girmeye başlıyorsunuz ve o ana kadar girilmiş olan karakterleri veritabanında arayıp alt tarafta açılan listede, ilgili kayıtları kullanıcıya sunan bir sistem. Google buna güzel bir örnek teşkil ediyor. Bu işlem için Ajax Control Toolkit içinde bulunan AutoComplete nesnesiyle de işimizi görebiliyoruz. Fakat ajax control araçlarıyla projemize bir şey eklediğimizde arka planda bir kod ve dosyada beraberinde projemize eklenmiş oluyor, bu durum büyük projelerde problemler çıkartabilir. Hemde zaman zaman tarayıcıdan tarayıcıya antin kuntin problemleride beraberinde getiriyor. Aklıma gelmişken, oldukçada yavaş çalışıyor. Kısacası kullanması basit fakat performansı çok kötü bir yöntem. Uzun zamandır projelerimde jQuery kullanıyorum ve en ufak bir problem dahi yaşamadım. Master sayfama jQuery’ i ekliyorum ve tüm projede istediğim herşeyi rahatlıkla yapabiliyorum. Farklı durumlar içinse bir sürü eklentisi bulunuyor. AutoComplete‘ de bunlardan biri. Eklentinin sayfasına buradan ulaşabilir, demosuna buradan bakabilirsiniz. Anlatacağım örnekte direk veritabanından arama yapacağız. Daha fazla uzatmadan kodlarımıza bakalım. İlk önce gerekli dosyaları indirip, projemize ekliyoruz.
http://jquery.bassistance.de/autocomplete/lib/jquery.js
http://jquery.bassistance.de/autocomplete/jquery.autocomplete.js
http://jquery.bassistance.de/autocomplete/jquery.autocomplete.css
Sonrasında aşşağıdaki gibi kodumuzu yazıyoruz.
Default.aspx sayfamız
<script type="text/javascript">
$(document).ready(function() {
$("input#<%=txtKelime.ClientID %>").autocomplete('Ara.aspx').result(function(event, item) {
$("#<%=txtGizliAlan.ClientID %>").val(item.toString().split(",")[1]);
});
});
</script>
<form runat="server" id="form1">
<asp:textbox id="txtKelime" runat="server" />
<asp:textbox id="txtGizliAlan" runat="server" style="display:none" />
</form>
Yukarıdaki kodda txtGizliAlan olarak gördüğümüz alan, seçtiğimiz kaydın id değerinin saklandığı alanımız. Yani ilgili kaydın id sini veritabanına yazacaksak burayı kullanıyoruz.
Ara.aspx sayfamız
protected void page_load(object sender, EventArgs e) {
string strKelime = Request.QueryString["q"];// burada gelen değeri sql enjeksiyondan korunmak için kontrol etmeyi unutmayın !
DataTable dt = veritabani.DataTableGetir("Select * from tabloAdi where aranacakAlan like '%" + strKelime + "%'");
foreach (DataRow dr in dt.Rows)
{
Response.Write(dr["alanAdi"].ToString() + "|" + dr["id"].ToString() + Environment.NewLine);
}
}
İşte bu kadar kolay ! Artık bizimde bir Autocomplete mekanızmamız var.
jQuery ile anket sonuçları olayı
Bir projem de kullanmak üzere jQuery ile basit bir anket uygulaması yapmıştım. İşlevini gerektiği gibi yerine getiriyordu fakat dedim ki azcık da göze hitap etsin. Aramaya oyuldum ve bu iş için uygun mekanizmayı aramaya başladım fakat bir türlü istediğim gibi bir şey bulamadım. Madem dedim öyle kendim yapayım ve yapmışken de sizlerle aylaşayım. 4-5 satır kodla işi bağladım, çok da hoşuma gitti.
Düzenleme: Şenol Örencik arkadaşımın söylediği gibi bir şey yapmaya çalıştım. Barlar geldikten sonra sonuçlar beliriyor.
jQuery kodları. Olayın tamamı için demo sayfasının kaynak kodlarını görüntüleyebilirsiniz.
<script type="text/javascript">
$(document).ready(
function(){
$("#anket div span").fadeTo('fast',0.1);
$("#anket div").each(function(){
var deger = $(this).text();
$(this).css({width: "0%"}).animate({width: deger}, 3000,
function(){
$("#anket div span").fadeTo(1000,1);
});
});
}
);
</script>
jQuery ile Açılır Menu (Drop Down Menu)
Bazı şeyler hep gözünüzün önündedir fakat aradığınızda bir türlü bulamazsınız, geçenlerde çok aramama rağmen bir türlü istediğim şekilde açılır menü (drop down menu) bulamadım. Dedim madem yok kendim yapmaya çalışayım, çat pat jQuery bilgimle kendimce bir menü yaptım, umarım işinize yarar. Çok basit jQuery ve css kodlarından oluşan bu menünün görüşünü istediğiniz gibi değiştirebilirsiniz. Dosyaların içerisinde .psd dosyası da bulunuyor.
jQuery ile sürükle bırak yaparak sıralama işlemi
Sıralamadan kastım, kategori sıralama olabilir, eklenti sıralama olabilir, yazı sıralama olabilir vb.. Normalde sıralama işlemlerini yapabilmek için epeyce kod yazmaktan ziyade kullanıcının nasıl en rahat şekilde kullanabileceğinin hesabını kitabını sıklıkla yapıyoruz. Sağolsun jQuery‘ nin Ui (kullanıcı arayüzü (user interface)) imdadımıza yetişiyor. Önce sıralama (sortable) fonksiyonunu kullanıyoruz, daha sonra veriyi serileştiriyoruz (serialize) sonrada ajax ile postalıyoruz.Hemen kodlarımıza bakalım. Öncelikle bu iki dosyayı Jquery Ui indirelim ve sayfamıza ekleyelim.Veritabanımızdaki kategoriler tablomuz.
CREATE TABLE [kategoriler] ( [id] int IDENTITY(1, 1) NOT NULL, [kategoriadi] nvarchar(50) NULL, [sira] int NULL, PRIMARY KEY CLUSTERED ([id]) ) ON [PRIMARY] GO
sirala.aspx sayfamızın içeriği
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin-top: 10px;
}
#icerik ul{
margin:0;width:300px
}
#icerik ul li {
list-style: none;
margin: 0 0 4px 0;
padding: 5px;
background-color:#007dd5;
color:#fff;
}
#icerik li:hover{
cursor:move;
}
.yeniyer{border:2px dotted #860101}
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$("#icerik ul").sortable({
placeholder: 'yeniyer',
opacity: 0.6,
cursor: 'move',
update: function() {
var order = $(this).sortable("serialize");
$.post("kaydet.aspx", order);
}
});
});
});
</script>
<div id="icerik">
<ul>
<asp:Literal runat="server" ID="liste"></asp:Literal>
</ul>
</div>
Sirala.aspx.cs sayfamızın içeriği
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
listeDoldur();
}
}
protected void listeDoldur() {
DataTable dt = veritabani.DataTableGetir("select * from kategoriler order by sira asc");
foreach (DataRow dr in dt.Rows)
{
liste.Text += "
<li id="\"sira_"">" + dr["kategoriadi"].ToString() + "</li>
";
}
}
kaydet.aspx.cs sayfamızın içeriği, yani sıralama işlemlerini veritabanına yazan sayfamız.
protected void Page_Load(object sender, EventArgs e)
{
string gelen = Request.Form.ToString().Replace("%5b%5d", "[]").Replace("sira[]=", "");
char[] ayrac = new char[] { '&' };
string[] gelenler = gelen.Split(ayrac);
int i = 1;
foreach (string veri in gelenler)
{
veritabani.guncelle("Update kategoriler set sira='" + i + "' where id=" + veri + " ");
i++;
}
}
Örneğin tamamını indirmek için tıklayın. Çalışan örneğe buradan bakabilirsiniz.
GridView Satırlarını tıklayınca genişletmek (Expand Rows)
Nedenini bilmiyorum ama başlığı seçerken epeyce zorlandım, neyse ki bir tane buldum :) Konumuza dönelim, GridView kontrolünde verileri listeletirken ilgili satırın altında ilişkili diğer kayıtları göstermemiz gerekebiliyor. Bu sayede kullanıcıya çok işlevsel bir listeleme yapabiliyoruz. Bu işlem için genelde kullanılan yöntem; tüm verilerin tümünün çekilip sonra javascript kullanarak göster-gizle şeklinde gösterilmesi. Bu yöntemde ciddi anlamda performans sıkıntısı yaşarız çünkü 40 tane kaydımız olsa ve bu kayıtlara ait 5′ er de alt kayıt olsa ilk seferde toplam 200 kayıt listelemiş oluyoruz. Anlatacağım yöntemde bu işi jQuery Ajax ile birlikte verimli ve efektif bir şekilde çözeceğiz. (Bugün çok değişik bir gün sanırım havalardan kaynaklanıyor, anlatım bozukluğu varsa kusuruma bakmayın) Mekanızmamız iki adet .aspx sayfasından oluşuyor. Birincisi normal kayıtlarımızı listelettiğimiz GridGenislet.aspx diğeri ise üzerine tıklayınca açılacak olan kısmın bilgilerini getiren Genisle.aspx GridGenislet.aspx sayfamızın ilgili kodlarına bakalım. Burada jQuery ile açılıp kapanma işlemi sırasında oluşacak efekt işini ve Genisle.aspx sayfamıza Ajax ile ilgili kayıtların gelmesini sağlayacak fonksiyonumuzu yazıyoruz. Sonrada Tümünü Göster ve Tümünü Gizle olayını ekledim. Sırf jQuery i biraz daha algılayabilmek adına :)
$(document).ready(function(){
$('a#tgizle').click( tumunuGizle );
$('a#tgoster').click( tumunuGoster );
});
function tumunuGizle(){
$('div.genisleyenDiv').slideUp();
}
function tumunuGoster(){
$("div.genisleyenDiv").each(function()
{
goster($(this).attr('id'));
});
}
//can damarımız burdaki fonksyion, genisle.aspx e id bilgisini gönderip sayfamızda gösteriyoruz.
function goster(divId)
{
$('div#'+divId).toggle('slow');
$('div#'+divId).load('Genisle.aspx?Id='+divId);
}
GridGenislet.aspx.cs sayfamızın ilgili kodlarına bakalım.
DataTable dt = veritabani.DataTableGetir("Select top 10 id,baslik,icerik,tarih from yazilar");
GridView1.DataSource = dt;
GridView1.DataBind();
for (int i = 0; i < GridView1.Rows.Count; i++)
{
//burada hersatırın onclick özelliğine goster fonksiyonumuzu atıyoruz ve ilgili id yi yazdırıyoruz.
GridView1.Rows[i].Cells[0].Attributes.Add("onclick", "goster('" + dt.Rows[i][0].ToString() + "')");
}
Genisle.aspx sayfamızda ise gelen id değerini alıp sql cümlemizdeki yerine koyuyor ve listeletiyoruz. Burdaki yöntemde ben GridView üzerine anlatmaya çalışıyorum, mantığı anlarsanız çoğu yerde bu mekanizmayı kullanabilirsiniz.
Sadece dilimin döndüğünce mantığı anlatmaya çalıştım, eğer isteyen olursa çalışır kodları da paylaşabilirim. Çalışan örneği görmek için tıklayın. Zaman problemim nedeniyle css ile süsleyemedim, istendiği taktirde çok şık bir görünüm verilebilir. Herkese güzel günler diliyor ve konuyu burada noktalıyorum.
Sonunda jQuery ile tanışmak nasip oldu
Günümüz web sitelerini yapmak için ne kendi başına html ,ne css, ne dinamik bir programlama dili nede javascript yeterli oluyor. Elden geldiği kadar yenilikleri takip etmek, güncel olmak gerekiyor. Ezelinden beri web sayfalarında hükümdarlığını sürdüren javascript son yıllarda çeşitli kütüphaneler ile kullanım alanlarını ve şekillerini epeyce değiştirdi. jQuery javascript çatısı (framework) sayesinde hem tarayıcılar arasındaki uyumluluk problemlerinden kurtuluyoruz hemde efekt ve ajax nimetlerinden yararlanabiliyoruz. Bundan 1 sene önce Adem abinin bir sohbetimizde, “muhakkak başlamalısın çok kolay ve kullanışlı bir çatı” dediğini dün gibi hatırlıyorum. Zaman problemleri
yüzünden 1 sene üzerine şimdilerde nasip oldu ve Google’ da arama yaptığımda karşıma Eburhan hocamızın yazdığı bir birinden mükemmel makaleler çıktı, kendisine ayrıca teşşekürlerimi sunuyorum. Kendi kendime gün bugündür bu yazılardan da öğrenemezsen artık jQuery hayallerinden vazgeçme zamanıdır dedim ve inceden inceden okumaya başladım. Gerçekten çok basit ve kolay anlaşılır bir yapısı var, az buçuk birşeyler yapmaya başladım bile :) Öğrendikçe sizlerlede paylaşmaya çalışacağım. Oh bee dünya varmış, artık eskisi gibi saatlerce hazır betik (script) arayıp zaman kaybetmeyeğim.