Javascript içerisinde C# List kullanımı

Merhabalar,

MVC projesi geliştirenler dinamik içerikler için genelde javascript methodlarından yararlanır. Bu tür metodlar var olan metodlardan(ajax, getJson, postJson vb.) seçilebileceği gibi kullanıcı tarafından da oluşturulabilir. Bu yazımda Razor View Engine ile oluşturulmuş bir MVC projesi içerisinde, serverda C# ile oluşturduğumuz List objesini javascript tarafında nasıl kullanacağımıza değineceğim.

Senaryomuz şu şekilde olacak;

- Kullanıcının göreceği ekran için Controller içerisinde Home() adında bir Action oluşturulmuş.

- View tarafına oluşturduğum modeli göndermek ve Javascript kullanarak view içerisinde liste içersinde dönerek ekrana listedeki objenin değerlerini göstermek istiyorum.

Server Tarafı Örnek Kodu;

public ActionResult Home()
{
HomeViewModel model = new HomeViewModel();
List<TimeLine> myList= new List<TimeLine>(); 
TimeLine element= new TimeLine ();
element.Name= "abc";
element.About= "ssss";
element.Id = id;

myList.Add(element);

System.Web.Script.Serialization.JavaScriptSerializer oSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
model.JSONList= oSerializer.Serialize(myList);

return View(model);
}

Javascript tarafında listenin kullanılabilir hale gelmesi için listeyi javascript'in anlayacağı hale getirmek amacıyla serializer kullanmamız gerekiyor. Gönderdiğimiz bu bloğun çalışması için de kullanıcı tarafında bunu uygun tipte karşılamamız gerekiyor. Script tarafında ise böyle karşıladığımızı düşünelim.

Kullanıcı Tarafı:

$(function() {
    Draw();
});

function Draw() {
    var tunel = '@Model.JSONList';
    var str = "";
    if (tunel.length > 0) {
        for (var i = 0; i < tunel.length; i++) {
            str += '<span>'+tunel[i].Name+'</span>'+
            '<span>'+tunel[i].Id+'</span>'+
            '<span>'+tunel[i].About+'</span>';
        }
        $("#myDiv").append(str);
    }
}

Burada tunel degiskeni içerisine serverdan gelen listeyi almışız fakat listeyi serialize etmiştik javascript bunu şu an string değer olarak görmekte. Gördüğü değer ise şu şekilde;

var tunel = JSON.parse('[{"Id":3,"Tarih":"\/Date(1425506400000)\/","Tip":2,"Hakkinda":"- Proje, görev, todo dökümlerini göster.","Adı":"Profil Ekranının Tasarlanması"},{"Id":26,"Tarih":"\/Date(1425160800000)\/","Tip":1,"Hakkinda":"Kişisel işlerin düzenlenmesi için geliştirilen proje.","Adı":"Kişisel Yazılım Asistanı"}]')

Bu değeri düzeltmek içinse tekrardan parse etmemiz gerekiyor;

var tunel = JSON.parse('@Html.Raw(Model.JSONList)');

Böylece List şeklinde C# da oluşturduğumuz bir değişkeni rahatça kullanabiliyoruz.

Umarım sizin de işinize yarar.