Asp.Net Mvc'de Ajax ile Sayfa Yenilenmeden Veri Çekme

İbrahim     10 Eylül 2017     3597     5    
Bu paylaşımda, AspNet Mvc'de ajax ile sayfa yenilenmeden anlık olarak veri çekme işlemi nasıl gerçekleştirilir onu göstereceğim.İlk olarak controller oluşturalım.İçerisindeki Index metoduna 'return View();' yazalım.

public class MakaleController : Controller
{
	public ActionResult Index()
        {
            return View();
        }
}

 

Ardından metodun üstüne sağ tıklayarak 'add view' diyelim ve viewimizi oluşturalım.Body içersine table oluşturalım, id özelliğine tablo diyelim.

<!DOCTYPE html>
<html lang="tr">
<head>
	<meta charset="utf-8">
</head>
<body>
	<table id="tablo"></table>
</body>
</html>

 

Ardından tekrar controller kısmına geçelim.JsonResult formatında Veriler metodu oluşturalım.İçersinde çekilecek olan verileri belirtelim.

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);
    }
}

 

View kısmına geçelim.İlk olarak jquery kütüphanemizi ekleyelim.Ardından Makaleler fonksiyonunu yazalım.

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
</head>
<body>
<table id="tablo"></table>

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

Şimdi burada neler yaptık ona bir göz atalım.İlk olarak document ready içersinde makaleler fonksiyonumuzu çağırdık,yani sayfa yüklendiğinde makaleler fonksiyonu çalışsın dedik.Ardından fonksiyon içersinde, ajax ile makale controller'ında bulunan veriler action'ını çalıştır dedik.Burada eğer Veriler action'ındaki verilerimiz başarıyla çekilmiş ise success metoduna girecek ve data adlı parametremize verilerimiz gelecek.Geriye kalan ise döngü ile verilerimizi ekrana bastırmak.
Evet arkadaşlar ajax ile veri çekme işlemi bu şekilde.İşinize yaraması ümidiyle, iyi kodlamalar :)


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


Paylaş:  

Bir Cevap Yazın

B

Borahan 23 Eylül 2017
gayet güzel anlatımlar olmuş. Piyasada en çok ihtiyaç suan mvc ve jqery uygulamaları bunlara ağırlık verirseniz bence siteniz baya bit hit alır

İbrahim Çakal 23 Eylül 2017
Teşekkür ediyorum Borahan Bey :) Elimden geldiğince paylaşımlar yapmaya çalışıyorum.Her öğrendiğimi paylaşmaya çalışıyorum.Yardımcı olabiliyorsam ne mutlu bana.

T

t5 7 Aralık 2017
güzel

İbrahim Çakal 26 Aralık 2018
Teşekkürler

F

Furkan 3 Nisan 2018
Merhabalar veriler json data olarak text şeklinde geliyor. bunun sebebi ne olabilir sizce?