Osman KURT

Yazılım Uzmanı | MVC Eğitmeni

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ı

Yorumlar (5) -

  • Cenk

    21.2.2013 07:31:45 | Yanıtla

    Osman Bey

    Asp.Net Mvc de Bu Jquery Çok Zormuş Sizde Doğruladınız. Googleden Php Ile Yapılana Bakıyorumda Daha Kolay Geliyor.

    Gelin Sizde Php Geçin Derim Smile

  • Ferhat

    10.2.2014 09:56:05 | Yanıtla

    Osman Bey,
        Ajax ile bu şekilde kayıt yaratmak kullanışlı gibi görünse de ciddi bir güvenlik sorunu var gibi. Ajax ile kullandığınız /Home/UyeKayit linki direk erişime de açık durumda kalacaktır ve bu durumda küçük bir uygulama ile veri tabanınıza bir anda alakasız milyonlarca kayıt gelebilir. Ayrıca aynı yöntemle yapılan GET sorgularında da verilerinizin başka kullanıcılar tarafından alınması çok kolay duruma gelmekte.  Bu URL adresinin sadece uygulama içerisinden kullanılabilir olmasını sağlayacak bir yöntem varsa ve paylaşırsanız çok iyi olur.

  • Yunus Emre Altınay

    13.8.2015 09:17:28 | Yanıtla

    Örnek için teşekkürler. Gayet faydalı bir yazı olmuş.

    Ferhat Bey;
    Açığı önlemek için class'a ya da methoda yetki ve rol ekleyebilirsiniz.
    Classın üstüne

    [Authorize]
    public class CustomersController : Controller
    {
    ...
           //ya da methodun üstüne
           //Bu methodu kullanabilmeleri için AddCustomer rolüne sahip olunması gerekir
           [Authorize(Roles = "AddCustomer")]
           public ActionResult AddCustomer()
          {
              ...
          }
    }
    Bu şekilde çözülebilir.
    İyi günler.

  • Enes

    5.11.2016 11:45:38 | Yanıtla

    Hocam bu gibi ajax işlemlerinde kullanıcı birden fazla kez butona bastığında işlemler çifterli olarak gerçekleşiyor. Ne kadar return ile birlikte formdaki verileri temizlesem de çözüm bulamadım. Nasıl yapabilirim acaba ?

    • Osman KURT

      8.11.2016 22:48:16 | Yanıtla

      Merhaba Enes,
      Formu boşaltmak yerine ilk tıklamada butonu pasif hale getirmen yeniden tıklanmasını engelleyecektir.

Loading