Asp.Net Mvc'de Ajax ile Sayfa Yenilenmeden Veri Ekleme

İbrahim     10 Eylül 2017     1931     4    
Bu paylaşımda, AspNet Mvc'de ajax ile anlık olarak sayfa yenilenmeden veri ekleme işlemi nasıl gerçekleştirilir onu göstereceğim.'Mvc de sayfa yenilenmeden veri çekme'  adlı paylaşımımda veri çekme işlemini göstermiştim.Şimdi o paylaşım üzerinden devam edeceğim.İlk olarak html sayfasındaki tablomuzun altına inputlarımızı ekleyelim.

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
</head>
<body>
<table id="tablo"></table>
<input id="baslik" placeholder="Makale Başlığını Giriniz">
<input id="icerik" placeholder="İçeriği Giriniz">
<button type="button" id="ekle">Ekle</button>

<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/makale.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		Makaleler();
	});
</body>
</html>

 

MakaleController tarafına geçelim.Ekle metodumuzu yazalım.

public class MakaleController : Controller
{
    private DbEntities DB = null;

    public MakaleController()
    {
        DB = new DbEntities();
    }

    public ActionResult Index()
    {
        return View();
    }

    public JsonResult Veriler()
    {
        var model = DB.Makale.ToList();
	    return Json(
	    new
	    {
            Result = (from obj in model
		    select new
		    {
		        Baslik = obj.Baslik,
		        Icerik = obj.Icerik
		    })
	    }, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public JsonResult Ekle(string baslik, string icerik)
    {
        var model = new Makale
        {
            Baslik = baslik,
            Icerik = icerik
        };
        DB.Makale.Add(model);
        DB.SaveChanges();
        return Json("1");
    }
}

 

Ardından kodlarımızın biraz daha düzenli olması ve karışıklığın azalması açısından 'makale' adında bir script dosyası oluşturalım ve makaleler fonksiyonunu oraya taşıyalım.Script dosyasının yolunu da html dosyasına ekleyelim.
Şimdi makale.js dosyamıza gelelim.Ekle butonuna tıkladığımızda input değerlerini alıp MakaleController'ımızdaki 'Ekle' metodumuza json formatında gönderelim. 

function Makaleler() {
    $.ajax({
        type: 'GET',
        url: '/Makale/Veriler',
        dataType: "JSON",
        success: function (data) {
            $('#tablo').html("");
            $(data.Result).each(function (item) {
                var makale = '<tr><td>' + data.Result[item].Baslik + '</td><td>' +
data.Result[item].Icerik + '</td></tr>';
                $('#tablo').append(makale);
            }
        }
    });
}

$(document).on("click", "#ekle", function () {
    var degerler = {
        baslik: $("#baslik").val(),
        icerik: $("#icerik").val()
    };

    $.ajax({
        type: 'POST',
        url: '/Makale/Ekle',
        data: JSON.stringify(degerler),
        dataType: "JSON",
        contentType: "application/json;charset=utf-8",
        success: function (gelenDeg) {
		    alert("Makale Başarıyla Eklendi!");
		    Makaleler();
        },
        error: function () {
		    alert("Makale Eklenirken Hata Oluştu!");
        }
    });
});

Burada 'ekle' butonuna tıklandığında değerlerimizi aldık ve controller'ımıza gönderdik.Alınan veriler başarılı bir şekilde veritabanımıza eklenmiş ise success fonksiyonuna girecek.Alert ekrana bastırılacak ve Makaleler metodu tekrar çalıştırılacak.Böylece sayfa yenilenmeden hem veri eklenmiş olacak hemde veritabanındaki veriler tabloya çekilmiş olacak.

Ajax ile veri ekleme işlemi bu şekilde.İşinize yaraması ümidiyle, iyi kodlamalar :)


Etiketler:  
mvc
aspnet
jquery
ajax-ile-sayfa-yenilenmeden-veri-ekleme


Paylaş:  

Bir Cevap Yazın

İ

ilker 4 Haziran 2018
return Json("1"); burada 1 in anlami ne

İbrahim Çakal 15 Aralık 2018
İşlem tamamlandıysa 1 değerini gönderiyor.Success fonksiyonunda gelen değer 1 ise başarılıyla eklendi mesajını vermesini sağlıyor.Fakat ben burda success methodunda gelen değeri kontrol etmedim.

N

NK 16 Kasım 2018
Eline sağlık öz ve açıklayıcı olmuş

İbrahim Çakal 16 Kasım 2018
Teşekkür ederim.