Jquery ile Tablodan Alınan Verinin JSON Data olarak Controller a Gönderilmesi

Merhaba,

Bu yazımızda, web projemizde table da olan verileri jquery ile json data olarak toplayıp ajax ile mvc projemizde controller a gönderebilmeyi anlatıyor olacağız.

Örneğin sayfamıza ekrandaki gibi bir veri yığını bulunmaktadır. Ekrandaki veriyi öncelikle json formatında alabilmek için scriptimiz ;

###

Senaryomuzda tabloya aldığımız verilerden istediğimiz olanı seçerek,veritabanımıza başka verileri de ekleyerek göndermek istiyoruz. bu veri kümelerinden bazıları fiyat,kod,açıklaması ve adedi olsun. Buna bağlı olarak json data mızın boş hali ile aşağıdaki şekilde hazırlıyoruz. Satırlardan sadece seçili olanları almak için checkbox ları kullandık. Seçili olanları kümemize almak için checked özelliğinde olanları da push methodu ile koleksiyonumuza alıyoruz.

var plantCollection = {
“data“:
[
//{ “_price”: “0”, “_code”: “0”, “_description”: “0”, “_quantity”: “0” }
]
};

daha sonrada öncelikle tbody içerisindeki verilerde dönebilmek için each fonksiyonunu kullanıyoruz. Satırlar arası verileri ararken bir alt satırımızda da td yani kolonlar içerisinde each fonksiyonu ile verilerimizi arıyoruz.td içinde her aradığımız veri için parametrelerimize değerleri alıyoruz.

$(‘tbody#resultSelectChoicePlant > tr’).each(function (i) {

$(“td”, this).each(function (j) {
if (i > 0) {

switch (j) {
case 0:
prc = $(this).text();
break;
case 1:
code = $(this).text();
break;
case 2:
desc = $(this).text();
break;
case 4:
quan = $(this).text();
break;
case 5:
i = i -1;
if ($(“input#chk” +  i).prop(“checked”)) {
isChecked = 1;
} else {
isChecked = 0;
}
break;
default:
}
};
});

if (isChecked > 0) {
plantCollection.data.push({ “_price”: prc, “_code”: code, “_description”: desc, “_quantity”: quan });
};
});

plantCollection da biriken datalarımızı controller a ajax ile göndermek istediğimizde de ;

oluşturduğumuz veriyi stringify komutu ile json veri tipine dönüştürüp başka dillerin okumasını sağlayarak bu veriyi kullanabiliriz. Post ettiğimiz veriyi mvc controller da kullanabiliriz. Controller da jsonresult dönüş tipi ile aldığımız result parametresini de uyarı olarak kullanıcıya gösterebiliriz.

“return Json(new { result = appCode });”

$.ajax({
url: “/Home/Selected/”,
type: “POST”,
data: JSON.stringify(plantCollection),
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (data) {

swal(“Başarılı!”, data.result + ” Numaralı Kayıt Başarı İle Oluşturuldu..”, “success”);

error: function (jqXHR, exception) {
var msg = ”;
msg = ‘Uncaught Error.\n’ + jqXHR.responseText;
}
});

Sonuç ekranı: