Asp.Net Core – DataTable client side kullanımı (Bootstrap ile)

Merhaba arkadaşlar,
Bugün sizlere DataTable client side listeleme nasıl yapılır, yani server tarafında bir işlem yapmadan direkt ön yüzde verilerimizi DataTable ile nasıl düzgün bir şekilde listeleriz anlatmaya çalışacağım.

Başlayalım:
CoreDataTableExample isimli, ASP.Net Core 3.1 seçerek boş bir proje oluşturdum.

Öncelikle projemde kullanmak üzere Product isimli bir model oluşturdum.

public class Product
    {
        [Required]
        [StringLength(50)]
        [DisplayName("Ürün kodu")]
        public string Code { get; set; }

        [Required]
        [StringLength(150)]
        [DisplayName("Ürün adı")]
        public string Name { get; set; }

        [DisplayName("Barkod")]
        public string BarcodeId { get; set; }

    }

Controller tarafında, product modelinden oluşan örnek bir liste yapıp home sayfasının indexine gönderdim.
HomeController.cs

Şimdi sıra geldi View tarafına.
Views> Home > Index.cshtml kodlarımı şu şekilde düzenledim.

@model IEnumerable<CoreDataTableUsingExample.Models.Product>

@{
    ViewData["Title"] = "Home Page";
}

@section styles{
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/fixedheader/3.1.6/css/fixedHeader.bootstrap4.min.css" />
}

<hr />

<table id="dataTable" class="table table-striped table-bordered" width="100%">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Code)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.BarcodeId)
            </th>
            <th> </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Code)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.BarcodeId)
                </td>
                <td>
                    <a class='btn btn-outline-primary' asp-action="Edit" asp-route-id="@item.Code">Detaylar</a>
                    <a class='btn btn-outline-danger' onclick="confirmDelete('@Url.Action("Delete", "Home" , new { id=item.Code })')">Sil</a>
                </td>
            </tr>
        }
    </tbody>
</table>


@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}


    <script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
    

    <script>
        $(document).ready(function () {
            $("#dataTable").dataTable({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Turkish.json"
                },
                "searching": true,
                "ordering": true,
                "paging": true,
                "pagingType": "full_numbers",
                "pageLength": 10,
                "responsive": true,
                "columnDefs": [{
                    "targets": 3,
                    "orderable": false
                }]
            });
        });
    </script>
}

Böylelikle işlemlerimi tamamlamış oldum. Dahil ettiğimiz DataTable ve JS kütüphaneleri #datatable isimli tabloyu otomatik olarak yakalıyor ve responsive tasarıma uygun olarak listeliyor.
Ben bu işlemleri Bootstrapt 4.0 göre yaptım. Tasarımda kaymalar oluyor ve düzgün gösteremiyorsanız, buna dikkat etmelisiniz.

Gördüğünüz üzere bunların hepsini istemci tarafında gerçekleştiriyor.

İşlem sonucuda Ekran Görüntülerim:

Arama işlemleri

Umarım yardımcı olmuşumdur, başka bir yazıda görüşmek üzere, iyi çalışmalar.

Şu kaynaklara göz atmanızda yarar var.

DataTable example – Bootstrap 4