Merhaba arkadaşlar işlerden dolayı uzun bir süredir makale yazamamaktaydım nihayet bugün tekrar birlikteyiz.
Bugun sizler ile belirli bir modeli json olarak Result'umuza göndereceğiz ve dilediğimiz gibi işlemler yapacağız
Hemen vakit kaybetmeden örneğimize başlayalım öncelikle modelimizi belirleyelim
Örneğimizi buradan indirebilirsiniz.
public class UserModel
{
[DisplayName("İsim")]
public string Adi { get; set; }
[DisplayName("Soyisim")]
public string Soyadi { get; set; }
[DisplayName("Doğum Tarihi")]
public DateTime DogumTarihi { get; set; }
}
Evet Model'imizi oluşturduk şimdi işlem yapacağımız bir view oluşturmalıyız.
Hemen Controller içerisine bir ActionResult ekleyelim
public ActionResult Index()
{
return View();
}
Oluşturduğumuz ActionResult'a bir View Ekleyelim.
Koldarımız aşağıdaki gibi olacaktır.
@model JsonModelPOST.Controllers.UserModel
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="http://almsaeedstudio.com/AdminLTE/css/AdminLTE.css" rel="stylesheet" />
</head>
<body>
<div>
<fieldset>
<legend>Makale Ekle</legend>
<div class="editor-label">
@Html.LabelFor(model => model.Adi)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.Adi)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Soyadi)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.Soyadi)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.DogumTarihi)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.DogumTarihi, new { type = "date" })
</div>
<p>
<span id="Gonder" class="btn btn-success">Gonder</span>
</p>
<div id="bilgiler"></div>
</fieldset>
</div>
</body>
</html>
Sırada javascript kodlarımız var.
Öncelikle yukarıda oluşturduğumuz model tipinde bir sınıf oluşturalım ve gerekli değerleri de barındırdığı değişkenlere atayalım.
function model() {
this.Adi = $("#Adi").val();
this.Soyadi = $("#Soyadi").val();
this.DogumTarihi = $("#DogumTarihi").val();
}
Şimdi bu verileri taşıyacağımız bir Fonksiyon yazalım.
Ben fonksiyona gönderdiğim değerler string bir ifade olarak view tarafına geri göndereceğim.
Siz ihtiyacınıza göre daha farklı işlemler de yapabilirsiniz
public JsonResult JsonMethod(string PostModel)
{
//Gelen string ifadeyi oluşturduğumuz model tipine çevirdik
UserModel model = JsonConvert.DeserializeObject<UserModel>(PostModel);
//View tarafına göndereceğimiz string ifademi oluşturuyorum
string bilgi = model.Adi + " " + model.Soyadi + " dünyaya gözlerini " + model.DogumTarihi.ToShortDateString() + " tarihinde açtı";
return Json(bilgi, JsonRequestBehavior.AllowGet);
}
Arkadaşlar sırada son adım olarak ajax methodumuzu yazalım ve bu işi burada sonlandıralım
JSON.stringify() fonksiyonu bizim için çok önemli kullanmamızın sebebi json objemizi string bir ifadeye dönüştürmektir.
$("#Gonder").click(function () {
$.ajax({
url: "/Home/JsonMethod",
data: { PostModel: JSON.stringify(new model()) },
success: function (bilgi) {
$("#bilgiler").append(bilgi);
},
dataType: "json"
});
})
Sevgili arkadaşlar bir makalemizin daha sonuna geldik.
Umarım sizler için faydalı bir paylaşım olmuştur.
Saygılarımla Fatih BÜLBÜL
Facebook Üzerinden Yorumlar