Jquery Datatable (Geliştiriciler İçin Nasıl Çalışır)
Veri sunumu, web geliştirmesinin kritik bir yönüdür ve tablosal verilerle uğraşırken, etkileşimli ve zengin özelliklere sahip bir tabloya sahip olmak esastır. jQuery DataTables, dinamik ve duyarlı tablolar oluşturma konusunda gelişmiş işlevsellik sunan güçlü bir JavaScript kütüphanesidir. Bu makalede, jQuery DataTables kütüphanesini bir ASP.NET web uygulamasına nasıl entegre edip kullanabileceğimizi keşfedeceğiz.
Bir ASP.NET Web Uygulamasında jQuery DataTables Nasıl Kullanılır?
- Web Uygulaması Oluşturun veya Açın.
- Entity Framework Paketlerini Yükleyin.
- Model, DB Bağlamı ve Denetleyici Ekleyin.
- DB Bağlantı Dizesi ve Kurulum Yapılandırmasını Ekleyin.
- Geçiş Ekleyin ve Veritabanını Güncelleyin.
- jQuery DataTables'ın İstemci Tarafı Kütüphanesini Ekleyin.
- HTML tablosu ve JavaScript kodu ekleyin.
- Uygulamayı oluşturun ve çalıştırın.
- IronXL kullanarak verileri Excel'e aktarın.
jQuery DataTables Nedir?
jQuery DataTables, tablo verilerini işlemek için hafif, esnek ve zengin özelliklere sahip bir jQuery eklentisidir. Büyük veri setlerini kullanıcı dostu bir şekilde sunmak için sıralama, arama ve sayfalandırma gibi geniş bir işlev yelpazesi sunar.
İstemci Tarafı İşleme
İstemci tarafı işleme sırasında, tarayıcı, veri kümesini yerel olarak işleyecek şekilde yetkilendirilmiştir. jQuery DataTables, güçlü özellikleri sayesinde, kullanıcının tarayıcısı içinde verilerle dinamik etkileşim ve manipülasyon imkanı sağlar. Bu yaklaşım daha küçük veri kümeleri için sorunsuz çalışırken, potansiyel performans dar boğazları ve artan kaynak tüketimi nedeniyle geniş veri kümeleriyle çalışırken zorluklarla karşılaşabilir.
Bu makalede, daha küçük veri kümeleri için sunduğu avantajları vurgulayan ASP.NET Razor Page uygulamasında istemci tarafı işlemi keşfedeceğiz ve pürüzsüz ve duyarlı bir kullanıcı deneyimi sağlamak için potansiyel değerlendirmeler ve iyileştirmeler hakkında bilgiler sağlayacağız.
ASP.NET Web Uygulamasında jQuery DataTables ile Başlarken
Bu makalede .NET Framework 4.8'i hedef alan bir ASP.NET Razor Page Web Uygulaması kullanılacaktır. İhtiyacınıza göre Blazor, MVC veya Web Forms kullanabilirsiniz.
Bu makalede Code-First Yaklaşımı kullanılacaktır. Tercihinize göre Database First Yaklaşımı da kullanabilirsiniz. Code First Yaklaşımını kullanmak için aşağıdaki paketleri yüklememiz gerekiyor.
- Microsoft.EntityFrameworkCore
- Microsoft.EntityFrameworkCore.Design
- Microsoft.EntityFrameworkCore.SqlServer
- Microsoft.EntityFrameworkCore.Tools
Yukarıdaki paketleri, NuGet Paket Yöneticisi Konsolu'ndan Install-Package komutunu kullanarak veya NuGet Paket Yöneticisi çözümünden arama yaparak kurun.
Model sınıfı, ApplicationDbContext Class, Denetleyici, Bağlantı Dizesi ve Program.cs'de hizmet yapılandırması ekleyerek projemizi ayarlayalım.
Model Sınıfı Ekle
Bu örnek için Employee model sınıfını kullanıyorum. İhtiyacınıza göre kullanabilirsiniz.
public class Employee
{
public int Id { get; set; }
public string FirstName { get; set; } = string.Empty;
public string LastName { get; set; } = string.Empty;
public string Email { get; set; } = string.Empty;
public string PhoneNumber { get; set; } = string.Empty;
public string Gender { get; set; } = string.Empty;
public string Designation { get; set; } = string.Empty;
}
public class Employee
{
public int Id { get; set; }
public string FirstName { get; set; } = string.Empty;
public string LastName { get; set; } = string.Empty;
public string Email { get; set; } = string.Empty;
public string PhoneNumber { get; set; } = string.Empty;
public string Gender { get; set; } = string.Empty;
public string Designation { get; set; } = string.Empty;
}
Public Class Employee
Public Property Id() As Integer
Public Property FirstName() As String = String.Empty
Public Property LastName() As String = String.Empty
Public Property Email() As String = String.Empty
Public Property PhoneNumber() As String = String.Empty
Public Property Gender() As String = String.Empty
Public Property Designation() As String = String.Empty
End Class
ApplicationDbContext Sınıfı Ekleme
Entity Framework kurulumunu yapmak için ApplicationDbContext sınıfını eklememiz gerekiyor.
public class ApplicationDbContext : DbContext
{
public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options)
{
}
public DbSet<Employee> Employees { get; set; }
}
public class ApplicationDbContext : DbContext
{
public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options)
{
}
public DbSet<Employee> Employees { get; set; }
}
Public Class ApplicationDbContext
Inherits DbContext
Public Sub New(ByVal options As DbContextOptions(Of ApplicationDbContext))
MyBase.New(options)
End Sub
Public Property Employees() As DbSet(Of Employee)
End Class
Çalışan Denetleyicisi Ekleme
Uç noktayı oluşturmak için EmployeeController ekleyin.
[Route("api/[controller]")]
[ApiController]
public class EmployeeController : ControllerBase
{
private readonly ApplicationDbContext _context;
public EmployeeController(ApplicationDbContext context)
{
_context = context;
}
[HttpGet]
public IActionResult GetEmployees()
{
try
{
var employeeData = _context.Employees.ToList();
var jsonData = new { data = employeeData };
return Ok(jsonData);
}
catch (Exception ex)
{
// Log exception here
throw;
}
}
}
[Route("api/[controller]")]
[ApiController]
public class EmployeeController : ControllerBase
{
private readonly ApplicationDbContext _context;
public EmployeeController(ApplicationDbContext context)
{
_context = context;
}
[HttpGet]
public IActionResult GetEmployees()
{
try
{
var employeeData = _context.Employees.ToList();
var jsonData = new { data = employeeData };
return Ok(jsonData);
}
catch (Exception ex)
{
// Log exception here
throw;
}
}
}
<Route("api/[controller]")>
<ApiController>
Public Class EmployeeController
Inherits ControllerBase
Private ReadOnly _context As ApplicationDbContext
Public Sub New(ByVal context As ApplicationDbContext)
_context = context
End Sub
<HttpGet>
Public Function GetEmployees() As IActionResult
Try
Dim employeeData = _context.Employees.ToList()
Dim jsonData = New With {Key .data = employeeData}
Return Ok(jsonData)
Catch ex As Exception
' Log exception here
Throw
End Try
End Function
End Class
Burada, sunucudan alınan verileri istemci tarafında tam olarak geri alacağımız ve istemci tarafında sayfalama, arama ve sıralama işlemlerini uygulayacağımız için HttpGet yöntemini kullanıyoruz. İstemci tarafında render edilecek bir JSON dizisi döndürüyoruz.
Bağlantı Dizesi Ekleme
Bağlantı dizesini appsettings.json dosyasına ekleyin.
"ConnectionStrings": {
"EmployeeDB": "Server=localserver\\SQLEXPRESS;Database=EmployeeDB;Trusted_Connection=True;MultipleActiveResultSets=true;TrustServerCertificate=True;"
}
SQL Server ile bağlantı kurmak için Program.cs sınıfında webApplication.CreateBuilder() satırının altına aşağıdaki satırı ekleyin.
builder.Services.AddDbContext<ApplicationDbContext>(options =>
{
options.UseSqlServer(builder.Configuration.GetConnectionString("EmployeeDB"));
});
builder.Services.AddDbContext<ApplicationDbContext>(options =>
{
options.UseSqlServer(builder.Configuration.GetConnectionString("EmployeeDB"));
});
builder.Services.AddDbContext(Of ApplicationDbContext)(Sub(options)
options.UseSqlServer(builder.Configuration.GetConnectionString("EmployeeDB"))
End Sub)
Geçişi Çalıştırın
Code First Yaklaşımını kullandığımız için bir sonraki adım geçişi çalıştırmak. Paket Yöneticisi Konsolunda aşağıdaki komutu çalıştırın.
Add-Migration init
Add-Migration init
Bu komut bir geçiş oluşturacaktır. Daha sonra bu geçişi veritabanına uygulamak için aşağıdaki komutu çalıştırın.
update-database
update-database
Projemiz ayarlandı ve veritabanı hazır olduğuna göre, jQuery kütüphanesini ve HTML tablolarını ekleyerek kullanıcı arayüzümüzü hazırlamamız gerekiyor. Bu örnekte veri kaynağı olarak SQL Server kullandık, ama başka bir veritabanı kullanabilirsiniz.
jQuery DataTables Kütüphanesi Ekleme
Projemize jQuery JavaScript kütüphanesi için tablo geliştirme eklentisi olan jQuery DataTables kütüphanesini eklememiz gerekiyor. Proje sağ tıklanarak, "Ekle" seçeneği ile ve ardından "İstemci Tarafı Kütüphane Ekle" seçilerek eklenebilir. Aşağıda gösterildiği gibi "jquery datatables" aratılarak yüklenebileceği küçük bir pencere belirecektir:

HTML Tablosu Ekleme
Boş tablo gövdesi ile bir HTML tablosu ekleyelim. jQuery DataTable ayarlarken gerekli sütun başlıklarını ekleyeceğiz. Index.cshtml dosyasına aşağıdaki kodu ekleyin.
@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="employeeDatatable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
</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/EmployeeDatatable.js"></script>
}
wwwroot/Js klasörüne EmployeeDatatable.js dosyasını eklememiz gerekiyor. Bu dosyada, Ajax çağrısı ve jQuery DataTable'ın filtreleme, sayfalandırma, arama, sıralama vb. gelişmiş özellikleri olacaktır.
EmployeeDatatable.js Dosyası Oluşturma
wwwroot/Js klasörüne bir EmployeeDatatable.js dosyası oluşturun. Aşağıdaki kodu ekleyin.
$(document).ready(function () {
$("#employeeDatatable").DataTable({
"processing": true,
"serverSide": false,
"filter": true,
"ajax": {
"url": "/api/Employee",
"type": "GET",
"datatype": "json"
},
"columnDefs": [{
"targets": [0],
"visible": false,
"searchable": false
}],
"columns": [
{ "data": "id", "title": "Employee ID", "name": "Employee ID", "autoWidth": true },
{ "data": "firstName", "title": "First Name", "name": "First Name", "autoWidth": true },
{ "data": "lastName", "title": "Last Name", "name": "Last Name", "autoWidth": true },
{ "data": "email", "title": "Email", "name": "Email", "autoWidth": true },
{ "data": "phoneNumber", "title": "Phone Number", "name": "Phone Number", "autoWidth": true },
{ "data": "gender", "title": "Gender", "name": "Gender", "autoWidth": true },
{ "data": "designation", "title": "Designation", "name": "Designation", "autoWidth": true }
]
});
});
$(document).ready(function () {
$("#employeeDatatable").DataTable({
"processing": true,
"serverSide": false,
"filter": true,
"ajax": {
"url": "/api/Employee",
"type": "GET",
"datatype": "json"
},
"columnDefs": [{
"targets": [0],
"visible": false,
"searchable": false
}],
"columns": [
{ "data": "id", "title": "Employee ID", "name": "Employee ID", "autoWidth": true },
{ "data": "firstName", "title": "First Name", "name": "First Name", "autoWidth": true },
{ "data": "lastName", "title": "Last Name", "name": "Last Name", "autoWidth": true },
{ "data": "email", "title": "Email", "name": "Email", "autoWidth": true },
{ "data": "phoneNumber", "title": "Phone Number", "name": "Phone Number", "autoWidth": true },
{ "data": "gender", "title": "Gender", "name": "Gender", "autoWidth": true },
{ "data": "designation", "title": "Designation", "name": "Designation", "autoWidth": true }
]
});
});
Zengin özelliklere sahip jQuery DataTables kütüphanesi kullanılmıştır. Bu güçlü jQuery eklentisi, istemci tarafında gelişmiş özellikler uygulamamıza minimal çaba ile olanak tanır.
Şimdi, bu uygulamayı birleştirin ve çalıştırın.
Çıktı
jQuery'nin ASP.NET'de yardımıyla çok etkileşimli bir kullanıcı arayüzümüzün hazır olduğunu görebiliriz. Gösterilen veriler şu şekildedir:

Şimdi, sayfa numaralandırması istemci tarafında uygulanmıştır, bu nedenle aşağıda gösterildiği gibi sunucudan tam veri gönderilmektedir:

Çıkış Arayüzü
Arama yapabilir, sıralama yapabilir ve sayfayı değiştirebiliriz, aşağıda gösterildiği gibi tüm işlemler istemci tarafında gerçekleştirilecektir:

IronXL'ye Giriş
IronXL for .NET Excel Dosya Manipülasyonu, .NET uygulamalarında Excel dosyaları ile çalışmanıza olanak tanıyan bir kütüphanedir. XLS, XLSX, CSV ve TSV gibi çeşitli formatlarda Excel belgeleri oluşturabilir, okuyabilir, düzenleyebilir ve kaydedebilir. Microsoft Office veya Excel Interop kurulması gerekmez. .NET 5, Core, Framework ve Azure desteği mevcuttur.
Verileri Excel veya CSV dosyalarına aktarma gereksinimimiz sık sık olur. IronXL bu durumda en iyi seçimdir. Şimdi, verilerimizi bir Excel dosyasına aktarmak için kod yazacağız.
IronXL'yi Yükleyin
Projenizde IronXL kütüphanesini yüklemek için Paket Yöneticisi Konsolu'na aşağıdaki komutu girin.
Install-Package IronPdf
Bu, projemize IronXL ve gerekli bağımlılıkları yükleyecektir. Ayrıca IronXL NuGet Paketi'nden doğrudan indirilebilir.
Verileri Excel'e Aktar
Çalışan Listemizi bir Excel dosyasına dönüştürmek için kod yazalım.
public void ExportToExcel(List<Employee> employeeList)
{
// Create a new workbook instance
WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
// Get the default worksheet
WorkSheet ws = wb.DefaultWorkSheet;
// Add Header Row
ws["A1"].Value = "Employee ID";
ws["B1"].Value = "First Name";
ws["C1"].Value = "Last Name";
ws["D1"].Value = "Designation";
ws["E1"].Value = "Gender";
ws["F1"].Value = "Phone Number";
ws["G1"].Value = "Email";
int rowCount = 2;
// Add Data Rows
foreach (Employee employee in employeeList)
{
ws["A" + rowCount].Value = employee.Id.ToString();
ws["B" + rowCount].Value = employee.FirstName;
ws["C" + rowCount].Value = employee.LastName;
ws["D" + rowCount].Value = employee.Designation;
ws["E" + rowCount].Value = employee.Gender;
ws["F" + rowCount].Value = employee.PhoneNumber;
ws["G" + rowCount].Value = employee.Email;
rowCount++;
}
// Save the workbook as an Excel file
wb.SaveAs("Employee.xlsx");
}
public void ExportToExcel(List<Employee> employeeList)
{
// Create a new workbook instance
WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
// Get the default worksheet
WorkSheet ws = wb.DefaultWorkSheet;
// Add Header Row
ws["A1"].Value = "Employee ID";
ws["B1"].Value = "First Name";
ws["C1"].Value = "Last Name";
ws["D1"].Value = "Designation";
ws["E1"].Value = "Gender";
ws["F1"].Value = "Phone Number";
ws["G1"].Value = "Email";
int rowCount = 2;
// Add Data Rows
foreach (Employee employee in employeeList)
{
ws["A" + rowCount].Value = employee.Id.ToString();
ws["B" + rowCount].Value = employee.FirstName;
ws["C" + rowCount].Value = employee.LastName;
ws["D" + rowCount].Value = employee.Designation;
ws["E" + rowCount].Value = employee.Gender;
ws["F" + rowCount].Value = employee.PhoneNumber;
ws["G" + rowCount].Value = employee.Email;
rowCount++;
}
// Save the workbook as an Excel file
wb.SaveAs("Employee.xlsx");
}
Public Sub ExportToExcel(ByVal employeeList As List(Of Employee))
' Create a new workbook instance
Dim wb As WorkBook = WorkBook.Create(ExcelFileFormat.XLSX)
' Get the default worksheet
Dim ws As WorkSheet = wb.DefaultWorkSheet
' Add Header Row
ws("A1").Value = "Employee ID"
ws("B1").Value = "First Name"
ws("C1").Value = "Last Name"
ws("D1").Value = "Designation"
ws("E1").Value = "Gender"
ws("F1").Value = "Phone Number"
ws("G1").Value = "Email"
Dim rowCount As Integer = 2
' Add Data Rows
For Each employee As Employee In employeeList
ws("A" & rowCount).Value = employee.Id.ToString()
ws("B" & rowCount).Value = employee.FirstName
ws("C" & rowCount).Value = employee.LastName
ws("D" & rowCount).Value = employee.Designation
ws("E" & rowCount).Value = employee.Gender
ws("F" & rowCount).Value = employee.PhoneNumber
ws("G" & rowCount).Value = employee.Email
rowCount += 1
Next employee
' Save the workbook as an Excel file
wb.SaveAs("Employee.xlsx")
End Sub
Listeden basit ve kolay bir şekilde bir Excel dosyası oluşturduk.

IronXL, kapsamlı API'sini en iyi şekilde kullanmanız için kapsamlı XLSX dosyaları oluşturma eğitimi, Excel dosyalarını okuma için kod örnekleri ve detaylı dokümantasyon sağlar.
Sonuç
Sonuç olarak, jQuery DataTables, ASP.NET web uygulamalarında tablosal veri sunumunu dönüştürmek için güçlü bir varlık olarak ortaya çıkmıştır. Hafif ama zengin özellikleri, etkileşimli tabloların oluşturulmasını kolaylaştırır, sıralama, arama ve sayfalandırmayı ön plana getirir. İstemci tarafı işlemenin inceliklerini, daha küçük veri kümeleri için tarayıcının yeteneklerinden yararlanarak, daha büyük veri hacimleriyle potansiyel zorlukları kabul ederek inceledik. ASP.NET Razor Page uygulamasını kurma ve jQuery DataTables'ı entegre etme konusunda adım adım kılavuz, geliştiricilere pratik içgörüler sunar. Ayrıca, Excel ile ilgili görevler için kesintisiz bir çözüm olarak IronXL'nin tanıtılması, araç setine değerli bir katman ekleyerek verimli veri dışa aktarmayı mümkün kılar. Bu araçlarla donatılmış olan geliştiriciler, verileri etkileyici ve erişilebilir bir şekilde sunarak kullanıcı deneyimini yükseltebilir.
IronXL, geliştirici sayısı, proje sayısı ve yeniden dağıtım ihtiyaçlarına bağlı olarak çeşitli lisanslama seçenekleri sunar. Lisanslar süresizdir ve ücretsiz destek ve güncellemeler içerir.
Sıkça Sorulan Sorular
jQuery DataTables, ASP.NET web uygulamalarında veri sunumunu nasıl iyileştirebilir?
jQuery DataTables, sıralama, arama ve sayfalama gibi özellikler sunarak veri sunumunu iyileştirir; bu, kullanıcıların büyük veri kümeleriyle etkileşimini daha kolay ve kullanıcı dostu hale getirir.
ASP.NET Razor Sayfası uygulamasına jQuery DataTables'i entegre etmek için temel adımlar nelerdir?
ASP.NET Razor Sayfası uygulamasına jQuery DataTables'i entegre etmek için modeli, DbContext ve denetleyici ayarlayarak, veritabanı bağlantısını yapılandırarak ve Entity Framework ile Kod-Önce yaklaşımını kullanarak verileri verimli bir şekilde yönetmek için istemci tarafı işlemi uygularsınız.
Büyük veri kümelerini yönetirken sunucu tarafı işleme, jQuery DataTables'e nasıl fayda sağlar?
Sunucu tarafı işleme, jQuery DataTables'e veri işlemlerini sunucuya yükleyerek performansını ve verimliliğini artırır; bu, özellikle büyük veri kümeleriyle ilgilenirken, istemci tarafı işlemenin aksine, veri hacmi arttıkça yavaşlayabilir.
ASP.NET uygulamasından Excel'e veri aktarımında IronXL'nin rolü nedir?
IronXL, veri kümesinden gelen veri satırlarıyla yeni bir çalışma kitabı oluşturarak ve bunu Excel dosyası olarak kaydederek geliştiricilerin verileri Excel'e dışa aktarmasını sağlar. Microsoft Office ihtiyaçı olmadan Excel dosya manipülasyonunu basitleştirir.
.NET uygulamalarında, Microsoft Office olmadan Excel dosyaları ile çalışmak mümkün müdür?
Evet, IronXL, Microsoft Office'ten bağımsız olarak .NET uygulamalarında çeşitli formatları destekleyen Excel dosyalarıyla çalışılmasını sağlar, örneğin XLS, XLSX, CSV ve TSV.
.NET projelerinde IronXL kullanımı için lisanslama seçenekleri nelerdir?
IronXL, geliştirici sayısı, projeler ve dağıtım gereksinimlerine dayalı olarak çeşitli lisanslama seçenekleri sunar. Lisanslar süresizdir ve ücretsiz destek ve güncellemeler içerir.
ASP.NET'te jQuery DataTables ile Kod-Önce yaklaşımının avantajları nelerdir?
ASP.NET'te jQuery DataTables ile Kod-Önce yaklaşımı, veritabanı modeli ve bağlamının kolay kurulumunu ve yapılandırılmasını destekler, dinamik veri yönetimi ve ön uç DataTables ile entegrasyonu sağlar ve etkileşimi artırır.
ASP.NET uygulamasında jQuery DataTables ile ilgili yaygın sorunları nasıl giderebilirsiniz?
jQuery DataTables ile ilgili yaygın sorunlar, script ve stil dosyalarının doğru dahil edildiğinden emin olunması, veri kaynağı yollarının doğrulanması, JavaScript ile ilgili konsol hatalarının kontrol edilmesi ve sunucu tarafı işleminin doğru kurulumunun doğrulanması ile çözülebilir.




