Discussion :

[AMP29]

Bonjour,
Certainement naïvement, j'ai cru pouvoir simplement coller ce code dans ma vue cshtml pour obtenir une liste de cases à cocher :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
        <div>
            <asp:CheckBoxList id="CheckCouleurslist"
                              OnDataBound="Couleurs_DataBound"
                              AutoPostBack="True"
                              CellPadding="5"
                              CellSpacing="5"
                              RepeatColumns="2"
                              RepeatDirection="Vertical"
                              RepeatLayout="Flow"
                              TextAlign="Right"
                              OnSelectedIndexChanged="Check_Clicked"
                              ToolTip="Vert"
                              runat="server">
 
                <asp:ListItem>Item 1</asp:ListItem>
                <asp:ListItem>Item 2</asp:ListItem>
                <asp:ListItem>Item 3</asp:ListItem>
                <asp:ListItem>Item 4</asp:ListItem>
                <asp:ListItem>Item 5</asp:ListItem>
                <asp:ListItem>Item 6</asp:ListItem>
 
            </asp:CheckBoxList>
        </div>

Mais je n'obtiens rien :


Il n'y a pas de cases à cocher.
J'ai beau chercher sur le net, on dirait que je suis le seul à qui ça arrive !

Merci ne m'expliquer ce que je n'ai pas compris.
J'ai besoin d'utiliser OnDataBound pour ajouter des images aux items.

Merci

[BRUNO71]

Bonjour,
Il semble que le problème vienne du fait que les contrôles webforms asp:CheckBoxList et asp:ListItem ne sont pas directement compatibles avec Razor vues cshtml, car Razor utilise une syntaxe de balisage différente et est généralement associé à MVC plutôt qu'à WebForms.

Pour afficher une liste de cases à cocher dans une vue Razor (.cshtml), vous pouvez utiliser HTML standard et la syntaxe Razor.

Vous aurez besoin d'un modèle pour représenter vos éléments de liste :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
public class CouleurModel
{
    public string Name { get; set; }
    public bool IsChecked { get; set; }
    public string ImageUrl { get; set; }
}

Passer la liste à la vue :
Dans votre contrôleur, vous pouvez préparer une liste d'objets CouleurModel et la passer à la vue :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
public IActionResult Index()
{
    var couleurs = new List<CouleurModel>
    {
        new CouleurModel { Name = "Item 1", IsChecked = false, ImageUrl = "url1" },
        new CouleurModel { Name = "Item 2", IsChecked = false, ImageUrl = "url2" },
        new CouleurModel { Name = "Item 3", IsChecked = false, ImageUrl = "url3" },
        new CouleurModel { Name = "Item 4", IsChecked = false, ImageUrl = "url4" },
        new CouleurModel { Name = "Item 5", IsChecked = false, ImageUrl = "url5" },
        // etc
    };
    return View(couleurs);
}

Dans votre fichier .cshtml, vous pouvez rendre la liste de cases à cocher comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
@model List<CouleurModel>
 
<div>
    @for (int i = 0; i < Model.Count; i++)
    {
        <div>
            <input type="checkbox" id="CheckCouleurslist_@(i)" name="CheckCouleurslist" value="@Model[i].Name" @(Model[i].IsChecked ? "checked" : "") />
            <label for="CheckCouleurslist_@(i)">
                <img src="@Model[i].ImageUrl" alt="@Model[i].Name" />
                @Model[i].Name
            </label>
        </div>
    }
</div>

Vous devriez pouvoir afficher une liste de cases à cocher avec des images dans votre vue Razor.
Si vous avez besoin de fonctionnalités supplémentaires telles que des événements OnDataBound ou OnSelectedIndexChanged, il faudra les gérer via JavaScript dans le contexte de Razor et MVC.

[AMP29]

Merci pour votre réponse.
Comme je n'arrivais pas à faire fonctionner CheckBoxList, j'ai mis le problème de côté.
J'ai tout entré en dur en Html. Ce qui a été un peu galère.

Je vais essayer votre solution.