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.
<a href="javascript:void(null)" onclick="UserInfo(this.name)" name="person">Personal Information</a>
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;
public PartialViewResult UserAddress()
{
return PartialView();
}
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 ! 🙂
