1-) C# - Ajax ile Crud İşlemleri
Açıklama: Controller tarafında yapılması istenen işlemler için metodlar tanımlanır. Bu metodlar tanımlandıktan sonra Index üzerinden view oluşturulur.
[Area("Admin")] public class WriterController : Controller { public IActionResult Index() { return View(); }
public IActionResult WriterList() { var jsonWriters = JsonConvert.SerializeObject(writers); return Json(jsonWriters); }
public IActionResult GetWriterByID(int writerId) { var findWriter = writers.FirstOrDefault(x => x.Id == writerId); var jsonWriters = JsonConvert.SerializeObject(findWriter); return Json(jsonWriters); }
[HttpPost] public IActionResult AddWriter(WriterClass writerClass) { writers.Add(writerClass); var jsonWriters = JsonConvert.SerializeObject(writerClass); return Json(jsonWriters); }
public IActionResult DeleteWriter(int id) { var writer = writers.FirstOrDefault(x=>x.Id==id); writers.Remove(writer); return Json(writer); }
public IActionResult UpdateWriter(WriterClass writerClass) { var writer = writers.FirstOrDefault(x => x.Id == writerClass.Id); writer.Name = writerClass.Name; var jsonWriter = JsonConvert.SerializeObject(writerClass); return Json(jsonWriter); }
public static List<WriterClass> writers = new List<WriterClass> { new WriterClass { Id=1, Name="Ayşe" }, new WriterClass { Id=2, Name="Ahmet" }, new WriterClass { Id=3, Name="Buse" } }; } |
Açıklama Devam: Ardından index tarafında ilgili ajax kodları yazılır. İlgili layout tarafında scriptlerin altına @await RenderSectionAsync("scripts"); kodu eklenmelidir. scripts alanına istenilen isim verilebilir. Değişken mantığındadır.
@{ ViewData["Title"] = "Index"; Layout = "~/Views/Shared/AdminLayout.cshtml"; }
<h1>Yazar Ajax İşlemleri</h1> <br /> <button type="button" id="btngetlist" class="btn btn-outline-primary">Yazar Listesi</button> <button type="button" id="btngetbyid" class="btn btn-outline-success">Yazar Getir</button> <button type="button" id="btnaddwriter" class="btn btn-outline-info">Yazar Ekle</button> <button type="button" id="btndeletewriter" class="btn btn-outline-danger">Yazar Sil</button> <button type="button" id="btnupdatewriter" class="btn btn-outline-warning">Yazar Güncelle</button> <br /> <br /> <div id="writerlist"> Buraya Yazarlar gelecek </div> <br /> <div id="writerget"> Buraya bir yazar gelecek </div> <br /> <div> <input type="text" id="writerId" placeholder="Yazar ID Değerini girin" class="form-control" /> </div> <br /> <div> <input type="text" class="form-control" id="txtWriterId" placeholder="Yazar ID" /> <input type="text" class="form-control" id="txtWriterName" placeholder="Yazar Adı" /> <br /> </div> <br /> <div> <input type="text" class="form-control" id="txtId" placeholder="Silinicek yazar ID" /> </div> <br /> <input type="text" id="txtId1" class="form-control" placeholder="Güncellenecek ID" /> <input type="text" id="txtWriterName1" class="form-control" placeholder="Güncellenecek İsim" />
@section scripts{ <script> //çalışmasını istediğimiz butonun idsi buraya gönderilir $("#btngetlist").click(function () { $.ajax({ contentType: "application/json", dataType: "json", type: "Get", url: "/Admin/Writer/WriterList/", //çalışmasını istediğimiz metodun yolu buraya yazılır success: function (func) { let w = jQuery.parseJSON(func); console.log(w); let tablehtml = "<table class=table table-bordered> <tr> <th> Yazar ID</th> <th> Yazar Adı</th> </tr>"; $.each(w, (index, value) => { tablehtml += `<tr><td>${value.Id}</td> <td>${value.Name}</td> </tr>` }); tablehtml += "</table>"; //tablehtml alanı ekrana verileri tablo içerisinde yazdırmamızı sağlar $("#writerlist").html(tablehtml); } }); });
$("#btngetbyid").click(x => { let id = $("#writerId").val(); //input içerisindeki değer değişkene atılır $.ajax({ contentType: "application/json", dataType: "json", type: "Get", url: "/Admin/Writer/GetWriterByID/", data: { writerId: id }, //kullanıcıdan alınan verilerin kullanılması burada gerçekleşir success: function (func1) { let w = jQuery.parseJSON(func1); console.log(w);
let getValue = `<table class=table table-bordered> <tr> <th> Yazar ID</th> <th> Yazar Adı</th> </tr> <tr><td>${w.Id}</td><td>${w.Name}</td></tr></table>`; $("#writerget").html(getValue); } }); });
$("#btnaddwriter").click(function () { let writer = { Id: $("#txtWriterId").val(), Name: $("#txtWriterName").val() }; $.ajax({ type: "POST", url: "/Admin/Writer/AddWriter/", data: writer, success: function (func3) { alert("Yazar ekleme işlemi başarılı bir şekilde gerçekleştirildi."); } }); });
$("#btndeletewriter").click(x => { let id = $("#txtId").val();
$.ajax({ type: "POST", url: "/Admin/Writer/DeleteWriter/" + id, dataType: "json", success: function (func4) { alert("Yazar silme işlemi başarılı bir şekilde gerçekleştirildi."); } }); });
$("#btnupdatewriter").click(function () { let writer = { Id: $("#txtId1").val(), Name: $("#txtWriterName1").val() }; $.ajax({ type: "POST", url: "/Admin/Writer/UpdateWriter/", data: writer, success: function (func5) { alert("Güncelleme yapıldı"); } }); });
</script> } |