ASP.NET Core Kitap Listeleme Projesi Ders 12

Projemizi geliştirmeye devam edelim. Öncelikle Pages/KitapListesi klasörü altında yer alan index.cshtml dosyama geliyorum ve kodlarımı düzenliyorum.

Dersin video versiyonunu da izlemenizi öneririm.

Pages/KitapListesi/Index.cshtml içeriği kodlarım:

@page
@model KitapListesiProjesi.Pages.KitapListesi.IndexModel





    

        
Kitap Listesi
    

    

        Yeni Kitap Oluştur
    

    

        

            @'if' (Model.Kitaplar.Count()>0)
            {
                < table class="table table-striped border">
                    < tr class="table-secondary">
                        < th >
                            
                        < /th >
                        < th >
                            @*@Html.DisplayNameFor(a => a.Kitaplar.FirstOrDefault().Yazar)*@

                            

                        < /th >

                        < th >
                            
                        < /th >

                        < th >İŞLEMLER< /th >

                    < /tr >

                    @foreach(var item in Model.Kitaplar)
                    {
                < tr >
                    < td >
                        @Html.DisplayFor(a => item.KitapAd)
                    < /td >
                    < td >
                        @Html.DisplayFor(a => item.Yazar)
                    < /td >
                    < td >
                        @Html.DisplayFor(a => item.ISBN)
                    < /td >
                    < td >

                        Sil
                        Düzenle
                    < /td >
                < /tr >
                    }

                < /table >
            }
            else
            {
                
Listelenecek kitap bulunamadı...
            }
        < /form >
    

    

        

        2. Gösterim Alanı
        

        

    

    


        < table id="DT_load" class="table table-striped table-bordered" style="width:100%">
            < thead >
                < tr >
                    < th >Kitap Adı< /th >
                    < th >Yazar< /th >
                    < th >ISBN< /th >
                    < th >İşlemler< /th >
                < /tr >
            < /thead >

        < /table >
 
    



@section Scripts{

 }

Not: Kodları en doğru şekilde görebilmek için video eğitimi izleyebilirsiniz. if önünde ve sonunda yer alan tırnak işareti ve bazı alanlarda yer alan ek boşluklar tarayıcı hatasını aşabilmek için eklenmiştir.

Index sayfamda ilgili ikinci gösterim alanı yani javascript özelilkleri ile ilgili ikinci alan tanımlaması için kodlarımı ekledim. Birazdan oluşturacağım kitapListesi.js için de section bölümünde bağlama işini gerçekleştirdim. Şimdi projemde wwwroot klasöründe js klasörü üstünde iken add new item diyorum. Gelen menüden javascript seçiyorum ve adını da kitapListesi.js verdim.

Şimdi javascript kodlarımızı yazalım.

var dataTable;

$(document).ready(function (){
    loadDataTable();
});

function loadDataTable() {
    dataTable = $('#DT_load').DataTable({
        "ajax": {
            "url": "/api/kitap",
            "type": "GET",
            "datatype": "json"
        },

        "columns": [
            { "data": "kitapAd", "width": "20%" },
            { "data": "yazar", "width": "20%" },
            { "data": "isbn", "width": "20%" },
            {
                "data": "id",
                "render": function (data) {
                    return `

                           
                      Düzenle 
                       
                       Sil   
                   
`;

                }, "width": "40%"
            }

        ],

        "language": {
            "emptyTable": "Veri bulunamadı!"
        },

        "width": "100%"
    });
}

Not: Kodları en doğru şekilde görebilmek için video eğitimi izleyebilirsiniz.

Şu anda geldiğimiz en son noktada proje görselimizin index sayfası görseli;