Dieses umfassende Tutorial demonstriert, wie man einen Excel-Viewer mit ASP.NET MVC und IronXL erstellt. Dieser Viewer ermöglicht es Benutzern, Excel-Dateien direkt von ihrer Webseite aus anzuzeigen, zu bearbeiten und zu navigieren.

Was ist IronXL?

IronXL ist eine leistungsstarke .NET-Bibliothek, die eine Vielzahl von Funktionen in Bezug auf Excel-Operationen bietet. Es bietet eine vereinfachte API, die es .NET-Entwicklern ermöglicht, Excel-Dokumente in verschiedenen Dateiformaten wie XLS, XLSX, CSV und mehr zu schreiben, zu manipulieren und zu lesen.

Mit IronXL können Sie Excel-Dateien lesen, Daten extrahieren, Arbeitsblätter hinzufügen oder bearbeiten, Zeilen und Spalten erstellen oder ändern, Formeln anwenden, Änderungen speichern und vieles mehr. All diese Operationen können durchgeführt werden, ohne dass Microsoft Excel auf Ihrem Computer installiert sein muss.

IronXL unterstützt Bilder, Formatierung, bedingte Formatierung und andere komplexe Excel-Funktionen und ist damit eine umfassende Lösung for .NET-Excel-Operationen. Es ist perfekt für die Handhabung von Datenquellen- und Tabellenkalkulationsanforderungen Ihrer ASP.NET MVC-Anwendungen geeignet. Die IronXL-Bibliothek wird verwendet, um Excel-Dateien in ASP.NET-Webanwendungen anzuzeigen.

Voraussetzungen

• Grundlegendes Verständnis von ASP.NET MVC
• Visual Studio auf Ihrem Rechner installiert
• Die IronXL-Bibliothek installiert. Die Installationsanleitung finden Sie in ihrer offiziellen Dokumentation.

Einstieg

Erstellen wir zuerst ein neues ASP.NET MVC-Projekt in Visual Studio.

1. Öffnen Sie Visual Studio.
2. Klicken Sie auf Datei > Neu > Projekt.
3. Wählen Sie im neuen Projektfenster die Vorlage ASP.NET-Webanwendung (.NET Framework) aus.

Erstellen einer neuen ASP.NET-Webanwendung in Visual Studio

4. Benennen Sie Ihr Projekt ExcelViewer, wählen Sie den Projektstandort und klicken Sie auf die Schaltfläche Erstellen.

Konfigurieren Ihres Projekts

Dieser Artikel konzentriert sich auf die Implementierung der Excel-Viewer-Funktionalität in dieser ASP.NET MVC-Anwendung.

Hinzufügen von IronXL zu Ihrem Projekt

Um Excel-Dateiformate (wie .xls, .xlsx und .csv) zu handhaben, bietet IronXL umfassende Funktionen zum Laden von Excel-Dokumenten, Lesen, Schreiben und sogar zum Ändern von Excel-Daten. Es unterstützt Formeln, Bilder, Formatierung und vieles mehr.

1. Klicken Sie mit der rechten Maustaste auf Ihr Projekt im Projektmappen-Explorer und gehen Sie zu NuGet-Pakete verwalten.
2. Suchen Sie im NuGet-Paket-Manager nach IronXL.Excel.
3. Klicken Sie auf Installieren, um es Ihrem Projekt hinzuzufügen.

Suchen und installieren Sie das IronXL-Paket im NuGet-Paket-Manager-UI

Sie können IronXL auch mit dem folgenden Befehl über die Paket-Manager-Konsole installieren:

Install-Package IronXL.Excel

Installieren Sie das IronXL-Paket über die Paket-Manager-Konsole

Jetzt, da IronXL installiert ist, gehen wir zum nächsten Schritt über.

Modelle erstellen

ExcelModel

Der erste Schritt ist das Erstellen eines Modells für die Excel-Daten. Die ExcelModel-Klasse wird ein einzelnes Excel-Blatt repräsentieren und den Blattnamen sowie die im Excel-Blatt vorhandenen Daten enthalten.

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

Die ExcelModel ist mit zwei Eigenschaften definiert, SheetName und Data. SheetName ist ein einfacher String, um den Namen jedes Excel-Blattes zu halten. Data ist eine Liste von String-Arrays, um die Daten jeder Zeile im Excel-Blatt 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 von allen Blättern in der Datei repräsentieren.

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

Diese Klasse wird als View-Model verwendet. Es hat eine IFormFile-Eigenschaft für den Datei-Upload, einen Message-String zur Anzeige von Nachrichten und einen List<ExcelModel> zur Speicherung der abgerufenen Excel-Daten.

5. Erstellen Sie ExcelController, um Excel-Dateien für die Datenextraktion zu laden

Erstellen Sie dann ein neues ExcelController. Hier geschieht die Magie! Die Excel-Dateien werden mit der IronXL-WorkBook.Load-Funktion geladen, durchlaufen die Arbeitsblätter, extrahieren die Daten und fügen sie dem 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 initialisieren Sie ein ExcelViewModel und laden dann das WorkBook mit IronXL, durchlaufen jedes WorkSheet, und für jedes WorkSheet erstellen wir ein ExcelModel mit dem Namen und den Daten des Arbeitsblattes. Das ExcelModel wird dann der ExcelData-Liste in der ExcelViewModel hinzugefügt.

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

Die Mustertabelle

6. Erstellen Sie die Ansicht

Erstellen Sie in Ihrem Views/Excel-Verzeichnis eine neue HTML-Datei Index.cshtml, um Excel-Daten anzuzeigen. Verwenden Sie dann Bootstraps nav-tabs, um jedes Blatt in der Excel-Datei darzustellen. Jedes Blatt wird ein separater Tab, und der Inhalt des Tabs wird die Daten des Blattes enthalten.

@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

In diesem Codebeispiel generiert nav nav-tabs eine Liste von Tabs, die jeweils ein Blatt aus der Excel-Datei repräsentieren. Der entsprechende Tab-Inhalt zeigt die Daten des jeweiligen Blattes im Tabellenformat an. Durch einige Änderungen wird eine Durchsuchen-Schaltfläche hinzugefügt, um die Excel-Datei manuell auszuwählen.

Das Programm ausführen

Nachdem Sie alle Schritte befolgt und das Projekt korrekt eingerichtet haben, ist es an der Zeit, es auszuführen. Sie sollten eine Webseite mit Tabs sehen, die nach den Blattnamen in Ihrer Excel-Datei benannt sind. Wenn Sie auf einen Tab klicken, werden die entsprechenden Blattdaten in einem Tabellenformat angezeigt.

Der Excel-Viewer

Abschluss

Sie haben gerade einen ASP.NET-Excel-Viewer mit IronXL erstellt! Diese leistungsstarke Bibliothek ermöglicht es Benutzern, effizienter und übersichtlicher mit Excel-Dateien zu arbeiten. Mit der Hilfe von IronXL war der Umgang mit Excel-Dateien in der .NET-Umgebung noch nie einfacher.

IronXL bietet eine kostenlose Testversion, so dass Sie seine umfangreiche Funktionalität ohne Vorabkosten erkunden und verstehen können. Sobald Sie es getestet und als die perfekte Lösung für Ihre Bedürfnisse befunden haben, beginnt die Lizenz ab $999.