Comment afficher Excel dans ASP.NET

ExcelModel

La première étape consiste à créer un modèle pour les données Excel. La classe ExcelModel représentera une feuille Excel unique et contiendra le nom de la feuille et les données présentes dans la feuille 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; }
    }
}

Imports System.Collections.Generic

Namespace Excel_File_Viewer_IronXl.Models
    Public Class ExcelModel
        Public Property SheetName As String

        ' Data is a list of string arrays, each array represents a row in the sheet.
        Public Property Data As List(Of String())
    End Class
End Namespace

Le ExcelModel est défini avec deux propriétés, SheetName et Data. SheetName est une simple chaîne pour contenir le nom de chaque feuille Excel. Data est une Liste de tableaux de chaînes pour stocker les données de chaque ligne dans la feuille Excel.

ExcelViewModel

Ensuite, créons ExcelViewModel. Ce modèle est un wrapper qui contient un fichier, un message et une liste de ExcelModel qui représente les données de toutes les feuilles dans le fichier.

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
    }
}

Imports Microsoft.AspNetCore.Http
Imports System.Collections.Generic

Namespace Excel_File_Viewer_IronXl.Models
    Public Class ExcelViewModel
        Public Property File As IFormFile ' For uploading Excel file
        Public Property Message As String ' Message for storing success/error messages
        Public Property ExcelData As List(Of ExcelModel) ' List to store data from all sheets
    End Class
End Namespace

Cette classe sera utilisée comme modèle de vue. Il a une propriété IFormFile pour le téléchargement de fichiers, une chaîne Message pour afficher des messages, et un List<ExcelModel> pour stocker les données Excel récupérées.

5. Créer ExcelController pour charger les fichiers Excel pour l'extraction de données

Ensuite, créez un nouveau ExcelController. C'est là que la magie opère ! Les fichiers Excel sont chargés en utilisant la fonction WorkBook.Load d'IronXL, parcourez les feuilles de calcul, extrayez les données et ajoutez-les à 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);
    }
}

Imports Excel_File_Viewer_IronXl.Models
Imports IronXL
Imports System.Collections.Generic
Imports System.Web.Mvc
Imports System
Imports System.Linq

Public Class ExcelController
    Inherits Controller

    ' GET: Excel
    Public Function Index() As ActionResult
        Dim model As New ExcelViewModel()

        ' Define the file path for the Excel file
        Dim filePath As String = Server.MapPath("~/App_Data/Test.xlsx")

        ' List to store data for each sheet
        Dim data As New List(Of ExcelModel)()

        Try
            ' Load workbook directly from a file path
            Dim workbook = WorkBook.Load(filePath)

            ' Loop through all worksheets in the workbook
            For Each worksheet In workbook.WorkSheets
                ' Add each worksheet's name and data to the data list
                data.Add(New ExcelModel With {
                    .SheetName = worksheet.Name,
                    .Data = worksheet.Rows.Select(Function(r) r.ToArray().Select(Function(c) c.Value.ToString()).ToArray()).ToList()
                })
            Next

            model.ExcelData = data
            model.Message = "File processed successfully!"
        Catch ex As Exception
            model.Message = $"Error occurred while processing file: {ex.Message}"
        End Try

        Return View(model)
    End Function
End Class

Ici, initialisez un ExcelViewModel, puis chargez le WorkBook en utilisant IronXL, parcourez chaque WorkSheet, et pour chaque WorkSheet, nous créons un ExcelModel avec le nom et les données de la feuille de calcul. Le ExcelModel est ensuite ajouté à la liste ExcelData dans le ExcelViewModel.

Les données du fichier Excel suivant vont être chargées et affichées :

Le fichier Excel d'exemple

6. Créer la vue

Dans votre répertoire Views/Excel, créez un nouveau fichier HTML Index.cshtml pour afficher les données Excel. Ensuite, utilisez le nav-tabs de Bootstrap pour représenter chaque feuille du fichier Excel. Chaque feuille sera un onglet distinct et le contenu de l'onglet sera les données de la feuille.

@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>
}

Dans cet exemple de code, nav nav-tabs générera une liste d'onglets, chacun représentant une feuille du fichier Excel. Le contenu correspondant de l'onglet affichera les données de la feuille respective sous forme de tableau. En apportant quelques modifications, un bouton de navigation est ajouté pour sélectionner le fichier Excel manuellement.