ASP.NET MVC'de JsonResult ve JQuery Yardımıyla AJAX
Bu makalemde sizlere ASP.NET MVC kullanarak Jquery yardımıyla nasıl AJAX işlemi yapılabileceğinden bahsedeceğim. İhtiyacımız olacak olan elementler ise jquery script dosyası ve ASP.NET MVC projesi olacaktır.
Bilindiği üzere AJAX denilen kavram javascript kullanılarak tarayıcı arkaplanında server üzerine bir istek yapmak ve istekten dönen sonucu DOM üzerine yansıtmaktır. Tarayıcı üzerinde yazdığımız javascript kodlarını kısaltmak ve işimizi kolaylaştırmak amacıyla JQuery kütüphanesi geliştirilmiştir. Bizim inceleyeceğimiz nokta ise Jquery’e ASP.NET MVC kullanarak nasıl veri sağlanacağıdır. AJAX işlemlerinde veri transferi için XML veya daha ufak boyutlara sahip ve javascript ile entegrasyonu kolay olan JSON kullanılır. Makalemizde transfer amacıyla JSON kullanılacaktır.
ASP.NET MVC mimarisinde controllerlar client’a gönderilecek olan cevap türünü yönetmekle sorumludurlar. Ancak geriye sadece sayfa çıktıları olarak HTML gönderilebildiğini düşünüyorsanız yanılıyorsunuz. Geri dönüş bilgiler bir string, resim, dosya veya örneğimizde kullanacağımız JSON olabilir. Bütün bu türler için MVC Framework içerisinde ActionResult sınıfından türemiş bazı sınıflar bulunmaktadır ve bu türler cevap gönderme işlemleriyle sorumludurlar. Client’a JSON verisi gönderebilmek için hazırlayacağımız action metodunun geri dönüş türü JsonResult olmalıdır. Herhangi bir nesnenin JSON karşılığını hazırlamak için de temel Controller sınıfından gelen Json() metodu kullanılmalıdır.
Örneğimizde bir dizi içerisinde saklanan isim listesinde arama yapacak ve koşulu sağlayan isimleri JSON formatına göre dizi olarak yollayacağız. Bu amaçla aşağıdaki Controller ve içerisinde de Listele action’ı yazılmıştır.
HomeController.cs :
using System;
using System.Web.Mvc;
namespace Mvc_Ajax.Controllers
{
public class HomeController : Controller
{
//isim önerilerinin getirileceği isim dizisi
string[] isimler = { "Yüce", "Çelikel", "Hakkı", "Nefise", "İrfan", "Sercan" };
public ActionResult Index()
{
return View();
}
public JsonResult Listele(string isim)
{
string[] sonuc = null; //sonuçların yazılacağı dizi
if (!String.IsNullOrEmpty(isim))//eğer gönderilen değer boş değilse
sonuc = Array.FindAll(isimler, s => s.Contains(isim));//içerisinde yollanan değer
geçen tüm
değerleri bul
else
sonuc = isimler;//eğer gönderilen değer boşsa tüm seçenekleri yolla
//diziyi json formatına çevirme ve geri döndürme
return Json(sonuc);
}
}
Listele metodu client tarafından gönderilecek isim türünden bir parametreyi alacak şekilde tasarlanmıştır. Eğer gönderilen isim değeri boş veya null ise dizi içerisinde tüm elemanlar geriye yollanır. Ancak boş değilse dizide gönderilen değeri taşıyan elemanlar bulunur ve bunlardan oluşan bir liste client’a yollanır. En son satırda da görüleceği gibi oluşan string[] dizisi Json metoduna parametre olarak verilir ve çıktı JSON türünde kullanıcıya yollanır.
Arayüzümüzde ise bir textbox ve listbox kullanıyoruz. Textbox içerisindeki değer değiştiğinde AJAX işlemi yapılır ve Listele action’ı çağırılır. Eğer işlem başarılıysa sonuç alınır ve eval() fonksiyonu kullanılarak bir javascript dizisi haline çevrilir. Daha sonra da bu dizinin her bir elemanı için listbox içerisinde bir seçenek (option) eklenir. Dizi elemanlarının her biri için aynı işlemin yapılmasını bir jquery kolaylığı olan each() fonksiyonu ile sağlıyoruz.
Home.aspx :
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<html>
<head>
<script type="text/javascript" src="../../Scripts/jquery-1.3.2.js"></script>
<style type="text/css">
label
{
display:block;
}
</style>
</head>
<body>
<!-- isimleri textbox verisine göre listeleme -->
<label>İsim :</label>
<%= Html.TextBox("Isim") %><br />
<label>Seçenekler :</label>
<select size="5" id="Secenek" style="width:150px">
</select>
<script type="text/javascript">
$(document).ready(function() {
//Isim textbox'ına klavye tuşuna basıldığında
$("#Isim").keyup(function() {
//ajax işlemi yaparak eşleşen isim listesini al
$.ajax({
url: "/Home/Listele?isim=" + $(this).val(), //bu adrese id ismindeki parametrenin değeri
olarak textbox'ın değerini yolla
dataType: "json", //geriye json türünde veri dönecek
type: "GET", //bu GET türünde bir istek olsun
success: function(result) { //işlem başarılı oursa
$("#Secenek").html(""); //eski seçenekleri temizle
var isimler = eval(result); //json verisini javascript nesneleri haline getir
//her bir isim için seçeneklere yeni bir option ekle
$.each(isimler, function(count, item) {
$("#Secenek").append("<option>" + item + "</option>");
})
},
error: function() { //hata oluşursa ekranda mesaj göster
alert("İsim listesi okumada hata oluştu");
}
})
});
});
</script>
</body>
</html>
Yukarıdaki kodları çalıştırdığımız zaman aşağıdaki arayüzü ve textbox içerisine yazı yazdığımız zaman da yandaki resimdeki görüntüyü elde ederiz.
Yüce ÇELİKEL
MCPD Enterprise Developer
