Merhabalar , uzun bir aranın ardından bir MVC4 yazısı ile karşınızdayım.
Bu yazımızda sayfa yenilenmeden Ajax ve Json aracılığı ile MVC4′de nasıl işlem yapılır bunu öğreneceğiz.
Öncelikle Visual Studio adlı program aracılığı ile bir ASP.Net MVC4 projesi açalım.
Models klasörünün içine “Deneme” adında bir class oluşturalım ve içerisine şu kodları yazalım ;
[Serializable] public class Uyeler { public string PageName { get; set; } public string PageDescriptions { get; set; } public bool Ekle(Uyeler uye) { bool sonuc = false;// bu kısma yapmak istediğiniz işlemi yazabilirsiniz.
return sonuc; } } [Serializable] public class Sonuc { public string Mesaj { get; set; } }Daha sonrasında “DenemeController” adında bir Controller oluşturalım.
[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" }); }DenemeController‘in Index sayfasına yani View kısmına bunu yazalım ;
<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>
Örnek uygulamayı buradan indirebilirsiniz.
