Répéteur ASP avec plusieurs balises <ItemTemplate>

Question

Très nouveau pour ASP.NET. Nous avons une page qui affiche une liste de choses, mais nous voulons ajouter différentes options pour l'affichage de la liste (comme des vignettes avec des vignettes, comme des listes de textes, etc.). Notre code suit essentiellement ce format:

<asp:Repeater runat="server" ID="Repeater"> 
    <ItemTemplate> 
     // HTML for Thumbnail-tile view 
    </ItemTemplate> 
</asp:Repeater> 

Nous avons ajouté des boîtes de radio pour sélectionner la vue de la liste ou la vue de tuiles, mais je dois trouver un moyen de formater les <ItemTemplate> balises différemment selon que l'on est sélectionné mais je me bats. Ce que j'ai essayé:

1. répétiteurs séparés

Cela a été jusqu'à présent le plus de succès, mais il semble comme une solution en désordre, et il faudra un peu refactorisation de code. Je veux m'assurer qu'il n'y a pas de meilleures options avant de m'y engager. Fondamentalement, j'ai deux répéteurs avec leurs champs <ItemTemplate> respectifs.

<asp:Repeater runat="server" ID="Repeater1> 
    <ItemTemplate> 
     // HTML for Thumbnail-tile view 
    </ItemTemplate> 
</asp:Repeater> 

<asp:Repeater runat="server" ID="Repeater2> 
    <ItemTemplate> 
     // HTML for List view 
    </ItemTemplate> 
</asp:Repeater> 

La page appelle ensembles DataSource et appelle DataBind() sur le répéteur par défaut sur la charge de page et un gestionnaire pour chaque bouton radio videra un, et remplir l'autre pour leurs listes respectives. Deux répéteurs semblent être exagérés, et pour que cela fonctionne parfaitement, nous allons devoir refactoriser un peu.

2. Placeholders

mise en forme Fondamentalement, le code ainsi:

<asp:Repeater runat="server"> 
    <ItemTemplate> 
     <asp:PlaceHolder runat="server" ID="???"></asp:Placeholder> 
    </ItemTemplate> 
</asp:Repeater> 

Générez le code pour le modèle dans le code sous-jacent en fonction de nos boutons radio, et envoyez simplement cela au client. Élégant. Le seul problème est que l'identifiant de l'espace réservé ne peut pas être un doublon, et dans un répéteur c'est exactement ce que ça va être.

3. Masquer celui que nous ne l'utilisons

Fondamentalement, nous avons mis le code pour

<asp:Repeater runat="server"> 
    <ItemTemplate> 
     <div class="ListView" style="display: block"> // HTML for List view</div> 
     <div class="TileView" style="display: none">> // HTML for Thumbnail-Tile view </div> 
    </ItemTemplate> 
</asp:Repeater> 

Et le gestionnaire d'événements de bouton radio simplement mettre à jour le css sur la div appropriée. Cela a une incidence sur les performances, car nous continuons à charger les vignettes, les URL et d'autres informations pour la liste masquée. Nous voulons éviter tous les frais inutiles pour ce projet, donc cela va être hors de question. Est-ce que j'ai manqué d'autres façons d'aborder ce problème? Comme je l'ai dit, je suis assez nouveau sur ASP.NET, donc je ne suis pas sûr d'avoir considéré toutes les fonctionnalités potentielles. J'ai lu à propos de la propriété ItemTemplateSelector, mais je n'arrive pas à comprendre comment l'utiliser.

Answer 1

Une autre option serait d'utiliser CSS pour que les données circulent comme vous le souhaitez.

<style type="text/css"> 
    .list-view { 
     width: 100%; 
    } 
    .thumbnail-view { 
     width: 25%; 
     float: left; 
    } 
</style> 

<asp:Repeater runat="server" ID="repeater1" OnItemDataBound="repeater1_ItemDataBound"> 
    <ItemTemplate> 
     <asp:Panel runat="server" ID="panelContent"> 
      // Your content 
     </asp:Panel> 
    </ItemTemplate> 
</asp:Repeater> 

En fonction de la sélection du RadioButtonList, il suffit d'alterner entre les deux classes CSS. Chaque fois que le répéteur lie ses données, recherchez le panneau dans la ligne et définissez la classe CSS à ce qu'elle doit être.L'inconvénient de cette solution serait d'être assez familier avec CSS. Si ce n'est pas le cas, je vous recommande fortement de vous familiariser avec cela. Surtout si vous allez continuer avec le développement web.

Sinon, je préférerais probablement votre première option. J'aime l'idée de les séparer en deux répéteurs et d'utiliser seulement celui dont vous avez besoin. Cela le rend facile à travailler dans le futur. Si vous devez apporter des modifications à un répéteur, faites-le simplement sur la page .aspx.