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
@section Scripts{ }Kitap Listesi
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 >
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;
