Asp.Net MVC 4 Generic Element

Question

Désolé pour le titre générique, mais je ne sais pas comment appeler l'élément que je veux créer. C'est ce dont j'ai besoin ... j'ai essayé d'afficher l'image, mais je n'ai pas encore les privilèges nécessaires. Tellement mal essayer de le décrire.

Ici sur stackoverflow, sur la page de la question, après chaque titre et résumé, il y a des boîtes affichant les étiquettes des questions. Je veux exactement le même aspect, mais à la place des liens, ces cases doivent agir de la même manière qu'une liste de boutons radio. Je ne peux en choisir qu'un seul à la fois et quand j'en choisis un, celui qui est sélectionné recevra un style différent. Après avoir soumis le formulaire, je devrais être en mesure de récupérer l'élément sélectionné dans le contrôleur. J'utilise Asp.Net MVC4 et les options qui font que l'élément proviendra d'un contrôleur.

Désolé pour la question sans code ou quelque chose que je fais déjà. Mais j'ai cette nécessité et je ne sais même pas si ce genre de style ou d'élément a un nom ou un mot-clé spécifique D.

Est-ce que vous savez d'où commencer avec quelque chose (tutoriels avec résultat final similaire?)? Merci pour l'aide et désolé pour le mauvais anglais.

---

code Après avoir examiné le lien de réponses proposées

CSS code

entrée

[type = la radio] {display: none;}

.rbLista durée {font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-serif;

taille de police: 12px; arrière-plan: RVB (217 217 217); bordure: 1px RVB solide (217, 2117, 217); } . Span span: hover {border: 1px RVB solide (54,52,53); arrière-plan: RVB (54,52,53); Couleur blanche; }

Entrée .rbLista [type = radio]: cochée + span {arrière-plan: # D71712; couleur: #fff; bordure: 1px solide # D71712; }

Entrée .rbLista [type = radio]: cochée + span: hover {background: # D71712; }

et Afficher le code

<section class="rbLista"> 
     @foreach (var item in Model.ChamadoDetalhe.Transitos) 
     { 
      <label> 
       @Html.RadioButtonFor(x => x.NovoTransito.Transito, @item.Text, new {      @id = item.Text, @text = item.Text })<span>@item.Text</span> 
      </label> 
     } 
     @Html.ValidationMessageFor(x => x.NovoTransito.Transito) 
    </section> 

Answer 1

Vous pouvez essayer quelque chose like this. Voici un working demo.