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

@'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 > 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 ``;

                }, "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;

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir