MVCSHARP Ailesi ile yazılım geliştirmeye dair makaleler

MVC Json Model Post

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 cool

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 wink

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.

Ekran Çıktımız

Umarım sizler için faydalı bir paylaşım olmuştur.

Saygılarımla Fatih BÜLBÜL

 

Facebook Üzerinden Yorumlar