Osman KURT

Kendime Not

ASP.Net MVC de Ajax İşlemi

Bu yazımız da asp.net mvc de sayfamızı post etmeden database'mize kayıt yapmaya öğreneceğiz.

İlk olarak yapmamaız gereken 1 adet mvc projesi oluşturmak (Ben mvc 4 oluşturdum). Üzerin de çalışma yapabilmemiz için bir adet database oluşturuyoruz ve 1 tablo açıyoruz içine (DataBase: KariyerSoftDB, Table Name: KariyerSoftDB, Alanlar: PageID(int), PageName(nvarchar(50)), PageDescriptions(nvarchar(max))) olarak ayarlıyoruz.

Daha sonra Model klasörümüze gelerek içine alt kısımda ki propertilerimizi ve ekleme işlemin de kullanacağımız kodlarımızı yazıyoruz (Uyeler.cs).

 

[Serializable]
    public class Uyeler
    {
        public string PageName { get; set; }
        public string PageDescriptions { get; set; }

        public bool Ekle(Uyeler uye)
        {
            bool sonuc = false;
            SqlCommand cmd = new SqlCommand("Insert into Tbl_Page (PageName,PageDescription) values (@PageName,@PageDescription)", baglan.baglanti);
            cmd.Parameters.AddWithValue("@PageName", uye.PageName);
            cmd.Parameters.AddWithValue("@PageDescription", uye.PageDescriptions);
            if (ConnectionState.Closed == baglan.baglanti.State)
                baglan.baglanti.Open();
            int deger = cmd.ExecuteNonQuery();
            if (deger > 0)
            {
                sonuc = true;
            }
            else
            {
                sonuc = false;
            }
            return sonuc;
        }
    }

    [Serializable]
    public class Sonuc
    {
        public string Mesaj { get; set; }
    }

 

Bu arada kodlarımız arasın da bulunan Baglan.cs classımız var unutmadan onu da oluşturalım.

 

public class baglan
    {
        public static SqlConnection baglanti = new SqlConnection(@"Data Source=.\sqlexpress;Initial Catalog=KariyerSoftDB;Integrated Security=True");
    }

 

Evet şimdi model ile olan işimiz bitti ve views kısmına geçiyoruz. Bu kısım İçin alt kısımda ki kod yapımızı kullanacağız. Yaptığımız işlemler ise bir form oluşturmak ve oluşturduğumuz bu formlarda ki runtime verileri script yardımı ile alarak json veri tipin de model yardımı ile controller kısmın da işlemek. Kodları incelediğiniz siz de emin ki mantığını kavrayacaksınız.

    <script type="text/javascript">
        $(function () {
            $("#uyeKayit").click(function () {
                var gelen = Veriler();
                var jsonData = JSON.stringify(gelen);
                $.ajax({
                    url: "/Home/UyeKayit",
                    type: "Post",
                    data: jsonData,
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        var sonuc = data.Mesaj;
                        $("#Sonuclar").html(sonuc);
                    }
                })
            });
        });

        function Veriler() {
            var PageName = $("#pagename").val();
            var PageDescriptions = $("#pagedescriptions").val();
            return (PageName == "") ? null : { pagename: PageName, pagedescriptions: PageDescriptions };
        }
    </script>
    <h2>
        Mvc 3 ile Json Veri Gönderimi</h2>
    <div style="font-family: Verdana; font-size: 12px;">
        <div style="padding: 15px 0;">
            <span id="Sonuclar"></span>
        </div>
        <div style="padding: 5px 0;">
            Sayfa Adı</div>
        <div>
            <input type="text" id="pagename" />
        </div>
        <div style="padding: 5px 0;">
            İçerik</div>
        <div>
            <input type="text" id="pagedescriptions" />
        </div>
        <div>
            <input type="submit" value="gönder" id="uyeKayit" />
        </div>
    </div>

 

Son olarak controller kısmımız da kodlarımızı işlemeye geldi sıra.

 

[HttpPost]
        public ActionResult UyeKayit(Uyeler uyeler)
        {
            Uyeler uye = new Uyeler();
            uye.Ekle(uyeler);
            string bilgiler = string.Format("Adınız : {0}, Soyadınız : {1}", uyeler.PageName, uyeler.PageDescriptions);
            //return Json(new Sonuc() { Mesaj = bilgiler });
            return Json(new Sonuc() { Mesaj = "İşleminiz Başarı İle Gerçekleşmiştir" });
        }

 

Kaynak Kod:

osmankurtnetjson.rar (6,48 mb)

Yararlı olması dileğiyle;

Osman KURT

.Net Yazılım Uzmanı