mehmetduran.com - Paylaşmak Güzeldir...
Jquery ve Ajax ile FaceBox Kullanımı
Geçtiğimiz yoğun dönemde birkaç ödev üzerinde çalışırken hem arkadaşlarımın hem benim ihtiyacım doğrultusunda ajax ve facebox ile ilgili bir uygulamaya ihtiyaç duyduk. Bende bu ihtiyaç doğrutulsunda basit bir uygulama yaparak Ajax ve Facebox kullanımını anlatacağım. Öncelikle yaptığım uygulamada yazarlar ve kitaplar var. Kitapları görüntülerken yazarlar hakkında bilgi almak için kitabın yazarının ismine tıkladığımızda ajax ile yazar bilgilerini çekip, facebox ile kullanıcıya sunuyoruz. Böylece kullanışlı bir uygulama olduğunu düşünüyorum. Ayrıca örnekte veritabanı ilişkileri de mevcut. Bu bakımdan zengin bir uygulama oldu.

Öncelikle veritabanımızın yapısına bakalım.

Jquery ve Ajax ile FaceBox Kullanımı - Veritabanı

Veritabanımızın yapısı böyle. Şimdi ise facebox kutumuza bilgileri getirecek javascript ve webmethod kodlarına bakalım.

Script kodlarımız şu şekilde olacak:

function yazar_al(yazar_id)
{
  $.ajax({
    type: "POST",
    url: "facebox.aspx/yazar_al",
    data: "{yazar_id:"+yazar_id+"}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg){
      jQuery.facebox(msg.d);
    }
  });
}

Webmethod kodlarımız şöyle olacak:

    [System.Web.Services.WebMethod]
    public static string yazar_al(string yazar_id)
    {
      OleDbConnection bg = new OleDbConnection("provider=microsoft.jet.oledb.4.0; data source=" + HttpContext.Current.Server.MapPath("~/deneme.mdb"));
      OleDbCommand komut = new OleDbCommand("select * from yazarlar where yazar_id=@yazar_id", bg);
      komut.Parameters.AddWithValue("@yazar_id", int.Parse(yazar_id));
      bg.Open();
      OleDbDataReader oku = komut.ExecuteReader();
      oku.Read();
      string sonuc = "<b>" + oku["yazar_adi"].ToString() + "</b><br/><br/>" + oku["yazar_hakkinda"].ToString();
      bg.Close();
      return sonuc;
    }

Uygulamanın örnek ekran görüntüsü ise şu şekilde:

Jquery ve Ajax ile FaceBox Kullanımı
Görüldüğü gibi yazarın ismine tıkladığımızda yazar hakkında bilgiyi facebox ile kullanıcıya sunuyoruz. Bu uygulama ile buna benzer birçok uygulama geliştirebiliriz.

Uygulamanın çalışır halini buradan görebilir, örnek projeyi de buradan indirebilirsiniz.
İyi Çalışmalar!
Mehmet Duran 06 Aralık Cumartesi 2008 10 23933 5,0
Ajax Javascript Asp.net Veritabanı jQuery Jquery İndir İnternet Tanıtım JSON
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar XNA Game Studio Creator's Guide (E-Book) Microsoft Yaz Okulu 2009 Ankara Ayağı Sona Erdi C Sharp 3.0 in a Nutshell (E-Book) Asp.net ve Asp.net MVC'de Binary Olarak Dosya (Upload - Download) İşlemleri Gazi Üniversitesi Bilişim ve Kariyer Günleri
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Mehmet ÇOKTAY 03 Ocak Pazar 2010 13:58 #1
Merhaba hocam yine ben.bu uygulamanız güzel.geçenki modalı yaptım ancak flash uygulamarında sayfanın arkasında yer alıyor.facebox ise bizim işimizide görebilecek nitelikte.bu uygulamayı inceledim.ancak sayfa ilk yüklenirken çok önemli bir duyuruyu access veritabanından çekip facebox ta göstermesini istiyoruz.onclik yerini onload olarak değiştirmeme rağmen ve bazı değişiklikler uyarlamama rağmen başaramdım.acaba bize sayfa yüklendirken veritabanından çekmesi için gerekli kodu yollarmısınız.tşkler
Mehmet Duran 03 Ocak Pazar 2010 14:02 #2
Gönderdiğim örnekte istediğin var. Biraz uğraşırsan yaparsın. Benim zamanım kısıtlı ve benim de yapacaklarım var.
erdem 05 Ocak Salı 2010 02:25 #3
selam.Açılan facebox'ta resimde gözüksün istiyorum.yazarlar tablosunda resimler adında bir sütun oluşturdum.WebMethod kısmındaki string sonuc satırına oku["resimler"].ToString() kodunu ekledim fakat açılan faceboxta veritabanından resim yerine text geliyor, sorun nerede acaba?
Mehmet Duran 06 Ocak Çarşamba 2010 05:11 #4
Resim olarak gözükmesi için html tag biçiminde verileri getirmelisin. Aksi halde resmin isim veya dizin bilgileri text olarak gözükür.
erdem 06 Ocak Çarşamba 2010 22:16 #5
img tagını kullandım resim göstermeyi başardım.teşekkürler.
Mehmet 10 Ocak Pazar 2010 22:30 #6
hocam yaptım.sitenizdeki kodlar çok yardımcı oldu.teşekkürler
İsmail Kocacan 16 Nisan Cuma 2010 17:11 #7
Mehmet Kardeşim Şu JQuery Üzerine tanımıyorum.Çok Güzel makaleler yazıyosun.çok beğeniyorum çalışmalarını süpersin yahu daha nediyim işte :)
Mehmet Duran 16 Nisan Cuma 2010 17:15 #8
Güzel yorumun için teşekkür ederim. Umarım faydalı oluyordur.
yunus 15 Haziran Salı 2010 00:27 #9
merhabalar.çalışmalarınızı çok beğeniyorum.Bugün verdiğiniz bir çalışma üzerinde bayağı uğraştım fakat bir türlü çalışrıramadım.. jquery ve css vBulletin sisteminde kullanmak istiyorum bir kaç güzel fikir var aklımda fakat bugünki aksilikten dolayı uğraşmak gelmedi..vbulletine nasıl entegre edebileceğim konusunda biraz bilgi verebilir misniz_? Şimdide teşekkür ederim yardımlarınız için
Mehmet Duran 15 Haziran Salı 2010 00:36 #10
Merhaba. Bu yapı web ortamında her sisteme entegre edilebilir. Öncelikle css, script dosyalarını sisteme ve kullanılacak bölümlere (sayfalara) doğru biçimde eklemek gerekiyor. Daha sonra Ajax ile verilerin elde edileceği kısım kullanılan programlama alt yapısına uygun biçimde uyarlanmalı. Ben Asp.net kullandım, vBulletin ise php ile hazırlanmış bir sistem. Buna göre sadece Ajax verilerinin elde edildiği ve değerlendirildiği kısımları uyarlamak yeterli olacaktır.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Hizmet amaçlı işler başarıya, kar amaçlı olanlar ise başarısızlığa yöneliktir.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009