IRONSOFTWAREHOME
GELIŞTIRICI GÜNCELLEMELERI

Datatables .NET (Geliştiriciler için Nasıl Çalışır)

Jacob Mellor, Teknoloji Direktörü @ Team Iron
Jacob Mellor
Updated: 23 Nisan 2026

ASP.NET geliştiricileri, gelişmiş özellikler (sıralama, arama, sayfalama gibi) içeren tablolar veya HTML tablolarını verimli bir şekilde sunmanın yollarını sıkça arar. DataTables.NET güçlü bir jQuery, JavaScript kütüphanesi ve web uygulamalarında etkileşimli ve zengin özellikli tablolar oluşturmayı kolaylaştıran son derece esnek bir araçtır. Bu makalede, tablosal verilerin sunumunu ve kullanıcı deneyimini geliştirmek için bir ASP.NET projesine DataTables.NET dağıtım dosyalarını, sunucu-tarafı işleme destekleyen bir kütüphane entegre etmeyi keşfedeceğiz.

DataTables'i bir ASP.NET Web Uygulamasında Nasıl Kullanılır?

  1. ASP.NET Web Uygulaması oluşturun
  2. DataTables İstemci Tarafı stil paketi ekleyin
  3. Sadece çekirdek yazılım olan Entity Framework Core Paketlerini yükleyin
  4. Model Sınıfı, Kontrolcü ve Razor Sayfası ekleyin
  5. JS Dosyasına JavaScript kodu ekleyin
  6. Yapılandırmayı ayarlayın
  7. Programı derleyin ve çalıştırın
  8. Verileri IronXL for Excel Data Export kullanarak bir Excel dosyasına aktarın

DataTables.NET Nedir?

DataTables.NET, .NET uygulamalarında etkileşimli tablolar oluşturmanıza ve manipüle etmenize olanak tanıyan bir jQuery JavaScript kütüphanesidir. Dinamik ve statik HTML tabloları için sayfalama, sıralama, filtreleme ve kaydırma gibi kapsamlı API özellikleri sağlayan jQuery DataTables eklentisine dayanır. SQL veri tabanları, AJAX veya bellek içi nesneler gibi çeşitli veri kaynakları ile çalışabilen tablo-iyileştirme kütüphanesidir.

Sunucu Tarafı İşleme

Ürünlerin geniş bir veri setini sunan bir API uç noktanızın olduğu bir senaryoyu düşünün. Varsayılan yaklaşım, jQuery DataTables'in bu API'ye bir AJAX çağrısı yapması, JSON formatında bir ürün listesi elde etmesi ve bir HTML tablosu oluşturmasıdır. Bu, genellikle 100 ila 1000 kayıt arasında değişen daha küçük veri setleri için verimli olan istemci-tarafı işleme olarak bilinir. Bununla birlikte, veri seti 10.000 kayıt veya daha fazla genişlediğinde ne olur?

Çok sayıda kayıt ile uğraşırken, tüm veri setini bir kerede tarayıcıya göndermek pratik hale gelmez. 10.000 kaydı bir defada iletmek, yalnızca bant genişliği açısından israf değil, aynı zamanda tarayıcı kaynaklarını zorlar. Bu tür durumlardaki alternatif bir yaklaşım, performansı optimize etmek için sunucu-tarafı işleme olur.

Sunucu-tarafı işlemde, tüm veri setini göndermek yerine, API veriyi yönetilebilir parçalar halinde iletir, genellikle sayfalanmış olarak yaklaşık 50 kayıt sayfa başına. Bu şekilde, yükleme süresi önemli ölçüde geliştirilir, çünkü jQuery DataTables şimdi bir seferde tüm veri seti yerine mütevazi miktarda kayıt (~ 50) yükler. Bu yaklaşım CPU ve bant genişliği kullanımını azaltır ve API ile DataTable arasındaki etkileşimi daha verimli hale getirir.

Bu makalede, ASP.NET Razor Sayfası uygulamasında sunucu-tarafı işlemeyI uygulamayı keşfedeceğiz, büyük veri setlerini verimli bir şekilde yönetme ve görüntülerken, web uygulamanızın genel performansını arttırmanın yollarını göstereceğiz.

ASP.NET 8'de DataTables.NET ile Başlarken

Başlangıçta, projeye DataTables.NET İstemci Tarafı Kütüphanesini eklememiz gerekiyor. Bu makale, .NET 8 ile bir ASP.NET Core Web Uygulaması (Razor Sayfalar) projesi kullanacaktır. Gereksinimlerinize göre herhangi bir Web Uygulama Projesi kullanabilirsiniz.

Bir İstemci Tarafı Kütüphanesi eklemek için Solution'a sağ tıklayın> Ekle > İstemci Tarafı Kütüphanesi'ni seçin ve aşağıdaki gibi veri tabloları arayın.

DataTables.NET (Geliştirici İçin Nasıl Çalışır): Şekil 1 - İstemci Tarafı Kütüphanesi Ekle

Şimdi, Model Sınıfı, DB Bağlamı, Kontrolcü, HTML tablosu ve AJAX Çağrısı eklememiz gerekiyor.

Ama bundan önce, uygulamamızı Veri Tabanı ile bağlamak için EntityFramework NuGet Paketlerini yüklememiz gerekecek. Bu makale Koddan İlk Yaklaşım'ı kullanacak, tercihinize göre Veri Tabanı ilk'i kullanabilirsiniz.

Yerel olarak barındırılan aşağıdaki paketleri yükleyin:

  1. Microsoft.EntityFrameworkCore
  2. Microsoft.EntityFrameworkCore.Design
  3. Microsoft.EntityFrameworkCore.SqlServer
  4. Microsoft.EntityFrameworkCore.Tools

NuGet Paket Yöneticisi Konsolu'ndan install-package komutunu kullanarak, ya da NuGet Paket Yöneticisi çözümü üzerinden aratarak yukarıdaki paketi yükleyin.

Model Sınıfı Ekle

Bu örnek için Ürün Model Sınıfı kullanıyorum, gereksiniminize göre kullanabilirsiniz.

public class Product
{
    public int Id { get; set; }
    public string ProductName { get; set; } = string.Empty;
    public string ProductPrice { get; set; } = string.Empty;
    public string ProductWeight { get; set; } = string.Empty;
    public string ProductDescription { get; set; } = string.Empty;
    public DateTime ProductManufacturingDate { get; set; }
    public DateTime ProductExpiryDate { get; set; }
}

ApplicationDBContext Sınıfı Ekle

public class ApplicationDBContext : DbContext
{
    public ApplicationDBContext(DbContextOptions<ApplicationDBContext> options) : base(options)
    {
    }
    public DbSet<Product> Products { get; set; }
}

Gelişmiş Etkileşim Kontrolleri Ekle

Gelişmiş kontroller eklemek için, örneğin sayfalandırma, arama vb., ProductDatatables.js'i wwwroot/js klasörünün içine ekleyeceğiz.

// Initialize the DataTables plugin for the HTML element with 'productDatatable' ID
$(document).ready(function () {
    $("#productDatatable").DataTable({
        "processing": true, // Enable processing indicator
        "serverSide": true, // Enable server-side processing
        "ajax": {
            "url": "/api/Product", // API endpoint for fetching product data
            "type": "POST",
            "datatype": "json"
        },
        "columnDefs": [{
            // Define properties for columns
            "targets": [0],
            "visible": false, // Hide the 'Id' column
            "searchable": false // Disable searching for the 'Id' column
        }],
        "columns": [
            { "data": "id", "name": "Id", "autoWidth": true },
            { "data": "productName", "name": "ProductName", "autoWidth": true },
            { "data": "productPrice", "name": "ProductPrice", "autoWidth": true },
            { "data": "productWeight", "name": "ProductWeight", "autoWidth": true },
            { "data": "productDescription", "name": "ProductDescription", "autoWidth": true },
            { "data": "productManufacturingDate", "name": "ProductManufacturingDate", "autoWidth": true },
            { "data": "productExpiryDate", "name": "ProductExpiryDate", "autoWidth": true },
            {
                // Add a 'Delete' button with an onclick event for deleting the product
                "render": function (data, type, row) { 
                    return "<a href='#' class='btn btn-danger' onclick=DeleteProduct('" + row.id + "');>Delete</a>"; 
                }
            }
        ]
    });
});
JavaScript

Şimdi, bir HTML tablo eklememiz gerekiyor.

HTML Tablo Ekle

Statik bir HTML sayfası eklemek için index.cshtml dosyasına aşağıdaki kodu yazın.

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}
<link href="~/lib/datatables/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<div class="container">
    <br />
    <div style="width:90%; margin:0 auto;">
        <table id="productDatatable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Product Name</th>
                    <th>Product Price</th>
                    <th>Product Weight</th>
                    <th>Product Description</th>
                    <th>Product Manufacturing Date</th>
                    <th>Product Expiry Date</th>
                    <th>Actions</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@section Scripts {
    <script src="~/lib/datatables/js/jquery.dataTables.min.js"></script>
    <script src="~/lib/datatables/js/dataTables.bootstrap4.min.js"></script>
    <script src="~/js/ProductDatatable.js"></script>
}
Text

Kontrolcüyü eklememiz gerekiyor.

Ürün Kontrolcüsü Ekle

Uç nokta oluşturmak ve doğrudan çekme istekleri yapmak için Ürün Kontrolcüsü ekleyin.

[Route("api/[controller]")]
[ApiController]
public class ProductController : ControllerBase
{
    private readonly ApplicationDBContext context;
    public ProductController(ApplicationDBContext context)
    {
        this.context = context;
    }

    [HttpPost]
    public IActionResult GetProducts()
    {
        try
        {
            var draw = Request.Form["draw"].FirstOrDefault();
            var start = Request.Form["start"].FirstOrDefault();
            var length = Request.Form["length"].FirstOrDefault();
            var searchValue = Request.Form["search[value]"].FirstOrDefault();
            int pageSize = length != null ? Convert.ToInt32(length) : 0;
            int skip = start != null ? Convert.ToInt32(start) : 0;
            int recordsTotal = 0;
            var productData = context.Products.ToLis();

            // Filtering data based on provided search value
            if (!string.IsNullOrEmpty(searchValue))
            {
                productData = productData.Where(m => m.ProductName.Contains(searchValue)
                                            || m.ProductDescription.Contains(searchValue)
                                            || m.Id.ToString().Contains(searchValue)).ToList();
            }
            
            recordsTotal = productData.Count();
            var data = productData.Skip(skip).Take(pageSize).ToList();
            var jsonData = new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data };
            return Ok(jsonData);
        }
        catch (Exception)
        {
            throw;
        }
    }
}

Burada, sunucu tarafında sayfalama ve arama işlemlerini gerçekleştirdik.

Şimdi veri tabanımızı ayarlamamız ve Program.cs sınıfına yapılandırma eklememiz gerekiyor. .NET 5 veya daha düşük bir sürüm kullanıyorsanız, bunu Startup.cs sınıfında yapmanız gerekebilir.

Öncelikle, appsettings.json dosyasına aşağıdaki Bağlantı Dizesini ekleyin.

"ConnectionStrings": {
   "ProductDB": "Server=localserver\\SQLEXPRESS;Database=ProductDB;Trusted_Connection=True;MultipleActiveResultSets=true;TrustServerCertificate=True;"
}
JSON

Şimdi Program.cs sınıfına aşağıdaki kodu ekleyin.

public static void Main(string[] args)
{
    var builder = WebApplication.CreateBuilder(args);
    builder.Services.AddDbContext<ApplicationDBContext>(options =>
    {
         options.UseSqlServer(builder.Configuration.GetConnectionString("ProductDB"));
    });
    builder.Services.AddControllers();
    // Add services to the container.
    builder.Services.AddRazorPages();
    var app = builder.Build();
    // Configure the HTTP request pipeline.
    if (!app.Environment.IsDevelopment())
    {
         app.UseExceptionHandler("/Error");
         // The default HSTS value is 30 days.
         app.UseHsts();
    }
    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseRouting();
    app.UseAuthorization();
    app.MapControllers();
    app.MapRazorPages();
    app.Run();
}

Koddan ilk yaklaşımı kullandığımızdan, göçü başlatmalıyız.

Paket Yöneticisi Konsolu'nda aşağıdaki komutu çalıştırın.

Add-Migration init
SHELL

Yukarıdaki komut bir göç oluşturacaktır. Şimdi bu göçleri veri tabanımıza uygulamamız gerekiyor. Paket Yöneticisi Konsolu'nda aşağıdaki komutu çalıştırın.

Update-Database
SHELL

Yukarıdaki komut veri tabanımıza tablolar oluşturacaktır. Product Tablosuna sahte veri ekleyin; Mockaroo üzerinden rastgele veri üretebilirsiniz.

Şimdi, bu uygulamayı derleyin ve çalıştırın.

Çıktı

Çok etkileşimli bir kullanıcı arayüzüne sahip olunduğunu görebiliriz, gelişmiş etkileşim kontrolleri ile.

DataTables.NET (Geliştirici İçin Nasıl Çalışır): Şekil 2 - Çıktı

Şimdi, sunucu tarafında bir sayfalama uygulandığını gösterildiği gibi gösterelim.

DataTables.NET (Geliştirici İçin Nasıl Çalışır): Şekil 3 - Sayfalandırma

Çıktı Kullanıcı Arayüzü

Sonuç olarak, zengin Kullanıcı Arayüzü Kontrolü ile İstemci Tarafında sunulmaktadır.

DataTables.NET (Geliştirici İçin Nasıl Çalışır): Şekil 4 - UI

DataTables.NET belgelerini keşfetmek için daha fazlasını keşfedebilirsiniz.

IronXL Tanıtımı

IronXL - .NET için Excel Kütüphanesi, .NET uygulamalarında Excel dosyaları ile çalışmanıza olanak tanıyan bir kütüphanedir. Excel elektronik tabloları oluşturabilir, CSV dosyalarını okuyabilir, Excel dosyalarını düzenleyebilir ve çeşitli formatlarda, XLS, XLSX, CSV, TSV gibi Excel'e dışa aktarabilir. Microsoft Office veya Excel Interop'un yüklü olması gerekmez. .NET 8, 7, 6, 5, Core, Framework ve Azure'u destekler.

Genellikle verileri Excel veya CSV dosyalarına aktarma gereksinimimiz vardır. Bu durumda IronXL en iyi seçenektir. Şimdi, verimizi Excel dosyasına aktarmak için bir kod yazalım.

IronXL Yükle

IronXL kütüphanesini projemize kurmak için Paket Yöneticisi Konsolu'nda aşağıdaki komutu yazın.

PM > Install-Package IronPdf

Bu, projemize IronXL ve gerekli bağımlılıklarını kuracaktır.

Veriyi Excel'e Aktarın

Ürün listemizi bir Excel dosyasına dönüştürmek için bir kod yazalım.

public void ExportToExcel(List<Product> productList)
{
    WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX); // Create a new workbook instance
    WorkSheet ws = wb.DefaultWorkSheet; // Access the default worksheet
    int rowCount = 1;

    // Iterate over the product list and fill the worksheet
    foreach (Product product in productList)
    {
        ws["A" + rowCount].Value = product.Id.ToString();
        ws["B" + rowCount].Value = product.ProductName;
        ws["C" + rowCount].Value = product.ProductDescription;
        ws["D" + rowCount].Value = product.ProductPrice;
        ws["E" + rowCount].Value = product.ProductWeight;
        ws["F" + rowCount].Value = product.ProductManufacturingDate;
        ws["G" + rowCount].Value = product.ProductExpiryDate;
        rowCount++;
    }
    wb.SaveAs("product.xlsx"); // Save the workbook as an Excel file
}

Listeden çok basit ve kolay bir şekilde bir Excel dosyası oluşturduk.

DataTables.NET (Geliştirici İçin Nasıl Çalışır): Şekil 5 - Excel Çıktı

IronXL, XLSX dosyaları oluşturmak için kapsamlı öğreticiler, Excel okuma kod örnekleri ve API belgeleri sunarak kapsamlı API'sini en iyi şekilde kullanmanıza olanak tanır.

ASP.NET performansını optimize etmede, yalın ve verimli bir geliştirme ortamını sağlamak için yalnızca Çekirdek Yazılıma tamamen güvenir. DataTables.NET'i yerel olarak barındırılan paketler olarak kullanmak, harici bağımlılıkları en aza indirerek ve excel verilerini dışa aktarımını kolaylaştırarak yanıt verme hızını daha da geliştirir. Bu optimize edilmiş ve kendine yeterli ekosistem içinde etkili bir şekilde kod katkısı yapmak ayrıca sorunsuz hale gelir.

IronPDF, web sayfalarını, URL'leri ve HTML'yi PDF belgelerine dönüştürmek için tasarlanmış bir çözümdür. Oluşturulan PDF'ler, kaynak web sayfalarının orijinal biçimlendirme ve stilistik unsurlarını korur. Bu araç, özellikle web tabanlı içerikler raporları ve faturalandırmaları PDF rendisyonları oluşturmak için etkilidir.

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

Sonuç

Özetle, ASP.NET dağıtım repo projelerinde sunucu-tabanlı işlemeyi DataTables.NET ile kullanmak, büyük veri setlerini etkili bir şekilde yönetmek için iyi bir strateji olduğu ortaya çıkmaktadır. Bu yaklaşım, veri kullanımını yönetilebilir parçalarda ileterek optimize edilmiş performansı garanti ederken, bant genişliği kullanımını azaltır ve kullanıcı deneyimini geliştirir. IronXL'nin entegrasyonu ayrıca uygulamanın yeteneklerini genişletir ve kapsamlı veri analizi ve raporlama için tablosal verileri Excel'e zahmetsizce dışa aktarma olanağını sağlar.

Bu teknolojileri benimseyerek, geliştiriciler büyük veri setlerinin bulunduğu senaryolarda kullanıcıya sorunsuz ve hızlı bir deneyim sunarken, kaynak verimliliği ile zengin etkileşim arasında bir denge kuran web uygulamaları oluşturabilirler. IronXL, geliştiricilerin, projelerin ve yeniden dağıtım ihtiyaçlarının sayısına göre birkaç IronXL lisans seçeneği sunmaktadır. Lisanslar süresizdir ve ücretsiz destek ve güncellemeler içerir.

Jacob Mellor, Teknoloji Direktörü @ Team Iron
Teknoloji Direktörü

Jacob Mellor, Iron Software'de Baş Teknoloji Yöneticisidir ve C# PDF teknolojisinde öncü bir mühendisdir. Iron Software'ın ana kod tabanının ilk geliştiricisi olarak, CEO Cameron Rimington ile birlikte şirketin ürün mimarisini 50'den fazla kişilik bir şirkete dönüştürmüştür ve NASA, Tesla ve dünya genelindeki devlet kurumlarına hizmet etmektedir.

...
Daha Fazla Oku

İlgili Makaleler

Key in blue circle

Ücretsiz 30 günlük Deneme Anahtarınızı anında edinin.

Your trial license will be sent to your email address

Herhangi bir sınırlama yoktur. %100 erişim. Kredi kartı gerekmez.

bullet_checkedKredi kartı veya hesap oluşturma gerektirmezHerhangi bir sınırlama yoktur. %100 erişim. Kredi kartı gerekmez.
  • Logo Aetna
  • Logo NASA
  • Logo GE
  • Logo Porsche
  • Logo USDA
  • Logo Qatar
Join Millions of Engineers who’ve tried IronPDF
Ücretsiz Canlı Demo rezervasyonu yapın
Booking Badge

Dünya Çapında Milyonlarca Mühendisin Güvendiği

Iron Software müşteri logoları
Bağımsız Danışmanlık Alın
Aşağıdaki formu doldurun veya sales@ironsoftware.com adresine e-posta gönderin
Bilgileriniz daima gizli kalacaktır.
Dünya Çapında Milyonlarca Mühendisin Güvendiği
Iron Software müşteri logoları
Ücretsiz 30 Günlük Deneme Anahtarınızı anında alın.
Kredi kartı veya hesap oluşturma gerektirmez