Wie man Excel in ASP.NET anzeigt

ExcelModel

Der erste Schritt ist das Erstellen eines Modells für die Excel-Daten. Die Klasse ExcelModel repräsentiert ein einzelnes Excel-Arbeitsblatt und enthält den Namen des Arbeitsblatts sowie die im Excel-Arbeitsblatt enthaltenen Daten.

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

Der Code ExcelModel wird mit zwei Eigenschaften definiert, SheetName und Data. SheetName ist eine einfache Zeichenkette, die den Namen jedes Excel-Tabellenblatts enthält. Data ist eine Liste von String-Arrays, um die Daten jeder Zeile im Excel-Arbeitsblatt zu speichern.

ExcelViewModel

Als nächstes erstellen wir ExcelViewModel. Dieses Modell ist ein Wrapper, der eine Datei, eine Nachricht und eine Liste von ExcelModel enthält, die Daten aus allen Tabellenblättern der Datei repräsentiert.

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

Diese Klasse wird als View-Model verwendet. Es verfügt über eine IFormFile Eigenschaft zum Hochladen von Dateien, eine Message Zeichenkette zur Anzeige von Meldungen und eine List<ExcelModel> zum Speichern der abgerufenen Excel-Daten.

5. Erstellen Sie ExcelController, um Excel-Dateien zur Datenextraktion zu laden.

Erstellen Sie dann ein neues ExcelController. Hier geschieht die Magie! Die Excel-Dateien werden mit Hilfe der IronXL-Funktion WorkBook.Load geladen, durchlaufen die Arbeitsblätter, extrahieren die Daten und fügen sie der Funktion ExcelViewModel hinzu.

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

Hier wird ein ExcelViewModel initialisiert und anschließend das WorkBook mit IronXL geladen. Danach wird jedes WorkSheet durchlaufen und für jedes WorkSheet wird ein ExcelModel mit dem Namen und den Daten des Arbeitsblatts erstellt. Der Eintrag ExcelModel wird dann der Liste ExcelData in der Liste ExcelViewModel hinzugefügt.

Die Daten der folgenden Excel-Datei werden geladen und angezeigt:

Die Mustertabelle

6. Erstellen Sie die Ansicht

Erstellen Sie im Verzeichnis Views/Excel eine neue HTML-Datei Index.cshtml, um Excel-Daten anzuzeigen. Verwenden Sie anschließend Bootstraps nav-tabs, um jedes Tabellenblatt in der Excel-Datei darzustellen. Jedes Tabellenblatt wird als separate Registerkarte angezeigt, und der Inhalt der Registerkarte entspricht den Daten des jeweiligen Tabellenblatts.

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

In diesem Codebeispiel erzeugt nav nav-tabs eine Liste von Registerkarten, die jeweils ein Tabellenblatt der Excel-Datei repräsentieren. Der Inhalt der entsprechenden Registerkarte zeigt die Daten des jeweiligen Tabellenblatts in Tabellenform an. Durch einige Änderungen wird eine Durchsuchen-Schaltfläche hinzugefügt, um die Excel-Datei manuell auszuwählen.