ASP.NETでExcelを表示する方法

ExcelModel

最初のステップはExcelデータのモデルを作成することです。 ExcelModel クラスは単一の Excel シートを表し、シート名と Excel シートに含まれるデータが含まれます。

namespace Excel_File_Viewer_IronXl.Models
{
    public class ExcelModel
    {
        public string SheetName { get; set; }

        // Data is a list of string arrays, each array represents a row in the sheet.
        public List<string[]> Data { get; set; }
    }
}

namespace Excel_File_Viewer_IronXl.Models
{
    public class ExcelModel
    {
        public string SheetName { get; set; }

        // Data is a list of string arrays, each array represents a row in the sheet.
        public List<string[]> Data { get; set; }
    }
}

ExcelModel は、SheetName と Data という 2 つのプロパティで定義されています。 SheetName は、各 Excel シートの名前を保持する単純な文字列です。 Data は、Excel シートの各行のデータを格納するための文字列配列のリストです。

ExcelViewModel

次に、ExcelViewModel を作成しましょう。 このモデルは、ファイル、メッセージ、およびファイル内のすべてのシートのデータを表す ExcelModel のリストを含むラッパーです。

using Microsoft.AspNetCore.Http;
using System.Collections.Generic;

namespace Excel_File_Viewer_IronXl.Models
{
    public class ExcelViewModel
    {
        public IFormFile File { get; set; }  // For uploading Excel file
        public string Message { get; set; }  // Message for storing success/error messages
        public List<ExcelModel> ExcelData { get; set; }  // List to store data from all sheets
    }
}

using Microsoft.AspNetCore.Http;
using System.Collections.Generic;

namespace Excel_File_Viewer_IronXl.Models
{
    public class ExcelViewModel
    {
        public IFormFile File { get; set; }  // For uploading Excel file
        public string Message { get; set; }  // Message for storing success/error messages
        public List<ExcelModel> ExcelData { get; set; }  // List to store data from all sheets
    }
}

このクラスはビューモデルとして使用されます。 ファイルアップロード用のプロパティ IFormFile、メッセージを表示するための文字列 Message、取得した Excel データを保存するための文字列 List<ExcelModel> があります。

5. データ抽出のためにExcelファイルを読み込むExcelControllerを作成します

次に、新しい ExcelController を作成します。 ここが魔法が起こる場所です！ Excel ファイルは IronXL のExcelViewModel に追加されます。

using Excel_File_Viewer_IronXl.Models;
using IronXL;
using System.Collections.Generic;
using System.Web.Mvc;
using System;
using System.Linq;

public class ExcelController : Controller
{
    // GET: Excel
    public ActionResult Index()
    {
        var model = new ExcelViewModel();

        // Define the file path for the Excel file
        string filePath = Server.MapPath("~/App_Data/Test.xlsx"); 

        // List to store data for each sheet
        List<ExcelModel> data = new List<ExcelModel>();

        try
        {
            // Load workbook directly from a file path
            var workbook = WorkBook.Load(filePath);

            // Loop through all worksheets in the workbook
            foreach (var worksheet in workbook.WorkSheets)
            {
                // Add each worksheet's name and data to the data list
                data.Add(new ExcelModel
                {
                    SheetName = worksheet.Name,
                    Data = worksheet.Rows.Select(r => r.ToArray().Select(c => c.Value.ToString()).ToArray()).ToList()
                });
            }

            model.ExcelData = data;
            model.Message = "File processed successfully!";
        }
        catch (Exception ex)
        {
            model.Message = $"Error occurred while processing file: {ex.Message}";
        }

        return View(model);
    }
}

using Excel_File_Viewer_IronXl.Models;
using IronXL;
using System.Collections.Generic;
using System.Web.Mvc;
using System;
using System.Linq;

public class ExcelController : Controller
{
    // GET: Excel
    public ActionResult Index()
    {
        var model = new ExcelViewModel();

        // Define the file path for the Excel file
        string filePath = Server.MapPath("~/App_Data/Test.xlsx"); 

        // List to store data for each sheet
        List<ExcelModel> data = new List<ExcelModel>();

        try
        {
            // Load workbook directly from a file path
            var workbook = WorkBook.Load(filePath);

            // Loop through all worksheets in the workbook
            foreach (var worksheet in workbook.WorkSheets)
            {
                // Add each worksheet's name and data to the data list
                data.Add(new ExcelModel
                {
                    SheetName = worksheet.Name,
                    Data = worksheet.Rows.Select(r => r.ToArray().Select(c => c.Value.ToString()).ToArray()).ToList()
                });
            }

            model.ExcelData = data;
            model.Message = "File processed successfully!";
        }
        catch (Exception ex)
        {
            model.Message = $"Error occurred while processing file: {ex.Message}";
        }

        return View(model);
    }
}

ここでは、ExcelViewModel を初期化し、 IronXLを使用してWorkBookをロードし、各WorkSheetをループし、各 WorkSheet に対して、ワークシートの名前とデータを使用して ExcelModel を作成します。 ExcelModel は、ExcelViewModel 内の ExcelData リストに追加されます。

次のExcelファイルのデータが読み込まれて表示されます：

サンプルExcelファイル

6. ビューを作成

Views/Excelディレクトリに、Excel データを表示するための新しい HTML ファイル Index.cshtml を作成します。 次に、Bootstrapのnav-tabsを使用して、Excelファイル内の各シートを表します。各シートは個別のタブになり、タブの内容はシートのデータになります。

@model Excel_File_Viewer_IronXl.Models.ExcelViewModel

@{
    ViewBag.Title = "Index";
}

<h2>Excel File Viewer</h2>

@if (Model.ExcelData != null)
{
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        @for (int i = 0; i < Model.ExcelData.Count; i++)
        {
            <li class="nav-item">
                <a class="nav-link @(i == 0 ? "active" : "")" id="tab-@i" data-toggle="tab" href="#content-@i" role="tab" aria-controls="content-@i" aria-selected="@(i == 0)">
                    @Model.ExcelData[i].SheetName
                </a>
            </li>
        }
    </ul>
    <div class="tab-content" id="myTabContent">
        @for (int i = 0; i < Model.ExcelData.Count; i++)
        {
            <div class="tab-pane fade @(i == 0 ? "show active" : "")" id="content-@i" role="tabpanel" aria-labelledby="tab-@i">
                <table class="table table-bordered">
                    @foreach (var row in Model.ExcelData[i].Data)
                    {
                        <tr>
                            @foreach (var cell in row)
                            {
                                <td>@cell</td>
                            }
                        </tr>
                    }
                </table>
            </div>
        }
    </div>
}

@model Excel_File_Viewer_IronXl.Models.ExcelViewModel

@{
    ViewBag.Title = "Index";
}

<h2>Excel File Viewer</h2>

@if (Model.ExcelData != null)
{
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        @for (int i = 0; i < Model.ExcelData.Count; i++)
        {
            <li class="nav-item">
                <a class="nav-link @(i == 0 ? "active" : "")" id="tab-@i" data-toggle="tab" href="#content-@i" role="tab" aria-controls="content-@i" aria-selected="@(i == 0)">
                    @Model.ExcelData[i].SheetName
                </a>
            </li>
        }
    </ul>
    <div class="tab-content" id="myTabContent">
        @for (int i = 0; i < Model.ExcelData.Count; i++)
        {
            <div class="tab-pane fade @(i == 0 ? "show active" : "")" id="content-@i" role="tabpanel" aria-labelledby="tab-@i">
                <table class="table table-bordered">
                    @foreach (var row in Model.ExcelData[i].Data)
                    {
                        <tr>
                            @foreach (var cell in row)
                            {
                                <td>@cell</td>
                            }
                        </tr>
                    }
                </table>
            </div>
        }
    </div>
}

このコード例では、nav nav-tabs によって、Excel ファイルの各シートを表すタブのリストが生成されます。対応するタブの内容には、それぞれのシートのデータが表形式で表示されます。 いくつかの変更を加えることで、Excelファイルを手動で選択するための参照ボタンが追加されます。

すべてのステップを完了し、プロジェクトを正しく設定した後で、それを実行する時が来ました。 Excelファイルのシート名にちなんで名付けられたタブを持つウェブページが表示されるはずです。タブをクリックすると、それぞれのシートのデータが表形式で表示されます。

Excelビューア