jQuery Ajax ile HTML Tablo Doldurmak

Merhaba arkadaşlar,

Bugünkü yazımda, modern MVC Web projelerinde sıklıkla kullanılan jQuery Ajax ile HTML tablo oluşturma işlemini nasıl gerçekleştirebileceğinizi paylaşmak istiyorum.
Daha sonra dilerseniz ASP.NET Projelerinize’de bu örneği ufak tefek değişiklikler ile uygulayabilirsiniz.

İlk olarak senaryomuzdan bahsedeyim, ardından adım adım gerçekleştirelim.

Bu örnek sonunda site ziyaretçimiz, ekranında göreceği butona tıklandığında database’de yer alan üyeleri UserTypeId parametresine göre tablonun içerisinde görecek.

1) Öncelikle dataları getireceğimiz butonu ekliyor ve ardından butonumuzun Id’sini “btnLoadUserData” olarak tanımlıyoruz.

2) Dataların gösterileceği div’i sayfamıza ekliyoruz.

3) Controller tarafında ise yapımız şu şekildedir.
İşlemleri gerçekleşeceği controller’ın adı: UserController

4) _userListPartial adında, yeni bir Partial View oluşturuyoruz. Burada dikkat etmeniz gereken, Partial View’daki modelimiz, UserController‘daki GetMembers ActionResult’ından dönen model ile aynı olmalıdır.

5) Butona tıklandıktan sonra ne olacak peki ? Ajax Get ile UserContoller‘ın içinde yer alan GetMembers metodumuzu UserTypeId parametresini gönderiyoruz. GetMembers metodu bize liste dönderecektir. (İster liste, ister Dto döndürebilirsiniz. Bu yazımızda basit bir örnek üzerinden gideceğimiz için şimdilik liste göndermemiz, aklı karışan arkadaşlar için daha faydalı olacaktır. 🙂 )

The End… Hepsi bu kadar arkadaşlar 🙂

Paylaştığım örnek kodları ve işleyişi, kendi iş akışınıza uyarlayabilir, kolaylıkla projelerinizde kullanabilirsiniz.

Umarım jQuery Ajax ile Tablo Doldurma konusunda sorun yaşayan arkadaşlarımıza kolaylık sağlar. Bir sonraki yazımda görüşmek üzere, sağlıcakla kalın 🙂

Bootstrap dropdown-toggle Menü Başlığına Link Ekleme

Merhaba arkadaşlar,

Bugünkü yazımda, Bootstrap’da “dropdown-toggle” class’ına sahip menü başlığına nasıl link ekleyebilirsiniz bu konuyu paylaşacağım.

Genellikle bootstrap kullanan arkadaşlar bu senaryo ile ilgili sıklıkla karşılaşmışlardır. Yine de paylaşmakta fayda olacağını düşünüyorum, umarım ilk defa karşılaşacak arkadaşlar için güzel bir kaynak olur 🙂

Senaryomuz
Bootstrap’da header menümüz içinde çeşitli başlıklarımız var. Anasayfa, Hakkımızda, Ürünler, Referanslar, vs…

Ürünler menü başlığımızın altında ise sıralı olarak ürün başlıklarımız olsun.

Malum, alt menülere link vermede herhangi bir sorun yok 🙂

Peki ya Ürünler dropdown menü başlığına link vermek istersek nasıl yapacağız ?

Menü yapısına göre ÜRÜNLER başlığına aşağıdaki sadece href=”Urunler”… tag’ı ekleseniz malesef başarılı olamayacaksınız 🙂

Malesef dropdown-toggle class’ı attribute’nü bir şekilde eziyor.

Bu nedenle bootstrap dropdown-toogle menüsü başlığına link vermek için aşağıda yer alan jQuery kodunu tag’inizden hemen önce kullanmalısınız.

jQuery Cookie Kullanımı

Merhaba arkadaşlar,

Peşpeşe yıllık izinlerin kullanıldığı şu günlerde, yine bir projede kullanmak üzere olduğum jQuery Cookie özelliğini sizinle paylaşmak istedim. İnternet aleminde bir çok örneklerine ulaşabilirsiniz. Dünyayı yeniden keşfetmiyoruz ama blog’umun amacına uygun elimizin altında temiz örnekleri ile kendime aldığım notları, siz değerli takipçilerim ile de paylaşmak istiyorum.

Bu sefer konumuz jQuery Cookie (jQuery Çerez). Cookie nedir gibisinden uzun uzadıya bir şeyler yazmak yerine hemen örnek bir senaryoya giriş yapalım. Amacım giriş sayfasında yer alan jQuery Popup’ın kullanıcıya bir defa gösterip, belirli bir süre ardından (expire süresi kadar) gösterilmemesi.

Hemen aşağıda göreceğiniz üzere en basitinden bir popup metodumuz var. Örnek olarak 7 günlük bir kontrol koydum.

Umarım faydalı olmuştur, bir sonraki yazımda görüşmek üzere

Dip not
7 gün = 1000 * 60 * 60 * 24 * 7 milisaniye bazında hesaplayabiliriz.

Anonymous Function Error: $ is not defined hatasının nedeni ve çözümü

Merhabalar,

jQuery kullanan methodlarınızda Anonymous Function Error: $ is not defined hatası ile karşılaşabilirsiniz.

Bu sorunun nedeni; jQuery kütüphanesi yüklenmeden önce jQuery kullanan bu metodu çağırmış olmanızdır.

Çözümü ise çok basittir. En güncel jQuery kütüphanenizi projenize referans gösterip, daha sonra hata aldığınız metodu çağırırsanız herhangi bir hata almazsınız.

Bulunamayan resim yerine Javascript ile default resim atamak.

Merhabalar,

Bazı senaryolarda tag’ına gönderdiğimiz resimlerde sorun çıkabilir. (dosya yolu, dosya adı,vs.. bulunamayabilir) Bu durumlarda kullanıcılara boş tag’ı göstermek yerine aşağıdaki kod’u kullanarak kendinize göre yedek bir görsel seçip projede gösterebilirsiniz.

1. Yol – Direk tag’ı içerisine yazılabilir.

2. Yol – Javascript fonksiyonu olarak yazılabilir.

tag’ı içine bu kısmı;

tag’ı içine aşağıdaki kod’u eklemeniz yeterlidir.