Ajax ile daha fazla kayıt göster olayı (Load More Data)

Yine kullanımını ilk olarak Facebook ve Twitter’ dan gördüğümüz bu olayın temel mantığını bildiğimiz sayfalama oluşturuyor. Neden bu şekilde bir sayfalama kullanmak gerekiyor isterseniz bunlara bir bakalım.

  1. Sayfa komple yenilenmeyeceğinden daha işlevsel. Örneğin; kullanıcı video izlerken altında ki yorumları sayfa sayfa dolaşmak isterse, video yarıda kesilmeyecektir.
  2. Sayfanın sadece ilgili yerini, ilgili kayıtlar kadar güncelleyeceğimizden daha performanslı. Bu performans sunucu tarafında; daha az sistem kaynağı tüketimi, kullanıcı tarafında ise; sayfanın yüklenme süresi olarak gözlenebilir. Özetlersek sunucudan yapılan isteği minimize etmiş oluyoruz.

Çektiğim videoların birinde dile getirdiğim bir konu vardı, yukarıda ki maddeleri görünce yazılı olarak da eklemek istedim. Anlık çok fazla kullanıcıya, çok fazla isteğe cevap verme durumunda olan siteler ajaxı bizim kara kaşımıza yada şekilli olsun afilli olsun diye kullanmıyor. Örneğin Facebook her işlemde sayfayı yeniden yüklemeye kalkarsa altından kalkılamaz bir yükle karşı karşıya kalır. Anlık Facebook’ a yazılan yorum, mesaj yada benzeri girdileri düşündüğümüzde ajaxın hava yastığı görevi gördüğünü hayal etmek güç olmasa gerek. Özetlemek gerekirse, ajax yaklaşımı şekilden ibaret değildir ;) Konumuza geri dönelim.

Okumaya devam et Ajax ile daha fazla kayıt göster olayı (Load More Data)

jQuery ile Laz İşi Ajax Push

Özellikle Friendfeed, Twitter, FaceBook gibi sosyal ağlarda sayfa yenilenmeden verilerin güncellendiğini biliyoruz. Bu tür bir durumu gerçekleştirmek için akla ilk gelen yöntem ajax ile verinin bulunduğu yeri belirli zaman aralıklarında yenilemek geliyor, fakat veri trafiğinin çok üst düzey olduğu bu sistemlerde sürekli yenileme yapmak aşırı kaynak tüketimine hatta sistemin durmasına sebep olur. Bu işi şüphesiz en iyi yapan site FriendFeed, o kadar iyi yaptılar ki FaceBook bu siteyi ve geliştiricilerini satın aldı :) Neyse oralara daha fazla girmeden konumuza dönelim.

Okumaya devam et jQuery ile Laz İşi Ajax Push

Mvc projesinde jQuery Ajax Kullanımı – Video

Mvc projemizde jQuery ajaxı kullanarak, bir içeriğin altına yorum ekleme ve silme işlemini gerçekleştireceğiz. Bu işlemin bize kazandırdıklarını, mvc ile uygulama geliştirmenin bize kattıklarınıda anlamaya çalışacağız. Umarım faydalı olur.

Videoyu daha kaliteli izlemek için buradan indirebilirsiniz.

Projeyi buradan, videoyu buradan indirebilirsiniz.

jQuery Template

Template kelimesini görünce akla hemen sitenin komple arayüzü geliyor fakat bu template tam olarak o template değil. Özetlemek gerekirse jSon veriyi istediğimiz kalıpta göstermemize olanak sağlayan ve html çıktısında kod tekrarını ortadan kaldıran bir yapı. Benide en çok kod tekrarını ortadan kaldırması cezbetti. Ne demek bu ? Örneğin; kod tarafında bir döngüyle ekrana 20 satır kayıt basıyoruz ve bu 20 satır kayıt için her seferinde div ul li gibi etiketlerle biçimlendirdiğimizden 20*html etiketi oluyor. Eklentinin ana sayfasına buradan ulaşabilirsiniz.

. Okumaya devam et jQuery Template

Aynı kullanıcı adı daha önceden kullanılmışmı doğrulaması.

Bir kullanıcı kayıt formumuz varsa, önceden kaydedilmiş kullanıcıyı tekrardan
kaydetmemek için bir kontrol yapıp, yeni üye olacak kullanıcıya bu kullanıcı adı
kullanımda gibisinden bir hata verdirmemiz gerekir. Çünkü aynı kullanıcı adından
2 veya daha fazla olursa karışıklıklar meydana gelir ve bunu kimse istemez.
Mantığımız çok basit, yeni yazılan kullanıcı adını eski kayıtlar içerisinden
kontrol edip eğer varsa uyarı veriyor yoksa kayıt işlemini tamamlıyoruz. Bunu
tek bir sql cümlesinde çözmemizde mümkün fakat yeni başlayan arkadaşların olayın
mantığını anlaması açısından c# da kod yazarak bu sorunu çözeceğiz.

Düzenleme
Kullanıcı adını yazıp diğer textboxa geçtiğiniz anda kontrolü yapıp, kullanıcı adı yanına anında müsaitmi değilmi bilgisini yazdırıyoruz. Burada textboxın ontextchanged özelliğinden faydalanıyoruz. Eğer işlem gerçekleştirilirken sayfanın postBack olmasını istemiyorsanız formu UpdatePanel içine alarak isteği gerçekleştirebilirsiniz.

[/html]
SqlConnection conn = new SqlConnection(veritabani.baglanti());//bağlantı cümleniz burada olacak.
protected void Button1_Click(object sender, EventArgs e)
{
if (!kontrol(kullaniciadi.Text)) { //False ise, yani böyle bir kullanıcı yoksa ekleme işlemini yapıyoruz.
SqlCommand sql = new SqlCommand(“insert into kullanicilar (kullaniciadi,sifre,telefon) values (‘”+kullaniciadi.Text+”‘,'”+sifre.Text+”‘,'”+telefon.Text+”‘)”, conn);
conn.Open();
sql.ExecuteReader();
conn.Close();
sql.Dispose();
kullaniciadi.Text = null;
sifre.Text = null;
telefon.Text = null;
mesaj.Text = “Kayıt başarıyla yapıldı !”;
}
else
{
mesaj.Text = “Bu kullanıcı adı kullanımda !”;
}
}

private bool kontrol(string gelenkullanici) {
bool varmisinYokmusun;
SqlCommand sql = new SqlCommand(“Select * from Kullanicilar where kullaniciadi='”+gelenkullanici+”‘”, conn);
conn.Open();
SqlDataReader dr = sql.ExecuteReader();
//eğer kayıt varsa True, yoksa False döndürüyoruz.
varmisinYokmusun = dr.HasRows;
conn.Close();
dr = null;
return varmisinYokmusun;
}

protected void kullaniciadi_TextChanged(object sender, EventArgs e)
{
if (kontrol(kullaniciadi.Text))
{
durum.Text = “Bu kullanıcı adı kullanımda !“;
}
else
{
durum.Text = “Bu kullanıcı adı müsait !“;
}
}
[/html]

		<table border="1" width="100%">
	        <tr>
		        <td>kullanıcı adı</td>
		        <td>
                    <asp:TextBox AutoCompleteType="Disabled" ID="kullaniciadi" runat="server" ontextchanged="kullaniciadi_TextChanged" AutoPostBack="true"></asp:TextBox>
                    <asp:Label runat="server" ID="durum"></asp:Label>    
                </td>
	        </tr>
	        <tr>
		        <td>şifre</td>
		        <td>
                    <asp:TextBox ID="sifre" runat="server"></asp:TextBox></td>
	        </tr>
	        <tr>
		        <td>telefon</td>
		        <td>
                    <asp:TextBox ID="telefon" runat="server"></asp:TextBox></td>
	        </tr>
	        <tr>
		        <td><asp:Label runat="server" ID="mesaj" ForeColor="Red"></asp:Label></td>
		        <td>
                    <asp:Button ID="Button1" runat="server" Text="Ekle !" onclick="Button1_Click" /></td>
	        </tr>	        
        </table>

Çalışan örneğe

buradan
ulaşabilirsiniz.
Bu yazıyı aldığım bir eposta üzerine yazdım, umarım faydalı olmuştur. Herkese iyi çalışmalar.

Ajax Scriptler Adres Listesi..

Öncelikle Ajax nedir ondan biraz bahsedelim. Kabaca ajax; sayfa yenilenmeden sunucu tarafında işlem yapmamızı sağlayan bir kodlama tekniği. Yani bir linke tıklıyorsunuz veya bir form dolduruyorsunuz farklı bir sayfaya gitmeden işlemler oracıkta gerçekleşiyor. Bu adresten detayına bakabilirsiniz http://tr.wikipedia.org/wiki/AJAX_(programlama) Web 2.0 denildiğinde akla ilk gelen özellik Ajax kullanılarak yapılmış atraksiyonlar geliyor. Eğer sizde benim gibi asp ile kodlama yapıyorsanız, veritabanı işlemlerinin neredeyse çoğunun php ile verildiğini göreceksiniz. Kendimce 3-5 scripti asp ye çevirdim. Yakın gelecekte onları sizlerle paylaşacağım. Buyrun alttaki scriptleri inceleyin..

http://www.ajaxrain.com/
http://www.hotajax.org/
http://www.ajaxrain.com/
http://ajax-tr.com/
http://www.ajaxdaddy.com/
http://ajax-tutorials.com/
http://miniajax.com/
http://www.crackajax.net/
http://freeajaxscripts.net/
http://www.funkyajax.com/
http://www.ajaxonomy.com/
http://www.bestajaxscripts.com/
http://www.ajaxcss.com/
http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html
http://www.noupe.com/ajax/50-amazing-jquery-examples-part1.html
http://www.smashingmagazine.com/2008/09/11/75-really-useful-javascript-techniques/
http://www.smashingmagazine.com/2007/06/20/ajax-javascript-solutions-for-professional-coding/
http://speckyboy.com/2008/04/09/41-of-the-best-mootools-ajax-example-downloads/
http://webdeveloper.econsultant.com/ajax-demos-examples-code-samples/
http://designsadvice.com/ajax/30-of-the-best-ajax-tutorials

Ajax Yükleniyor Animasyonları
http://ajaxload.info/
http://www.webscriptlab.com/
http://mentalized.net/activity-indicators/
http://www.ajax.su/ajax_activity_indicators.html