Création d’une Table Personnalisable avec des Boutons CommandArgument dans ASP.NET MVC

En tant que développeurs, nous rencontrons souvent des défis lors de la transition d’un framework à un autre. Si vous avez de l’expérience avec ASP.NET WebForms, vous pourriez vous retrouver bloqué en essayant de mettre en œuvre des fonctionnalités dans ASP.NET MVC, en particulier lorsqu’il s’agit de créer des éléments de table interactifs avec des boutons.

Dans cet article de blog, nous allons aborder une question courante : Comment créer votre propre table avec des boutons comportant la propriété CommandArgument dans ASP.NET MVC ? Nous allons non seulement clarifier le problème, mais également fournir une solution robuste qui adhère aux principes MVC.

Comprendre le Problème

Le problème survient lorsque vous essayez d’utiliser un bouton WebForms dans une application ASP.NET MVC. Voici une version simplifiée de la structure de table que vous pourriez essayer de créer :

<div>
    <table>
        <thead>
            <tr>
                <td>Nom du port</td>
                <td>Version actuelle du port</td>
                <td>Nouvelle version du port</td>
                <td>Mettre à jour</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="Mettre à jour"
                        CommandArgument="<% ip.PortName %>" />
                </td>
            </tr>
        <% } %>
    </table>
</div>

Dans ce fragment de code, vous pourriez recevoir des erreurs concernant l’incapacité de résoudre la variable ip dans la propriété CommandArgument. Cela est dû aux différences fondamentales dans la façon dont ASP.NET MVC traite les vues par rapport à WebForms.

La Solution : Implémentation Correcte des Boutons dans ASP.NET MVC

Voici deux approches efficaces pour atteindre la fonctionnalité souhaitée tout en respectant les règles MVC :

Option 1 : Utiliser des Éléments Input

1. Remplacer le bouton WebForms par un élément input ou un bouton HTML.
2. Envelopper le bouton dans un élément form qui pointe vers une action de contrôleur pour gérer la mise à jour.

Voici comment vous pouvez structurer votre table avec un bouton input :

<div>
    <table>
        <thead>
            <tr>
                <td>Nom du port</td>
                <td>Version actuelle du port</td>
                <td>Nouvelle version du port</td>
                <td>Mettre à jour</td>
            </tr>
        </thead>
        @foreach (var ip in Ports)
        {
            <tr>
                <td>@ip.PortName</td>
                <td>@ip.CurrentVersion</td>
                <td>@ip.NewVersion</td>
                <td>
                    <form action="/NomDuContrôleur/NomDeL'Action" method="post">
                        <input type="hidden" name="portName" value="@ip.PortName" />
                        <input type="submit" value="Mettre à jour" />
                    </form>
                </td>
            </tr>
        }
    </table>
</div>

Option 2 : Utiliser des Liens avec des Chaînes de Requête

Une autre alternative consiste à utiliser des hyperliens pour naviguer vers l’action. Vous pouvez passer les paramètres nécessaires via la chaîne de requête.

<div>
    <table>
        <thead>
            <tr>
                <td>Nom du port</td>
                <td>Version actuelle du port</td>
                <td>Nouvelle version du port</td>
                <td>Mettre à jour</td>
            </tr>
        </thead>
        @foreach (var ip in Ports)
        {
            <tr>
                <td>@ip.PortName</td>
                <td>@ip.CurrentVersion</td>
                <td>@ip.NewVersion</td>
                <td>
                    <a href="/NomDuContrôleur/NomDeL'Action?portName=@ip.PortName">Mettre à jour</a>
                </td>
            </tr>
        }
    </table>
</div>

Résumé

Bien que la transition d’ASP.NET WebForms à MVC puisse être difficile, comprendre les différences dans la conception des frameworks vous aidera à mettre en œuvre des solutions plus encapsulées et standardisées.

Points Clés à Retenir :

• Évitez d’utiliser des composants WebForms dans MVC.
• Utilisez des éléments HTML (input ou hyperliens) au lieu de asp:Button.
• Assurez-vous que les actions renvoient à vos contrôleurs, permettant une gestion dynamique des données.

En suivant ces approches, vous pouvez créer des tables interactives bien structurées dans vos applications ASP.NET MVC, offrant une excellente expérience utilisateur sans les frustrations des structures de code héritées.

Si vous avez d’autres questions ou réflexions sur ce sujet, n’hésitez pas à partager vos pensées dans la section des commentaires !