.NET ヘルプ

Jquery Datatable（開発者向けの動作方法）

公開済み 2024年1月27日

共有:

データプレゼンテーションはウェブ開発において重要な側面であり、特に表形式のデータを扱う場合、インタラクティブで機能豊富なテーブルは不可欠です。 jQueryDataTablesは、動的でレスポンシブなテーブルを作成するための高度な機能を提供する強力なJavaScriptライブラリです。本記事では、jQuery DataTablesの統合と使用方法について説明します。ASP.NET表形式のデータの提示を強化するためのウェブアプリケーション。

ASP.NETウェブアプリでjQuery DataTablesを使用する方法

ウェブアプリケーションを作成または開く
Entity Framework パッケージをインストールします。
モデル、DBコンテキスト、およびコントローラーを追加します。
データベース接続文字列を追加し、設定を行います。
移行の追加とデータベースの更新。
jQuery DataTablesのクライアントサイドライブラリを追加する。
HTMLテーブルとJavaScriptコードを追加します。
アプリケーションを構築して実行します。
データをエクスポートするために IronXL を使用するIronXL.Excel 操作用.

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
Microsoft.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」を検索してインストールできる小さなウィンドウが表示されます:

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 }
        ]
    });
});

$(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で非常にインタラクティブなユーザーインターフェイスが準備されていることがわかります。表示されているデータは以下の通りです:

jQuery DataTables の出力

現在、ページネーションはクライアントサイドで実装されているため、以下のようにサーバーから完全なデータが送信されます。

ページネーション

出力UI

検索、並べ替え、ページの変更はすべて以下に示すようにクライアント側で実行されます。

出力UI

IronXLの紹介

IronXL for .NET Excelファイル操作用は、.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と必要な依存関係をプロジェクトにインストールします。以下から直接ダウンロードすることもできますIronXL NuGetパッケージ.

エクスポートデータを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ファイルを作成しました。

出力Excelファイル

IronXLは、包括的なXLSXファイルの作成に関するチュートリアル, Excelファイルを読むためのコード例、および詳細なドキュメント包括的なAPIを最適に活用するために役立ちます。

結論

結論として、jQuery DataTablesはASP.NETウェブアプリケーションにおける表形式データの表示を一新する強力なツールとして浮上しています。軽量ながらも豊富な機能を備えた特性により、インタラクティブなテーブルの作成が容易になり、並べ替え、検索、およびページネーションが前面に出てきます。私たちはクライアントサイド処理の微妙な点を探り、ブラウザの機能を小さなデータセットに活用する一方で、大容量データに対する潜在的な課題も認識しました。 ASP.NET Razor Pageアプリケーションを設定し、jQuery DataTablesを統合するためのステップバイステップガイドは、開発者に実践的な洞察を提供します。さらに、Excel関連のタスクに対するシームレスなソリューションとしてのIronXLの導入により、効率的なデータエクスポートを可能にする貴重なツールが追加されました。これらのツールを使用することで、開発者はデータを魅力的かつアクセスしやすい形で提示し、ユーザーエクスペリエンスを向上させることができます。

IronXLは、開発者の数、プロジェクトの数、および再配布のニーズに応じて、さまざまなライセンスオプションを提供しています。ライセンスは永久的であり、無料のサポートおよびアップデートが含まれています。

< 以前
C# 配列のソート（開発者向けの仕組み）

次へ >
C# ストップウォッチ（開発者のための仕組み）