ASP.NET MVC Ajax Dynamic Content

Bu yazımızda sayfa yenilenmeden content kısmını nasıl değiştireceğimizi açıklayacağım. Ajax teknolojisinin nimetlerinden yararlanacağız. Sidebar’dan seçilen linke göre content içeriği dinamik bir şekilde değişecek. Şimdi örnekten başlayalım.

Resimde görüldüğü üzere sol tarafta linkler mevcuttur. Bir javascript bloğu oluşturarak linklerin onclick eventinde gerekli işlemleri yapacağız. Linklerin isiminlerini teker teker ele alacağız. Örneğin address isimli linke tıklanıldığında adrese göre ajax’ın url kısmı değişecektir.

Linklerin yapısı şu şekilde olmalıdır. Onclick eventinde UserInfo adında bir fonksiyon tanımladım ve parametre olarak linkin ismini gönderdim.

Yani linke tıklanıldığında UserInfo adında fonksiyon çalışacaktır.

Şimdi gelelim Javascript ve Ajax yapısına.

Ajax yapısı ise bu şekilde olmalıdır.  Burada anlaşılmayan bir konu olursa lütfen çekinmeden yorum yazarak belirtiniz.

Şimdi her bir link için Partial View oluşturmalısınız. Nitekim her bir linkin contenti partial view olarak gelecektir ve biz bu partial view’leri bir div yardımıyla çağıracağız. Öncelikle controller’da PartialViewResult’ları oluşturmalısınız. Örnek;

ve bu PartialViewResult’dan bir view oluşturmalısınız. Örnek;

Create as a partial view seçeneğini tıklamanız gerekmektedir.

Evet linklerimiz oluşturuldu, javascript ve ajax bloğumuz hazır ve partialview oluşumunuda tamamladık. Şimdi ajax’ın success adlı fonksiyonundan dönen değeri bir div yardımıyla content kısmında göstereceğiz. Örnek;

Bu şekilde yapımızı tamamlamış olduk. Ajax gerçekten inanılmaz faydalı bir nimet. Kim bilir bu yapıyı kullanarak daha neler üretebiliriz. Oluşturduğum yapıda hatalar olabilir, kullanıma uygun olmayabilir ama mantığını anlama açısından uygun bir örnek olduğunu düşünüyorum.

Aklınıza takılan bir soru olursa çekinmeden benimle iletişime geçiniz. Unutmayın hayat paylaşınca güzel ! 🙂

 

Bu yazı Ajax, Asp.net MVC, Bilişim kategorisine gönderilmiş ve , , , , , , ile etiketlenmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Alanı Doldurunuz! *