🙂 İNSANLARIN EN HAYIRLISI INSANLARA FAYDALI OLANDIR 🙂

Ali Furkan ÇAĞLAYAN / C# / Ajax ile Crud İşlemleri

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>

}

 

 

 2022 Ekim 12 Çarşamba
 290