Este tutorial completo demostrará cómo construir un visor de Excel utilizando ASP.NET MVC e IronXL. Este visor permitirá a los usuarios mostrar, editar y navegar por archivos de Excel directamente desde su página web.

¿Qué es IronXL?

IronXL es una poderosa biblioteca .NET que ofrece una multitud de funcionalidades relacionadas con las operaciones de Excel. Ofrece una API simplificada que permite a los desarrolladores de .NET escribir, manipular y leer documentos de Excel en varios formatos de archivo, incluidos XLS, XLSX, CSV y más.

Con IronXL, puedes leer archivos de Excel, extraer datos, agregar o editar hojas de trabajo, crear o modificar filas y columnas, aplicar fórmulas, guardar cambios, y mucho más. Todas estas operaciones pueden realizarse sin la necesidad de tener Microsoft Excel instalado en tu máquina.

IronXL es compatible con imágenes, estilos, formato condicional y otras características complejas de Excel, lo que lo convierte en una solución integral para operaciones de Excel en .NET. Es perfecto para manejar requisitos de fuentes de datos y hojas de cálculo en tus aplicaciones ASP.NET MVC. La biblioteca IronXL se utilizará para ver archivos de Excel en aplicaciones web de ASP.NET.

Requisitos previos

• Comprensión básica de ASP.NET MVC
• Visual Studio instalado en tu máquina
• Instalado la biblioteca IronXL. Puedes encontrar la guía de instalación en su documentación oficial.

Empezando

Primero, vamos a crear un nuevo proyecto ASP.NET MVC en Visual Studio.

1. Abre Visual Studio.
2. Haz clic en Archivo > Nuevo > Proyecto.
3. En la ventana de nuevo proyecto, elige la plantilla Aplicación web ASP.NET (.NET Framework).

Crea una nueva aplicación web de ASP.NET en Visual Studio

4. Nombra tu proyecto ExcelViewer, selecciona la ubicación del proyecto y haz clic en el botón Crear.

Configurar tu proyecto

Este artículo se centrará en implementar la funcionalidad del visor de Excel en esta aplicación ASP.NET MVC.

Cómo añadir IronXL a su proyecto

Para manejar formatos de archivos de Excel (como .xls, .xlsx y .csv), IronXL ofrece características completas para cargar documentos de Excel, leer, escribir e incluso modificar datos de Excel. Es compatible con fórmulas, imágenes, formato, y mucho más.

1. Haz clic derecho en tu proyecto en el Explorador de Soluciones, y navega a Administrar paquetes NuGet.
2. En el Administrador de paquetes NuGet, busca IronXL.Excel.
3. Haz clic en Instalar para agregarlo a tu proyecto.

Buscar e instalar el paquete IronXL en la interfaz de usuario del administrador de paquetes NuGet

También puedes instalar IronXL usando la Consola del Administrador de Paquetes con el siguiente comando:

Install-Package IronXL.Excel

Instala el paquete IronXL desde la Consola del Administrador de Paquetes

Ahora que IronXL está instalado, pasemos al siguiente paso.

Modelos de construcción

ExcelModel

El primer paso es crear un modelo para los datos de Excel. La clase ExcelModel representará una sola hoja de Excel y contendrá el nombre de la hoja y los datos presentes en la hoja de 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; }
    }
}

Se define ExcelModel con dos propiedades, SheetName y Data. SheetName es una cadena simple para guardar el nombre de cada hoja de Excel. Data es una Lista de arreglos de cadenas para almacenar los datos de cada fila en la hoja de Excel.

ExcelViewModel

A continuación, vamos a crear ExcelViewModel. Este modelo es un contenedor que contiene un archivo, un mensaje y una lista de ExcelModel que representa los datos de todas las hojas en el archivo.

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

Esta clase se utilizará como el modelo de vista. Tiene una propiedad IFormFile para subir archivos, una cadena Message para mostrar cualquier mensaje, y un List<ExcelModel> para almacenar los datos de Excel recuperados.

5. Crear ExcelController para cargar archivos de Excel y extraer datos

Luego crea un nuevo ExcelController. ¡Aquí es donde ocurre la magia! Los archivos Excel se cargan usando la función WorkBook.Load de IronXL, se recorre cada hoja de trabajo, se extraen los datos y se añaden al 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);
    }
}

Aquí, inicializa un ExcelViewModel y luego carga el WorkBook usando IronXL, recorre cada WorkSheet, y para cada WorkSheet, creamos un ExcelModel con el nombre y los datos de la hoja de trabajo. Luego se añade el ExcelModel a la lista ExcelData en el ExcelViewModel.

Se va a cargar y mostrar los datos del siguiente archivo de Excel:

El archivo de Excel de muestra

6. Crear la vista

En tu directorio Views/Excel, crea un nuevo archivo HTML Index.cshtml para mostrar los datos de Excel. Luego usa nav-tabs de Bootstrap para representar cada hoja en el archivo de Excel. Cada hoja será una pestaña separada, y el contenido de la pestaña será los datos de la hoja.

@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

En este ejemplo de código, nav nav-tabs generará una lista de pestañas, cada una representando una hoja del archivo Excel. El contenido de la pestaña correspondiente mostrará los datos de la hoja respectiva en formato de tabla. Haciendo algunos cambios, se añade un botón de examinar para seleccionar el archivo de Excel manualmente.

Ejecutando el programa

Después de haber seguido todos los pasos y configurado el proyecto correctamente, es hora de ejecutarlo. Deberías ver una página web con pestañas nombradas según los nombres de las hojas en tu archivo de Excel. Hacer clic en una pestaña mostrará los datos de la hoja respectiva en formato de tabla.

El visor de Excel

Conclusión

¡Acabas de crear un visor de Excel en ASP.NET usando IronXL! Esta potente biblioteca permite a los usuarios trabajar con archivos de Excel de una manera más eficiente y manejable. Con la ayuda de IronXL, manejar archivos de Excel nunca ha sido tan fácil en el entorno .NET.

IronXL ofrece una prueba gratuita, permitiéndote explorar y entender su vasta funcionalidad sin ningún costo inicial. Una vez que la hayas probado y encontrado que es la solución perfecta para tus necesidades, la licencia comienza desde $999.