Bu yazımızda Asp.NET MVC mimarisinde Ajax teknolojosini kullanmayı inceleyeceğiz.Önceki yazılarımdan Asp.NET MVC – Ajax başlıklı yazımızda belirttiğimiz gibi gerekli JQuery kütüphaneleri projeye entegre edildikten ve web.config dosyasında ayarlar yapıldıktan sonra Ajax çalışmalarını gerçekleştirebiliriz.
Konuyu fazla uzatmadan direkt AjaxHelper metodlarına sırasıyla değinmek istiyorum.
Ajax.ActionLink
Bu metod sayesinde, bir link oluşturulup, oluşturulan bu link ile bir Ajax metodu tetiklenebilmektedir.Bu metodun temel unsurlarından birisi sayfa yenilenmeden Client tabanlı işlemler gerçekleştirmektir.Tabi ki de tetikleyeceği Ajax metodunu manuel olarak yazmak zorunda değiliz.Bu metod işlevselliği gereği bütün işlemleri kendisi gerçekleştirmektedir.Lakin 12 OverLoad’a sahiptir.Bu sebepten dolayı yerine göre gayet esnek ve kullanışlı bir metoddur.
Örnek olarak aşağıda en çok kullanılan 1. OverLoad’ının prototipini sunuyorum.
@Ajax.ActionLink ( string linkText, string actionName, AjaxOptions ajaxOptions )
Parametrelerden bahsedersek eğer;
- linkText : Oluşturacaği linkin adı.
- actionName : Oluşturduğu link tetiklendiği anda Ajax metodu ile işlemleri gerçekleştireceği Action metodun adı.
- ajaxOptions : Bu parametre farkındaysanız referans tipli bir değişken tipindedir.Yani içine bir AjaxOptions nesnesi almaktadır.Peki AjaxOptions nesnesi nedir?
Bu metodumuzun otomatik olarak oluşturacağı Ajax metodunun özelliklerini taşıyan bir nesnedir.AjaxOptions nesnesinin özelliklerini incelersek eğer UpdateTargetId ve HttpMethod özellikleriyle karşılaşacağız.
UpdateTargetId özelliği, Ajax metodu ile işlemleri gerçekleştireceği Action metottan gelen sonucu, span ya da div gibi HTML nesnelerine yazdırmaktadır.O nesnenin id Attribute’unu vermemiz yeterli olacaktır.
HttpMethod özelliği ise, “Post” ve “Get” olmak üzere iki değer almaktadır.
Şimdi bu metodumuzla ilgili bir örnek yapalım.Örneğimizin içeriği o anki tarih bilgisini Ajax metodlarıyla Client tabanlı olarak getirttirmek olsun.
Controller katmanımızda “Home(Controller).cs” isminde bir Controller sınıfı oluşturalım ve içine ActionResult tipinden olan “Index” isimli ve string tipten olan “TarihGetir” isimli metodlarımızı oluşturalım ve içeriklerini aşağıdaki gibi ayarlayalım.
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public string TarihGetir()
{
return "Tarih : " + DateTime.Now;
}
}
“Index” isimli Action metodumuzun View görüntüsünü oluşturup aşağıdaki kodları yazalım.
@Ajax.ActionLink
(
"Tarih Bilgisini Göster",
"TarihGetir",
new AjaxOptions { UpdateTargetId = "alan", HttpMethod = "POST" }
)
<div id="alan">Tarih Bilgisi Belli Değil</div>
Şimdi buraya kadar neler yaptık bir tartalım.View katmanımızda ki “Index.cshtml” sayfasında “Tarih Bilgisini Göster” isminde linkimizi oluşturuyoruz.Bu linkin Ajax kullanarak Client tabanlı bir şekilde “TarihGetir” isimli Action metodu çalıştırmasını söylüyoruz.”TarihGetir” Action metodundan dönen sonuçları ise AjaxOptions nesnemizde belirttiğimiz “alan” id’sine sahip HTML nesnesine yazdırıyoruz.
Eğer bu şekilde projemizi derleyip çalıştırdığımızda aşağıdaki ekran görüntüsü gelmektedir.
Linke tıklandıktan sonra ekran görüntüsü aşağıdaki gibi olmaktadır.
Ajax.ActionLink metodunu irdelemeyi burada sonlandırıyorum.Bir sonraki sayfamızda Ajax.BeginForm metodunu inceleyeceğiz.
Ajax.BeginForm
Bu metodun Ajax.ActionLink metodundan tek farkı, bir form oluşturmakta ve form içinde bulunan nesnelerdeki verileri Client tabanlı(Ajax ile) Post edebilmektedir.Tabi tetiklenme işlemini bir buton ile gerçekleştirmemiz gerekmektedir.
Ajax.BeginForm metodunun parametreleri Ajax.ActionLink metodunun parametreleriyle benzerlik göstermektedir.
Prototipi aşağıdaki gibidir.
@using (Ajax.BeginForm("string actionName","AjaxOptions ajaxOptions"))
{
}
Burada “actionName” parametresiyle formun tetiklenmesi anında hangi metodunun çalıştırılacağını belirtiyoruz.”ajaxOptions” parametresiyle ise gerekli Ajax ayalarını AjaxOptions nesnesiyle ayarlayabiliyoruz.
Örnek bir kullanım için aşağıdaki kod bloğunu inceleyiniz.
Not : “Home(Controller).cs” isimli Controller sınıfında çalıştığımızı varsayıyorum.
@using (Ajax.BeginForm("Isim", new AjaxOptions() { UpdateTargetId = "IDIsim", HttpMethod = "Post" }))
{
@Html.TextBox("txtIsim", "Adınızı giriniz...")
<input type="submit" value="Göster" />
<div id="IDIsim">TextBox'a yazdığınız isim burada gözükecektir.</div>
}
Yukarıdaki kod bloğunu incelerseniz eğer Ajax.BeginForm metodu ile bir form oluşturuluyor ve bu formun tetiklenmesi durumunda “Isim” isimli bir metodun çalıştırılacağı bildiriliyor.
Şimdi ise Controller sayfamızdaki “Isim” adlı metodumuzu inceleyelim.
public string Isim(string txtIsim)
{
return txtIsim;
}
Projemizi bu şekilde derleyip çalıştırdığımız zaman karşımıza aşağıdaki gibi bir ekran görüntüsü gelmektedir.
Adımızı yazıp butona tıkladığımız zaman Client tabanlı işlem sonucunda aşağıdaki ekran görüntüsü gelmektedir.
Burada önemli bir hususa değinmek istiyorum.
Bu örneğimizde butona tıkladığımız anda Asp.NET WebForms mimarisinde ki gibi bir POST işlemi gerçekleştirilmiştir.Lakin bu işlem neticesinde TextBox’ımız da ki değer silinmemiştir.Ajax ile Client tabanlı bir işlem gerçekleştirildiğinden dolayı sayfa yeniden yüklenmemekte ve bu sebepten dolayı TextBox’da ki değer kalmıştır.Bu durumu ViewState durumuyla karıştırmamak gerekir.
Bu yazımızında sonuna gelmiş olduk.
Bir sonraki yazımda görüşmek üzere..
İyi çalışmalar..