AjaxOptions Nesnesine Animasyon Ekleme
Merhaba,
Genellikle Asp.NET MVC mimarisinde Ajax işlemleri için kullanılan AjaxOptions nesnesi üzerinde nasıl animasyon işlemleri gerçekleştirileceğine değineceğiz.
Hemen konuya girersek eğer aşağıdaki yapılanma üzerinden örneklendirme yapacağız.
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
</head>
<body>
@Ajax.ActionLink("Ajax Link", "TarihGetir", "Home", new AjaxOptions { UpdateTargetId = "Alan", HttpMethod = "POST" })
<div id="Alan"></div>
</body>
</html>
[HttpPost]
public string TarihGetir()
{
return DateTime.Now.ToString();
}
Şuana kadar yapılan işlemlerde linke tıklandığı vakit “Alan” idli dive o anın tarih bilgi getirilecektir. İşte bu işlem sürecinde olaya animasyon katmak istiyorsak eğer AjaxOptions nesnesinin OnSuccess propertysi oldukça işimize yaramaktadır.
@Ajax.ActionLink("Ajax Link", "TarihGetir", "Home", new AjaxOptions { UpdateTargetId = "Alan", OnSuccess = "Islemler", HttpMethod = "POST" })
<script type="text/javascript">
function Islemler()
{
$("#Alan").fadeOut(500, function ()
{
$("#Alan").fadeIn(500);
});
}
</script>
OnSuccess propertysi, eğer ajax işlemlerinde bir problem yoksa ve sonuç başarılıysa tetiklenmekte ve bu propertye bağlanan fonksiyon işlem neticesinde çalıştırılmaktadır. Ee haliyle bizde ilgili alanlara istediğimiz animasyonu uygulayabilmekte ve işlemimize görsellik katabilmekteyiz.
Sonraki yazılarımda görüşmek üzere…
Şimdilik hoşçakalın…
İyi çalışmalar…
Teşekkürler