Ce tutoriel complet démontrera comment créer un visualiseur Excel en utilisant ASP.NET MVC et IronXL. Ce visualiseur permettra aux utilisateurs d'afficher, éditer et naviguer dans des fichiers Excel directement depuis leur page web.

Qu'est-ce qu'IronXL ?

IronXL est une puissante bibliothèque .NET qui offre une pléthore de fonctionnalités liées aux opérations Excel. Il propose une API simplifiée qui permet aux développeurs .NET d'écrire, manipuler et lire des documents Excel dans divers formats de fichiers, y compris XLS, XLSX, CSV, et plus.

Avec IronXL, vous pouvez lire des fichiers Excel, extraire des données, ajouter ou modifier des feuilles de calcul, créer ou modifier des lignes et colonnes, appliquer des formules, enregistrer les modifications, et bien plus encore. Toutes ces opérations peuvent être effectuées sans qu'Excel de Microsoft soit installé sur votre machine.

IronXL prend en charge les images, le style, le formatage conditionnel, et d'autres fonctionnalités Excel complexes, ce qui en fait une solution complète pour les opérations Excel .NET. C'est parfait pour gérer les besoins en sources de données et tableurs pour vos applications ASP.NET MVC. La bibliothèque IronXL sera utilisée pour visualiser les fichiers Excel dans les applications Web ASP.NET.

Prérequis

• Compréhension de base d'ASP.NET MVC
• Visual Studio installé sur votre machine
• La bibliothèque IronXL installée. Vous pouvez trouver le guide d'installation dans leur documentation officielle.

Commencer

Tout d'abord, créons un nouveau projet ASP.NET MVC dans Visual Studio.

1. Ouvrez Visual Studio.
2. Cliquez sur Fichier > Nouveau > Projet.
3. Dans la fenêtre du nouveau projet, choisissez le modèle Application Web ASP.NET (.NET Framework).

Créez une nouvelle application Web ASP.NET dans Visual Studio

4. Nommez votre projet ExcelViewer, sélectionnez l'emplacement du projet et cliquez sur le bouton Créer.

Configurez votre projet

Cet article se concentrera sur la mise en œuvre de la fonctionnalité de visualisation Excel dans cette application ASP.NET MVC.

Ajouter IronXL à votre projet

Pour gérer les formats de fichiers Excel (comme .xls, .xlsx et .csv), IronXL offre des fonctionnalités complètes pour charger des documents Excel, lire, écrire et même modifier des données Excel. Il prend en charge les formules, les images, le formatage et bien plus encore.

1. Cliquez avec le bouton droit sur votre projet dans Explorateur de solutions et accédez à Gérer les packages NuGet.
2. Dans le Gestionnaire de packages NuGet, recherchez IronXL.Excel.
3. Cliquez sur Installer pour l'ajouter à votre projet.

Recherche et installation du package IronXL dans l'interface utilisateur du gestionnaire de packages NuGet

Vous pouvez également installer IronXL en utilisant la console du gestionnaire de packages avec la commande suivante :

Install-Package IronXL.Excel

Installer le package IronXL depuis la console du gestionnaire de packages

Maintenant qu'IronXL est installé, passons à l'étape suivante.

Construire des modèles

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

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

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

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

net

net

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.

Exécution du programme

Après avoir suivi toutes les étapes et configuré correctement le projet, il est temps de l'exécuter. Vous devriez voir une page web avec des onglets nommés d'après les noms de feuilles de votre fichier Excel. Cliquer sur un onglet affichera les données de la feuille respective sous forme de tableau.

Le visualiseur Excel

Conclusion

Vous venez de créer un visualiseur Excel ASP.NET en utilisant IronXL ! Cette puissante bibliothèque permet aux utilisateurs de travailler avec des fichiers Excel de manière plus efficace et gérable. Avec l'aide d'IronXL, manipuler des fichiers Excel n'a jamais été aussi simple dans l'environnement .NET.

IronXL offre un essai gratuit, vous permettant d'explorer et de comprendre ses vastes fonctionnalités sans aucun coût initial. Une fois que vous l'avez testé et trouvé qu'il est la solution parfaite pour vos besoins, la licence commence à partir de $999.