Bu yazımda jQuery Ajax işlemlerinde script tarafından sunucuya taşıdığımız verileri nesne veya nesne dizisi olarak nasıl aktarabileceğimizi göstermeye çalışacağım. Ajax işlemlerinde kullanmak için geç kaldığım bir yöntem diyebilirim. Şimdiye dek tüm verileri string veya integer türü olarak teker teker sunucuya aktarıyordum. Şimdiki anlattığım yöntem ile verileri istediğimiz nesne türünde server ve client arasında taşıyabileceğiz. Bu yöntemde hem sunucu tarafında hem de kullanıcı tarafında kullanılan nesnelerin yani hem C# nesnelerinin hem de script nesnelerin uyumlu olması gerekiyor. Ajax işlemlerini etkin bir biçimde kullanmak istiyorsak bu yöntemin kullanılması gerektiğini düşünüyorum. Çünkü büyük esneklik ve kolaylık sağlıyor. Şimdi bu işlemi nasıl yapacağımıza bakalım ve hazırladığım örneği inceleyelim.
Örnek olarak; script ile kullanıcı tarafında dinamik olarak oluşturulan text kutularının değerlerini sunucu tarafında elde edeceğiz ve bu değerlere göre işlem yapacağız. Burada kullanıcı ve sunucu tarafında veri taşırken belirtmiş olduğum nesne taşıma yöntemini kullanacağız. Böylece oldukça dinamik bir uygulama yapmış olacağız. Bu yöntem ile bunun gibi çok daha kullanışlı ve rahat uygulamalar geliştirebiliriz.
Bu yazımda hazırladığım örnek üzerinden giderek kodları paylaşacağım. Her satırı tek tek anlatmayacağım ama önemli yerleri paylaşacağım. Diğer bölümleri merak edenler ise örneği indirerek inceleyebilirler. Öncelikle kullandığımız C# kodlarını ve Webmethod kodlarını inceleyelim.
// kullanılan sunucu taraflı nesne
public class TextBox
{
public string Id { get; set; }
public string Value { get; set; }
}
// Ajax isteğinde bulunulan Webmethodlar
[System.Web.Services.WebMethod]
public static List<TextBox> Kontrol(List<TextBox> kontroller) //parametre "TextBox[] kontroller" de olabilir.
{
// işlemler ....
return kontroller;
}
[System.Web.Services.WebMethod]
public static TextBox Kontrol2(TextBox kontrol)
{
// işlemler ....
return kontrol;
}
Daha sonra server tarafındaki bu kodların çalışmasını sağlayacak olan Ajax isteği ile beraber gelecek olan
data parametresinin değerini nasıl vereceğimize bakalım. Bunun için javascript ile bir nesne tanımlayıp bu nesne üzerinden verileri aktaracağız. Tek bir nesne veya birden fazla nesne taşıyacağız. Bunun için yazacağımız script kodları inceleyelim.
// Script Kodlar
//Kullanılan script nesnesi
function TextBox() {
this.Id = 0,
this.Value = "",
}
//data parametresi ile sunucuya aktarılacak script nesnelerinin oluşturulması
var kontroller = [];
for (var i = 0; i < 5; i++) {
TB = new TextBox();
TB.Id = i;
TB.Value = "Deneme";
kontroller.push(TB);
}
//jQuery Ajax'ın data parametresi ile birden fazla nesne gönderilecek ise oluşturulacak yapı
[{"Id":"", "Value":""}, {{"Id":"", "Value":""}, {{"Id":"", "Value":""}, ...]
//jQuery Ajax'ın data parametresi ile bir nesne gönderilecek ise oluşturulacak yapı
{"Id":"", "Value":""}
Bu kodları da yazdıktan sonra ise uygulamaya geçelim. Bu kodların çalışır halini
buradan görebilir ve örneği
buradan indirebilirsiniz. Kodlar bu konuyla çok fazla içli dışlı olmayanlar için pek anlaşılır olmayabilir ama uygulama bir o kadar kullanışlı ve basit olmakta. Burada son bölümde paylaştığım script kodlarda tek nesnenin veya nesne dizisinin data parametresinde nasıl olacağını belirttim. Bu yapı JSON yapısıdır ve sunucu tarafında bu yapı çözümlenerek script trafındaki nesne türü sunucu tarafındaki nesne türüne dönüştürülüyor. Bu konunun en can alıcı noktası bu olsa gerek. Bu yöntem ile buna benzer çok daha esnek uygulamalar geliştirilebilir. Özellikle Linq ile entegre bir biçimde çalışacak olursak çok daha efektif uygulamalar geliştirebiliriz.
Hazırladığım örneği
buradan görebilir ve
buradan da indirebilirsiniz.
İyi Çalışmalar.