メッセージアイコン
  1. IronPDF
  2. IronPDFブログ
  3. .NET ヘルプ
  4. Datatables .NET
.NET ヘルプ

Datatables .NET（開発者向けの動作方法）

リーガン・パン
リーガン・パン
2024年1月14日
共有:

ASP.NET開発者は、ソート、検索、ページネーションなどの高度な機能を持つ表形式データやHTMLテーブルを効率的に表示する方法をよく求めます。 DataTables.NETは、強力なjQueryおよびJavaScriptライブラリであり、柔軟性の高いツールで、Webアプリケーション内でインタラクティブで機能豊富なテーブルの作成を容易にします。 この記事では、サーバーサイド処理のためのテーブル拡張ライブラリであるDataTables.NETの配布ファイルをASP.NETプロジェクトに統合し、表形式データの表示とユーザーエクスペリエンスを向上させる方法を探ります。

ASP.NET WebアプリケーションでDataTablesを使用するには？

  1. ASP.NET ウェブアプリケーションを作成する

  2. データテーブルクライアントサイドスタイリングパッケージを追加

  3. エンティティフレームワークコアパッケージをインストールします。コアソフトウェアのみ。

  4. モデルクラス、コントローラー、およびRazorページを追加

  5. JSファイルにJavaScriptコードを追加する

  6. 設定の構成

  7. プログラムをビルドして実行する

  8. IronXL for ExcelでデータをエクスポートしてExcelファイルにエクスポートする

DataTables.NETとは何ですか？

DataTables.NETは、.NETアプリケーションでインタラクティブなテーブルの作成と操作を可能にするjQuery JavaScriptライブラリです。 それは、動的および静的なHTMLテーブルに対してページネーション、ソート、フィルタリング、スクロールなどの包括的なAPI機能を提供するjQuery DataTablesプラグインに基づいています。 それは、SQLデータベース、AJAX、またはインメモリオブジェクトなどさまざまなデータソースで動作できる、テーブル強化ライブラリです。

サーバーサイドプロセッシング

APIエンドポイントが大量の製品データセットを提供するシナリオを考えてみてください。 標準的なアプローチでは、jQuery DataTablesがこのAPIにAJAXコールを行い、JSON形式で製品のリストを取得し、HTMLテーブルをレンダリングします。 これはクライアントサイド処理として知られており、通常100から1000件のレコード範囲の小規模データセットに対して効率的です。 しかし、データセットが10,000件以上に拡大した場合はどうなりますか？

多数のレコードを扱う場合、データセット全体を一度にブラウザに送信することは非現実的になります。 10,000件のレコードを一度に送信することは、帯域幅の面でも無駄が多く、ブラウザのリソースにも負担をかけます。 そのような場合、サーバーサイド処理と呼ばれる別のアプローチが、パフォーマンスを最適化するために重要になります。

サーバーサイド処理では、全体のデータセットを送信する代わりに、APIは管理しやすいチャンクでデータを送信します。通常、1ページあたり約50レコードのページネーションが行われます。 これにより、jQuery DataTables が一度に全データセットを処理する代わりに、控えめな数のレコード（約50件）をロードするようになるため、読み込み時間が大幅に改善されます。 このアプローチにより、CPUおよび帯域幅の使用量を削減し、APIとDataTableとの間のより効率的なインタラクションが実現します。

この記事では、大規模なデータセットを効率的に処理および表示しながら、Webアプリケーションの全体的なパフォーマンスを向上させるために、ASP.NET Razor Pageアプリケーションにおけるサーバーサイド処理の実装について探ります。

ASP.NET 8でDataTables.NETを始める

まず、DataTables.NET クライアントサイドライブラリをプロジェクトに追加します。 この記事では、.NET 8 を使用した ASP.NET Core Web App (Razor Pages) プロジェクトを使用します。必要に応じて、任意の Web App プロジェクトを使用できます。

クライアントサイドライブラリを追加するには、ソリューション>追加>クライアントサイドライブラリを右クリックし、以下のようにデータテーブルを検索します。

DataTables.NET（開発者にとっての仕組み）：図1 - クライアントサイドライブラリーを追加

さて、モデルクラス、DBコンテキスト、コントローラー、HTMLテーブル、およびAJAXコールを追加する必要があります。

その前に、アプリケーションをデータベースと接続するためにEntityFramework NuGetパッケージをインストールする必要があります。 この記事では、コードファーストアプローチを使用しますが、データベースファーストをお好みに応じて使用することもできます。

以下のローカルホストパッケージをインストールしてください:

  1. Microsoft.EntityFrameworkCore

  2. Microsoft.EntityFrameworkCore.Design

  3. Microsoft.EntityFrameworkCore.SqlServer

  4. Microsoft.EntityFrameworkCore.Tools

    上記のパッケージをインストールするには、NuGet パッケージ マネージャー コンソールで install-package コマンドを使用するか、NuGet パッケージ マネージャー ソリューションから検索してインストールしてください。

モデルクラスを追加

この例では Product Model Class を使用していますが、必要に応じて使用してください。

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; }
}
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 クラスを追加する

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

高度なインタラクションコントロールを追加

wwwroot>jsフォルダの中にProductDatatables.jsを追加して、ページネーションや検索などの高度なコントロールを追加します。

//add advanced interaction controls
$(document).ready(function () {
    $("#productDatatable").DataTable({
        "processing": true,
        "serverSide": true,
        "filter": true,
        "ajax": {
            "url": "/api/Product",
            "type": "POST",
            "datatype": "json"
        },
        "columnDefs": [{
            "targets": [0].data,
            "visible": false,
            "searchable": false
        }],
        "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 },
            {
                "render": function (data, row) { return "<a href="#" class='btn btn-danger' onclick=DeleteProduct('" + row.id + "'); >Delete</a>"; }
            },
        ]
    });
});
JAVASCRIPT

次に、HTMLテーブルを追加する必要があります。

HTMLテーブルを追加

index.cshtml ファイルに以下のコードを記述し、静的なHTMLページを追加します。

//static HTML page
@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>
}
//static HTML page
@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>
}

コントローラーを追加する必要があります。

製品コントローラーを追加

エンドポイントを作成し、プルリクエストを直接受け付けるためのプロダクトコントローラを追加します。

[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.ToList();
            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 ex)
        {
            throw;
        }
    }
}
[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.ToList();
            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 ex)
        {
            throw;
        }
    }
}

ここでは、サーバーサイドでページネーションと検索を実装しました。

それでは、データベースを設定し、Program.cs クラスに設定を追加する必要があります。 .NET 5またはそれ以下のバージョンを使用している場合は、Startup.csクラスで行う必要があるかもしれません。

まず、以下の接続文字列をappsettings.jsonファイルに追加してください。

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

次に、以下のコードをProgram.csクラスに追加してください。

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. You may want to change this for production scenarios, see .NET documentation https://aka.ms/aspnetcore-hsts.
         app.UseHsts();
     }
     app.UseHttpsRedirection();
     app.UseStaticFiles();
     app.UseRouting();
     app.UseAuthorization();
     app.MapControllers();
     app.MapRazorPages();
     app.Run();
 }
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. You may want to change this for production scenarios, see .NET documentation https://aka.ms/aspnetcore-hsts.
         app.UseHsts();
     }
     app.UseHttpsRedirection();
     app.UseStaticFiles();
     app.UseRouting();
     app.UseAuthorization();
     app.MapControllers();
     app.MapRazorPages();
     app.Run();
 }

コードファーストアプローチを使用しているため、マイグレーションを実行する必要があります。

パッケージマネージャーコンソールで次のコマンドを実行してください。

Add-Migration init

上記のコマンドはマイグレーションを作成します。 これらのマイグレーションをデータベースに適用する必要があります。 パッケージマネージャーコンソールで次のコマンドを実行してください。

Update-Database

上記のコマンドは、データベースにテーブルを作成します。 製品テーブルにダミーデータを追加します。ランダムデータはMockarooで生成できます。

では、このアプリケーションを構築して実行してください。

出力

高度なインタラクションコントロールを備えた非常にインタラクティブなUIを持っていることがわかります。

DataTables.NET（開発者向けの使い方）：図2 - 出力

以下のように、ページネーションはサーバー側で実装されています。

DataTables.NET（開発者にとっての仕組み）：図3 - ページネーション

出力UI

そのデータは、リッチなUIコントロールでクライアント側にレンダリングされます。

DataTables.NET（開発者にとっての作業方法）：図4 - UI

DataTables.NETのドキュメントを探索することで、DataTables.NETのドキュメントをさらに探索できます。

IronXL の紹介

IronXL - .NET用Excelライブラリは、.NETアプリケーションでExcelファイルを扱うことができるライブラリです。 Excelスプレッドシートを作成し、CSVファイルを読み取り、Excelファイルを編集し、XLS、XLSX、CSV、TSVなどのさまざまな形式でExcelにエクスポートできます。Microsoft OfficeやExcel Interopをインストールする必要はありません。 .NET 8、7、6、5、Core、Framework、Azureに対応しています。

データをExcelやCSVファイルにエクスポートする必要があることがよくあります。 この場合、IronXLは最適な選択です。 さて、データをExcelファイルにエクスポートするコードを書きます。

IronXLをインストール

パッケージ マネージャー コンソールに次のコマンドを入力して、プロジェクトに IronXL ライブラリをインストールします。

Install-Package ironXL.Excel

これは、IronXLと必要な依存関係をプロジェクトにインストールします。

エクスポートデータをExcelに出力

製品リストをExcelファイルに変換するコードを書きましょう。

public void ExportToExcel(List<Product> productList)
{
    WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
    WorkSheet ws = wb.DefaultWorkSheet;
    int rowCount = 1;
    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");
}
public void ExportToExcel(List<Product> productList)
{
    WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
    WorkSheet ws = wb.DefaultWorkSheet;
    int rowCount = 1;
    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");
}

リストから非常にシンプルかつ簡単な方法でExcelファイルを作成しました。

DataTables.NET (開発者向けの動作方法): 図5 - Excel出力

IronXLは、XLSXファイルの作成に関するチュートリアル、Excelを読み取るためのコード例、およびAPIのドキュメントを提供しており、豊富なAPIを最適に活用するために役立ちます。

ASP.NETのパフォーマンスを最適化する際には、Only Core Software にのみ依存し、スリムで効率的な開発環境を確保しています。 DataTables.NETをローカルホストされたパッケージとして利用することで、応答性がさらに向上し、外部依存関係が最小限に抑えられ、データ処理とExcelエクスポートの効率が向上します。 さらに、この最適化され自己完結型のエコシステム内で効率的にコードを貢献することがスムーズになります。

IronPDFは、ウェブページ、URL、およびHTMLをPDFドキュメントに変換するために設計されたソリューションです。 生成されたPDFは、ソースウェブページの元の書式設定とスタイル要素を保持します。 このツールは、レポートや請求書などのウェブベースのコンテンツをPDF形式で作成するのに特に効果的です。

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

結論

要約すると、ASP.NET配布リポジトリプロジェクトにおいてサーバーサイド処理のためにDataTables.NETを活用することは、大規模なデータセットを効率的に処理するための良い戦略であることを証明しています。 このアプローチは、データを適切なサイズのチャンクに分割して送信することで、帯域幅の使用を軽減し、ユーザー体験を向上させながら最適化されたパフォーマンスを保証します。 IronXLの統合により、アプリケーションの機能がさらに拡張され、簡単に表形式のデータをExcelにエクスポートして、包括的なデータ分析とレポート作成が可能になります。

これらの技術を採用することにより、開発者はリッチなインタラクティビティとリソース効率のバランスを取ったウェブアプリケーションを作成することができ、特に大規模なデータセットが関係するシナリオで、ユーザーにシームレスかつレスポンシブな体験を提供できます。 IronXLは、開発者の数、プロジェクト数、再配布のニーズに応じて、IronXLのさまざまなライセンスオプションを提供しています。 ライセンスは永久的であり、無料のサポートおよびアップデートが含まれています。

リーガン・パン
リーガン・パン
  今すぐエンジニアリングチームとチャット
ソフトウェアエンジニア
レーガンはリーディング大学で電子工学の学士号を取得しました。Iron Softwareに入社する前の仕事では、一つのタスクに集中して取り組んでいました。Iron Softwareでは、営業、技術サポート、製品開発、マーケティングのいずれにおいても広範な業務に携わることが最も楽しいと感じています。彼は、Iron Softwareライブラリを開発者がどのように使用しているかを理解し、その知識を使ってドキュメントを継続的に改善し、製品を開発することを楽しんでいます。
< 以前
Sqlite C# .NET（開発者向けの仕組み）
次へ >
C#のNull合体演算子（開発者向けの仕組み）

問題を報告

準備はできましたか？ バージョン: 2025.3 新発売

無料で始める
NuGet ダウンロード DLLダウンロード Windowsインストーラ 無料トライアルを開始
ライセンスを表示 >
Experience the full power of IronPDF 無料トライアルを開始
Textlogo Iron Suite related to Datatables .NET（開発者向けの動作方法）

IronPDF は IRONSUITE の一部です。

10 .NET API製品オフィスドキュメントのために

2つの価格で10製品を手に入れよう   無料トライアルを開始