JQuery İle Html Formu JSON Dökümanına Dönüştürmek

Merhaba arkadaşlar, bu makalemde jquery ile çalışırken kolaylık sağlayacak pratik bir yöntemden bahsedeceğim. Bu kod parçacığı ile html formu json dökümanına çevirebilirsiniz. Öncelikle problemi ve neden böyle bir işleme ihtiyaç duyduğumu anlatayım. ASP.Net MVC ile geliştirdiğim bir projede controller’a bir model post ediyordum. Normalde html formunu post ettiğinizde FormCollection sınıfını kullanarak ya da name value mantığında bir sınıf yazıp kullanarak form elemanlarına ulaşabilirsiniz fakat iç içe (nested) hiyerarşik bir modeli tek seferde post ederek doldurmak istiyorsanız daha farklı bir yöntem kullanmalısınız.

Örneğin; fatura oluşturmak için bir form hazırladınız, bu formda fatura no, adres, tarih gibi input elemanları var ve bunların yanında bir multiple select ile çoklu ürün seçilebiliyor buraya kadar herşey normal ve klasik yöntemlerle bunu çözebilirsiniz fakat select elemanında ürünlerin sadece ID bilgisini değil tip, renk gibi farklı argümanlarını da tutuyorsanız farklı bir işlem yapmalısınız. (Bu örnekte ürünler bir değil birden fazla veritabanı tablosundan toplanıp getiriliyor ve ID bilgisi aynı ürünler içerebiliyor. bu nedenle ürünlerin hem ID hem de tip bilgisi birlikte gönderiliyor.)

Örnek Model Sınıfı

public class InvoiceModel
{
    public int ID{ get; set; }
    public DateTime date { get; set; }
    public List<Product> selectedproducts { get; set; }
}

Controller

[HttpPost]
public ActionResult CreateInvoice(InvoiceModel model)
{
    int ID = model.ID;
    DateTime tarih = model.date;
    List<Product> Secilenurunler = model.selectedproducts;

    return View();
}

Html Form

<form method="post" action="/home/createinvoice">
  <input type="text" name="ID" placeholder="Fatura No"/>
  <input type="text" name="date" placeholder="Tarih"/>
  <select id="products" multiple="multiple">
    <option value="1" data-tip="A">Acer Notebook</option>
    <option value="2" data-tip="A">Samsung Telefon</option>
    <option value="3" data-tip="B">Opel Otomobil</option>
  </select>
</form>

Yukarıdaki formu aşağıdaki gibi bir jquery fonksiyonu ile json dökümanına çevirebilirsiniz.

function PrepareForm() {
    var items = $("#products option:selected").map(function() {
        var opt = {};
        opt["ID"] = parseInt($(this).val());
        opt["tip"] = $(this).data("tip");
        return opt;
    }).get();
    return {
        "selectedproducts": items,
        "fields": $("form").serializeObject()
    };
}

Bu fonksiton ile JSON oluşturduktan sonra aşadaki Ajax işlemi ile Post işlemini tamamlayabilirsiniz. Herhangi bir problem yoksa InvoiceModel sınıfının selectedproducts değeri seçilen değerleri alacaktır.

$.ajax({
    type: "POST",
    url: "/home/createinvoice",
    data: JSON.stringify(PrepareForm()),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data) {
        alert(data);
    },
    failure: function(errMsg) {
        alert(errMsg);
    }
});

Eğer tüm ürünleri seçerseniz gönderilen JSON dökümanı aşağıdaki gibi bir yapıda olacaktır

{
    "selectedproducts": [{
        "ID": 1,
        "tip": "A"
    }, {
        "ID": 2,
        "tip": "A"
    }, {
        "ID": 3,
        "tip": "B"
    }],
    "fields": {
        "ID": "234234",
        "date": "13.05.2017"
    }
}

SerializeObject fonksiyonu internetteki araştırmalarım sonucunda ulaştığım önemli bir fonksiyon. Jquery varsayılan olarak Serialize ve SerializeArray isimli fonksiyonlar içerir. Serialize; form elemanlarını QueryString yapısına dönüştürür. SerializeArray ise name ve value tipinde bir json tipine dönüştürür fakat bu makale konusu için işimize yaramaz çünkü key olarak sürekli “name” yazacaktır serializeObject fonksiyonu yukarıdaki “fields” düğümünde olduğu gibi key olarak name değişkenin kendisini yazar ve işimizi kolaylaştırır.

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

Umarım faydalı olmuştur.

Mustafa Tayyip YETİŞ
Yazılım Geliştirme Uzmanı

4.0 Ort. (83% puan) - 1 oy

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir