ライブ環境でテストする
ウォーターマークなしで本番環境でテストしてください。
必要な場所でいつでも動作します。
完全に機能する製品
30日間のフル機能製品をお試しください。
数分で稼働させることができます。
24/5 テクニカルサポート
製品トライアル期間中にサポートエンジニアリングチームへの完全アクセス
.NET ヘルプ
Jqueryデータテーブル（開発者向けの使い方）
更新済み 1月 27, 2024
データプレゼンテーションはウェブ開発において重要な側面であり、特に表形式のデータを扱う場合、インタラクティブで機能豊富なテーブルは不可欠です。 jQuery DataTablesは、動的でレスポンシブなテーブルを作成するための高度な機能を提供する強力なJavaScriptライブラリです。 本記事では、jQuery DataTablesの統合と使用方法について説明します。 ASP.NET 表形式のデータの提示を強化するためのウェブアプリケーション。
ASP.NETウェブアプリでjQuery DataTablesを使用する方法
-
ウェブアプリケーションを作成または開く
-
Entity Framework パッケージをインストールします。
-
モデル、DBコンテキスト、およびコントローラーを追加します。
-
データベース接続文字列を追加し、設定を行います。
-
移行の追加とデータベースの更新。
-
jQuery DataTablesのクライアントサイドライブラリを追加する。
-
HTMLテーブルとJavaScriptコードを追加します。
-
アプリケーションを構築して実行します。
- データをエクスポートするために IronXL を使用する IronXL.
jQuery DataTablesとは何ですか？
jQuery DataTablesは、表形式のデータを扱うための軽量で柔軟かつ多機能なjQueryプラグインです。 これは、並べ替え、検索、ページネーションなどの幅広い機能を提供しており、大規模なデータセットをユーザーフレンドリーな形で表示するための理想的な選択肢です。
クライアントサイド処理
クライアントサイド処理では、ブラウザにデータセットをローカルで処理する権限が与えられます。 jQuery DataTablesは、その強力な機能によって、ユーザーのブラウザ内でデータの動的なインタラクションおよび操作を可能にします。 このアプローチは小規模なデータセットに対しては円滑に機能する一方で、かなり大規模なデータセットに対してはパフォーマンスのボトルネックやリソース消費の増加により課題に直面する可能性があります。
この記事では、ASP.NET Razor Page アプリケーションにおけるクライアントサイド処理について詳しく説明します。小規模データセットに対する利点を強調し、ユーザー体験のスムーズさと応答性を確保するための考慮事項や最適化についての洞察を提供します。
ASP.NET WebアプリケーションでjQuery DataTablesを使い始める
この記事では、.NET Framework 4.8をターゲットにしたASP.NET RazorページWebアプリケーションを使用します。必要に応じて、Blazor、MVC、またはWebフォームを使用することができます。
この記事では、コードファーストアプローチを使用します。 ご希望に応じて、データベースファーストアプローチを使用することができます。 コードファーストアプローチを使用するために、次のパッケージをインストールする必要があります。
-
Microsoft.EntityFrameworkCore
-
マイクロソフト.EntityFrameworkCore.Design
-
Microsoft.EntityFrameworkCore.SqlServer
-
Microsoft.EntityFrameworkCore.Tools（マイクロソフト エンティティ フレームワーク コア ツールズ）
上記のパッケージは、NuGet パッケージ マネージャー コンソールから
Install-Packageコマンドを使用してインストールするか、NuGet パッケージ マネージャー ソリューションから検索してインストールしてください。プロジェクトのセットアップを行いましょう。Modelクラス、ApplicationDBContextクラス、Controller、接続文字列、そしてProgram.csにサービスの構成を追加します。
モデルクラスを追加
この例では、Employeeモデルクラスを使用しています。要件に応じて使用してください。
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
VB
C#
ApplicationDbContextクラスを追加
エンティティフレームワークを設定するために、ApplicationDbContextクラスを追加する必要があります。
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
VB
C#
従業員コントローラーを追加
エンドポイントを作成するために EmployeeController を追加してください。
[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)
{
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)
{
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
Throw
End Try
End Function
End Class
VB
C#
ここでは、クライアント側でサーバーから完全なデータを取得し、ページネーション、検索、およびソートをクライアント側で実装するために HttpGet メソッドを使用しています。我々はクライアント側でレンダリングされる JSON 配列を返しています。
接続文字列を追加
appsettings.json ファイルに次の接続文字列を追加してください。
"ConnectionStrings": {
"EmployeeDB": "Server=localserver\\SQLEXPRESS;Database=EmployeeDB;Trusted_Connection=True;MultipleActiveResultSets=true;TrustServerCertificate=True;"
}次の行を Program.cs クラスの webApplication.CreateBuilder の下に追加します。()SQL Server と接続するための行。
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)
VB
C#
移行を実行する
次のステップは、Code Firstアプローチを使用しているため、マイグレーションを実行することです。 パッケージマネージャーコンソールで次のコマンドを実行してください。
Add-Migration initこのコマンドはマイグレーションを作成します。 次に、このマイグレーションをデータベースに適用するために以下のコマンドを実行します。
update-databaseプロジェクトが設定され、データベースが準備できたので、jQueryライブラリとHTMLテーブルを追加するだけでUIが完成します。 この例ではデータソースとしてSQL Serverを使用していますが、他のデータベースを使用することもできます。
jQuery DataTablesライブラリを追加
我々はプロジェクトにjQuery DataTablesライブラリを追加する必要があります。これはjQuery JavaScriptライブラリのためのテーブル拡張プラグインです。 これを追加するには、プロジェクトを右クリックし、「追加」を選択し、「クライアントサイドライブラリの追加」を選択します。 以下のように「jquery datatables」を検索してインストールできる小さなウィンドウが表示されます:
HTML テーブルを追加
HTMLテーブルに空のテーブルボディを追加しましょう。 jQuery DataTableの設定時に必要な列の見出しを追加します。 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>
}wwwroot/Js フォルダーの中に EmployeeDatatable.js ファイルを追加する必要があります。 このファイルでは、Ajax呼び出しとjQuery DataTable の高度な機能、例えばフィルタリング、ページネーション、検索、ソートなどを使用します。
EmployeeDatatable.js ファイルを作成する
wwwroot/Jsフォルダーの中にEmployeeDatatable.jsファイルを作成してください。 次のコードを追加してください。
$(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 }
]
});
});
JAVASCRIPT
私たちは、機能が豊富なjQuery DataTablesライブラリを利用しました。 この強力なjQueryプラグインにより、クライアント側で高度な機能を簡単に実装できます。
では、このアプリケーションを構築して実行してください。
出力
jQueryを使用してASP.NETで非常にインタラクティブなユーザーインターフェイスが準備されていることがわかります。 表示されているデータは以下の通りです:
現在、ページネーションはクライアントサイドで実装されているため、以下のようにサーバーから完全なデータが送信されます。
出力UI
検索、並べ替え、ページの変更はすべて以下に示すようにクライアント側で実行されます。
IronXLの紹介
IronXL は、.NETアプリケーションでExcelファイルを操作できるライブラリです。 さまざまな形式（XLS、XLSX、CSV、TSVなど）でExcel文書を作成、読み取り、編集、保存できます。Microsoft OfficeやExcel Interopのインストールは不要です。 .NET 5、Core、Framework、およびAzureをサポートしています。
データをExcelやCSVファイルにエクスポートする必要があることがよくあります。 この場合、IronXLは最適な選択です。 次に、データをExcelファイルにエクスポートするコードを書きます。
IronXLをインストール
以下のコマンドをパッケージマネージャーコンソールに入力して、プロジェクトにIronXLライブラリをインストールします。
Install-Package IronXL.Excelこれは、IronXLと必要な依存関係をプロジェクトにインストールします。 以下から直接ダウンロードすることもできます これ ダウンロードリンク。
エクスポートデータをExcelに出力
従業員リストをExcelファイルに変換するコードを書きましょう。
public void ExportToExcel(List<Employee> employeeList)
{
WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
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
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++;
}
wb.SaveAs("Employee.xlsx");
}public void ExportToExcel(List<Employee> employeeList)
{
WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
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
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++;
}
wb.SaveAs("Employee.xlsx");
}Public Sub ExportToExcel(ByVal employeeList As List(Of Employee))
Dim wb As WorkBook = WorkBook.Create(ExcelFileFormat.XLSX)
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
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
wb.SaveAs("Employee.xlsx")
End Sub
VB
C#
私たちはシンプルで簡単な方法でリストからExcelファイルを作成しました。
IronXLは、包括的な チュートリアル, コード例、および ドキュメント 包括的なAPIを最適に活用するために役立ちます。
結論
結論として、jQuery DataTablesはASP.NETウェブアプリケーションにおける表形式データの表示を一新する強力なツールとして浮上しています。 軽量ながらも豊富な機能を備えた特性により、インタラクティブなテーブルの作成が容易になり、並べ替え、検索、およびページネーションが前面に出てきます。 私たちはクライアントサイド処理の微妙な点を探り、ブラウザの機能を小さなデータセットに活用する一方で、大容量データに対する潜在的な課題も認識しました。 ASP.NET Razor Pageアプリケーションを設定し、jQuery DataTablesを統合するためのステップバイステップガイドは、開発者に実践的な洞察を提供します。 さらに、Excel関連のタスクに対するシームレスなソリューションとしてのIronXLの導入により、効率的なデータエクスポートを可能にする貴重なツールが追加されました。 これらのツールを使用することで、開発者はデータを魅力的かつアクセスしやすい形で提示し、ユーザーエクスペリエンスを向上させることができます。
IronXLは、開発者の数、プロジェクトの数、および再配布のニーズに応じて、さまざまなライセンスオプションを提供しています。 ライセンスは永久的であり、無料のサポートおよびアップデートが含まれています。
