Prezentacja danych jest kluczowym aspektem tworzenia stron internetowych, a w przypadku danych tabelarycznych niezbędna jest interaktywna i bogata w funkcje tabela. jQuery DataTables to potężna biblioteka JavaScript, która zapewnia zaawansowane funkcje do tworzenia dynamicznych i responsywnych tabel. W tym artykułe omówimy, jak zintegrować i używać jQuery DataTables w aplikacji internetowej ASP.NET w celu ulepszenia prezentacji danych tabelarycznych.
jQuery DataTables to lekka, elastyczna i bogata w funkcje wtyczka jQuery do obsługi danych tabelarycznych. Oferuje szeroki zakres funkcji, takich jak sortowanie, wyszukiwanie i paginacja, co czyni go idealnym wyborem do prezentowania dużych zbiorów danych w przyjazny dla użytkownika sposób.
W przetwarzaniu po stronie klienta przeglądarka ma możliwość obsługi zbioru danych lokalnie. jQuery DataTables, dzięki swoim zaawansowanym funkcjom, umożliwia dynamiczną interakcję i manipulację danymi bezpośrednio w przeglądarce użytkownika. Chociaż podejście to sprawdza się bez zarzutu w przypadku mniejszych zbiorów danych, może napotkać trudności podczas obsługi rozległych zbiorów danych ze względu na potencjalne wąskie gardła wydajnościowe i zwiększone zużycie zasobów.
W tym artykułe omówimy przetwarzanie po stronie klienta w aplikacji ASP.NET Razor Page, podkreślając zalety, jakie oferuje ono w przypadku mniejszych zbiorów danych, oraz przedstawiając potencjalne kwestie do rozważenia i optymalizacje zapewniające płynne i responsywne doświadczenie użytkownika.
W tym artykułe wykorzystamy aplikację internetową ASP.NET Razor Page przeznaczoną dla platformy .NET Framework 4.8. W zależności od potrzeb można użyć Blazor, MVC lub Web Forms.
W niniejszym artykułe zostanie zastosowane podejście "Code-First". Możesz skorzystać z podejścia Database First, jeśli wolisz. Aby korzystać z podejścia Code First, musimy zainstalować następujące pakiety.
Zainstaluj powyższe pakiety, używając polecenia Install-Package z konsoli Menedżera pakietów NuGet lub zainstaluj je z rozwiązania Menedżera pakietów NuGet, wyszukując je.
Skonfigurujmy nasz projekt, dodając klasę Model, klasę ApplicationDbContext, kontroler, ciąg połączenia oraz konfigurację usług w pliku Program.cs.
Używam klasy modelu Employee w tym przykładzie. Możesz z niego korzystać zgodnie ze swoimi wymaganiami.
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 ClassMusimy dodać klasę ApplicationDbContext, aby skonfigurować Entity Framework.
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 ClassDodaj EmployeeController do tworzenia punktu końcowego.
[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 ClassTutaj używamy metody HttpGet, ponieważ pobieramy kompletne dane z serwera po stronie klienta i wdrażamy paginację, wyszukiwanie i sortowanie po stronie klienta. Zwracamy tablicę JSON, która zostanie wyrenderowana po stronie klienta.
Dodaj następujący ciąg połączenia do pliku appsettings.json.
"ConnectionStrings": {
"EmployeeDB": "Server=localserver\\SQLEXPRESS;Database=EmployeeDB;Trusted_Connection=True;MultipleActiveResultSets=true;TrustServerCertificate=True;"
}Dodaj następującą linię w klasie Program.cs pod linią webApplication.CreateBuilder(), aby połączyć się z SQL Server.
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)Kolejnym krokiem jest przeprowadzenie migracji, ponieważ stosujemy podejście Code First. Uruchom następujące polecenie w konsoli menedżera pakietów.
Add-Migration initTo polecenie utworzy migrację. Teraz uruchom następujące polecenie, aby zastosować tę migrację do bazy danych.
update-databaseTeraz, gdy nasz projekt jest już skonfigurowany, a baza danych gotowa, wystarczy dodać bibliotekę jQuery i tabele HTML, aby przygotować interfejs użytkownika. W tym przykładzie jako źródło danych wykorzystaliśmy SQL Server, ale można użyć dowolnej innej bazy danych.
Musimy dodać do naszego projektu bibliotekę jQuery DataTables, która jest wtyczką rozszerzającą możliwości tabel dla biblioteki JavaScript jQuery. Możemy ją dodać, klikając prawym przyciskiem myszy na projekt, wybierając "Dodaj", a następnie "Dodaj bibliotekę po stronie klienta". Pojawi się małe okienko, w którym możemy wyszukać "jquery datatables" i zainstalować je, jak pokazano poniżej:
Dodajmy tabelę HTML z pustym treścią. Dodamy wymagane nagłówki kolumn podczas konfiguracji jQuery DataTable. Dodaj poniższy kod do pliku Index.cshtml.
@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>
}Musimy dodać plik EmployeeDatatable.js w folderze wwwroot/Js. W tym pliku znajdziemy wywołanie Ajax oraz zaawansowane funkcje jQuery DataTable, takie jak filtrowanie, paginacja, wyszukiwanie, sortowanie itp.
Stwórz plik EmployeeDatatable.js w folderze wwwroot/Js. Dodaj następujący kod.
$(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 }
]
});
});Wykorzystaliśmy bogatą w funkcje bibliotekę jQuery DataTables. Ta potężna wtyczka jQuery pozwala nam wdrażać zaawansowane funkcje po stronie klienta przy minimalnym wysiłku.
Teraz skompiluj i uruchom tę aplikację.
Widzimy, że dzięki jQuery w ASP.NET mamy gotowy, bardzo interaktywny interfejs użytkownika. Wyświetlane dane są następujące:
Obecnie paginacja jest realizowana po stronie klienta, dlatego kompletne dane są wysyłane z serwera, jak pokazano poniżej:
Możemy wyszukiwać, sortować i zmieniać stronę, a wszystko to będzie wykonywane po stronie klienta, jak pokazano poniżej:
IronXL dla .NET Excel File Manipulation to biblioteka umożliwiająca pracę z plikami Excel w aplikacjach .NET. Umożliwia tworzenie, odczytywanie, edytowanie i zapisywanie dokumentów Excel w różnych formatach, takich jak XLS, XLSX, CSV i TSV. Nie wymaga instalacji pakietu Microsoft Office ani interfejsu Excel Interop. Obsługuje .NET 5, .NET Core, Framework i Azure.
Często mamy potrzebę eksportowania danych do plików Excel lub CSV. W tym przypadku najlepszym wyborem jest IronXL. Teraz napiszemy kod, aby wyeksportować nasze dane do pliku Excel.
Zainstaluj bibliotekę IronXL w swoim projekcie, wpisując następujące polecenie w konsoli menedżera pakietów.
Spowoduje to zainstalowanie IronXL i wymaganych zależności w naszym projekcie. Można go również pobrać bezpośrednio z pakietu IronXL NuGet.
Napiszmy kod, aby przekonwertować naszą listę pracowników do pliku Excel.
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 SubW prosty i łatwy sposób stworzyliśmy plik Excel na podstawie listy.
IronXL udostępnia obszerne samouczki dotyczące tworzenia plików XLSX, przykłady kodu do odczytu plików Excel oraz szczegółową dokumentację, która pomoże Ci jak najlepiej wykorzystać jego rozbudowane API.
Podsumowując, jQuery DataTables stało się potężnym narzędziem do przekształcania prezentacji danych tabelarycznych w aplikacjach internetowych ASP.NET. Jego lekkość i bogactwo funkcji ułatwia tworzenie interaktywnych tabel, kładąc nacisk na sortowanie, wyszukiwanie i paginację. Zbadaliśmy niuanse przetwarzania po stronie klienta, wykorzystując możliwości przeglądarki w przypadku mniejszych zbiorów danych, jednocześnie uwzględniając potencjalne wyzwania związane z większymi ilościami danych. Przewodnik krok po kroku dotyczący konfiguracji aplikacji ASP.NET Razor Page i integracji jQuery DataTables dostarcza programistom praktycznych wskazówek. Ponadto wprowadzenie IronXL jako płynnego rozwiązania do zadań związanych z Excelem stanowi cenne uzupełnienie zestawu narzędzi, umożliwiając wydajny eksport danych. Dzięki tym narzędziom programiści mogą poprawić komfort użytkowania, prezentując dane w atrakcyjny i przystępny sposób.
IronXL oferuje różne opcje licencyjne w zależności od liczby programistów, projektów i potrzeb związanych z redystrybucją. Licencje są bezterminowe i obejmują bezpłatną pomoc techniczną oraz aktualizacje.
Jacob Mellor jest Chief Technology Officer w Iron Software i wizjonerskim inżynierem, pionierem technologii C# PDF. Jako pierwotny deweloper głównej bazy kodowej Iron Software, kształtuje architekturę produktów firmy od jej początku, przekształcając ją wspólnie z CEO Cameron Rimington w firmę liczącą ponad 50 osób, obsługującą NASA, Teslę i światowe agencje rządowe.
IronPDF jest częścią IRONSUITE
10 produktów API .NET dla twoich dokumentów biurowych
Kiedy potrzebujesz, aby twój PDF wyglądał jak HTML, szybko.
