Ajax İle Sayfa Yenilenmeden Veri İşlemleri

Kullanıcı Bilgilendirme Alert Yapısı

<div class="alert alert-primary" role="alert" id="islemDurumu" hidden>
    İşlem Başarı İle Yürütüldü...
</div>

Veri İşlenecek Button ve Div Yapıları

<button class="btn btn-success" id="VeriTemizle"> Veri Temizle </button>
<button class="btn btn-success" id="VerileriYenile"> Veri Yenile </button>


<div id="veriliste">

</div>

Post Edilecek Form Yapısı

<form method="POST" enctype="multipart/form-data" id="friendform">


    <div class="form-group col-lg-12">
        <label>Resim</label>
        <input type="file" class="form-control" name="studImg">
    </div>

    <div class="form-group col-lg-12">
        <label>Ad</label>
        <input type="text" class="form-control" name="Ad" required>
    </div>


    <div class="form-group col-lg-12">
        <label>Soyad</label>
        <input type="text" class="form-control" name="Soyad">
    </div>


    <button class="btn btn-primary" id="Kaydet">
        Kaydet
    </button>

</form>

İşlem Yapılacak Ajax Kodları

<script>


    /*Veri Listeleme Metodu*/
    function Veriler() {
        $.get('/Home/Getir/', function (d) {
            $('#veriliste').html(d);
        });
    };

    // Veri Listele Aksiyon
    $(document).on('click', '#VerileriYenile', function () {
        Veriler();
    });

    /*Temizleme Metodu*/
    function Temizle() {
        $('#veriliste').html("");
    };

    //Temizle Aksiyon
    $(document).on('click', '#VeriTemizle', function () {
        Temizle();
    });



    /*----------------------------------------------------------*/


    $('#Kaydet').click(function () {
        let veri = $("#friendform").serialize();
        $.ajax({
            type: 'POST',
            url: '/Home/Kaydet/',
            data: veri,
            success: function (data) {
                Veriler();
                $("#friendform")[0].reset();
                $("#islemDurumu").show("slow").delay(3000).fadeOut();
            },
            error: function (err) {
                console.error(err)
            }
        });
    });

</script>

İşlem Yapılacak Controller Mekanizması

        public PartialViewResult Getir()
        {
            return PartialView("DataPartialView");
        }

        public ActionResult Kaydet(Ogrenci o)
        {
            db.Ogrenci.Add(o);
            db.SaveChanges();
            return Json(true);
        }