Erstellen einer anpassbaren Tabelle mit CommandArgument-Schaltflächen in ASP.NET MVC

Als Entwickler stehen wir oft vor Herausforderungen, wenn wir von einem Framework zu einem anderen wechseln. Wenn Sie Erfahrung mit ASP.NET WebForms haben, könnten Sie beim Versuch, Funktionen in ASP.NET MVC zu implementieren, insbesondere beim Erstellen interaktiver Tabellen mit Schaltflächen, stecken bleiben.

In diesem Blogbeitrag werden wir eine häufige Frage klären: Wie erstellt man eine eigene Tabelle mit Schaltflächen, die die CommandArgument-Eigenschaft in ASP.NET MVC verwenden? Wir werden nicht nur das Problem erläutern, sondern auch eine robuste Lösung anbieten, die den MVC-Prinzipien entspricht.

Verständnis des Problems

Das Problem tritt auf, wenn Sie versuchen, eine WebForms-Schaltfläche in einer ASP.NET MVC-Anwendung zu verwenden. Hier ist eine vereinfachte Version der Tabellenstruktur, die Sie möglicherweise zu erstellen versuchen:

<div>
    <table>
        <thead>
            <tr>
                <td>Portname</td>
                <td>Aktuelle Portversion</td>
                <td>Neue Portversion</td>
                <td>Aktualisieren</td>
            </tr>
        </thead>
        <% foreach (var ip in Ports) { %>
            <tr>
                <td><%= ip.PortName %></td>
                <td><%= ip.CurrentVersion %></td>
                <td><%= ip.NewVersion %></td>
                <td>
                    <asp:Button ID="btnUpdate" runat="server" Text="Aktualisieren"
                        CommandArgument="<% ip.PortName %>" />
                </td>
            </tr>
        <% } %>
    </table>
</div>

In diesem Code-Snippet könnten Sie auf Fehler stoßen, die sich auf die Unfähigkeit beziehen, die Variable ip in der CommandArgument-Eigenschaft aufzulösen. Dies liegt an den grundlegenden Unterschieden in der Verarbeitung von Ansichten durch ASP.NET MVC im Vergleich zu WebForms.

Die Lösung: Schaltflächen richtig in ASP.NET MVC implementieren

Hier sind zwei effektive Ansätze, um die gewünschte Funktionalität unter Beachtung der MVC-Regeln zu erreichen:

Option 1: Verwendung von Eingabetags

1. Ersetzen Sie die WebForms-Schaltfläche durch ein HTML-Eingabe- oder Schaltflächenelement.
2. Wickeln Sie die Schaltfläche in ein Formular, das auf eine Controller-Action verweist, um die Aktualisierung zu bearbeiten.

So können Sie Ihre Tabelle mit einer Eingabeschaltfläche strukturieren:

<div>
    <table>
        <thead>
            <tr>
                <td>Portname</td>
                <td>Aktuelle Portversion</td>
                <td>Neue Portversion</td>
                <td>Aktualisieren</td>
            </tr>
        </thead>
        @foreach (var ip in Ports)
        {
            <tr>
                <td>@ip.PortName</td>
                <td>@ip.CurrentVersion</td>
                <td>@ip.NewVersion</td>
                <td>
                    <form action="/ControllerName/ActionName" method="post">
                        <input type="hidden" name="portName" value="@ip.PortName" />
                        <input type="submit" value="Aktualisieren" />
                    </form>
                </td>
            </tr>
        }
    </table>
</div>

Option 2: Verwendung von Hyperlinks mit Abfrageparametern

Eine weitere Alternative besteht darin, Hyperlinks zu verwenden, um zur Aktion zu navigieren. Sie können die erforderlichen Parameter über die Abfragezeichenfolge übergeben.

<div>
    <table>
        <thead>
            <tr>
                <td>Portname</td>
                <td>Aktuelle Portversion</td>
                <td>Neue Portversion</td>
                <td>Aktualisieren</td>
            </tr>
        </thead>
        @foreach (var ip in Ports)
        {
            <tr>
                <td>@ip.PortName</td>
                <td>@ip.CurrentVersion</td>
                <td>@ip.NewVersion</td>
                <td>
                    <a href="/ControllerName/ActionName?portName=@ip.PortName">Aktualisieren</a>
                </td>
            </tr>
        }
    </table>
</div>

Zusammenfassung

Der Übergang von ASP.NET WebForms zu MVC kann herausfordernd sein, doch ein Verständnis der Unterschiede im Framework-Design wird Ihnen helfen, besser gekapselte und standardisierte Lösungen zu implementieren.

Wichtige Erkenntnisse:

• Vermeiden Sie die Verwendung von WebForms-Komponenten in MVC.
• Verwenden Sie HTML-Elemente (Eingaben oder Hyperlinks) anstelle von asp:Button.
• Stellen Sie sicher, dass die Aktionen wieder zu Ihren Controllern führen, um eine dynamische Datenverarbeitung zu ermöglichen.

Durch die Anwendung dieser Ansätze können Sie gut strukturierte, interaktive Tabellen in Ihren ASP.NET MVC-Anwendungen erstellen, die eine hervorragende Benutzererfahrung bieten, ohne die Frustrationen von veralteten Code-Strukturen.

Wenn Sie weitere Fragen oder Anmerkungen zu diesem Thema haben, können Sie Ihre Gedanken gerne im Kommentarfeld mitteilen!