Affichage d'une entrée booléenne Nullable dans l'interface utilisateur

Question

J'ai actuellement une page de recherche avancée qui recherche un certain nombre de champs dans ma base de données. Il a plusieurs zones de texte qui recherchent toutes des champs différents, l'utilisateur a la possibilité de laisser des zones de texte vides et elles seront ignorées de la recherche.

Le problème est que je veux maintenant ajouter à cela pour également rechercher certains de mes champs BIT, mon idée originale était d'utiliser des cases à cocher pour cela. le problème que j'ai est que je réalise maintenant que j'ai besoin de 3 états N/A, Vrai, Faux car l'utilisateur a besoin de la capacité de ne pas chercher sur ce champ. La seule vraie idée que j'ai est quelque chose comme une liste déroulante ou une liste de radio avec ces 3 options. Cependant, il pourrait y avoir 5 entrées et plus à la recherche de champs BIT et je ne suis pas sûr que cela deviendrait salissant. Je me souviens quand je développais des applications Windows une case à cocher pouvait aussi avoir un état null/non sélectionné Je ne suis pas sûr s'il y a une alternative pour le web? Je ne voulais pas vraiment avoir droit à un contrôle personnalisé si quelque chose existe?

Je me demandais simplement si quelqu'un avait des suggestions sur la façon dont ils concevraient cela.

Merci

Answer 1

Checkbox dans le monde du web n'ont 2 état: vérifier ou sans contrôle

vous pouvez faire comme dans les services d'information où vous avez une case à cocher pour indiquer si le champ est utilisé dans la recherche à côté radio pour oui et non, mais cela deviendrait salissant.

Je voudrais aller avec une liste déroulante avec toutes les options, Oui et Non. avec Tout étant l'option par défaut.

Answer 2

Vous pouvez potentiellement le faire avec deux boutons radio par option (yes/true et no/false) sans les deux sélectionnés par défaut - cela permettrait à un utilisateur de les laisser vides et les ignorer, ou sélectionnez l'une des options. Le seul vrai problème avec ceci est de savoir comment les remettre à zéro une fois que l'utilisateur sélectionné - qui aurait besoin d'un bouton "Effacer tout", qui réinitialiserait tous les choix, ou vous êtes de retour à une liste avec trois options - soit une radio ou une liste déroulante.

Answer 3

Nullable Boolean a 3 états. Utilisez 3 boutons radio pour que l'utilisateur n'ait pas à cliquer deux fois comme il le ferait avec une liste déroulante. Ils peuvent également annuler la définition de la case à cocher false, ce qu'ils ne peuvent pas faire s'ils ont seulement une case à cocher.

Une manière propre et intuitive d'afficher les résultats est une case à cocher ou rien. Pour MVC3, placez le code C# Razor suivant dans le fichier Views | Shared | DisplayTemplates | Boolean.cshtml pour afficher automatiquement une case à cocher cochée lorsque la valeur est true, une case à cocher non cochée pour false et   pour null. Null signifie généralement que l'utilisateur est indécis, pas sûr, ou pense que la question que vous posez est privée et aucune de vos affaires.

@model bool? 
@{ 
    //ForDisplay Template - similar template for EditFor 

    Dictionary<string, object> cbAttr = new Dictionary<string, object>(); 


    cbAttr.Add("id", ViewData.TemplateInfo.GetFullHtmlFieldId("")); 


    if (Model.HasValue && Model.Value) 
    { 

     cbAttr.Add("checked", "checked"); 
     @Html.CheckBox(ViewData.TemplateInfo.GetFullHtmlFieldId(""), cbAttr); 
    } 
    else if (Model.HasValue && !Model.Value) 
    { 
     @Html.CheckBox(ViewData.TemplateInfo.GetFullHtmlFieldId(""), cbAttr); 
    } 
    else 
    { 
     @Html.DisplayText("&nbsp;"); 
    } 
} 

Pour MVC3 mettre les éléments suivants C# code Razor dans les vues | shared | EditorTemplates | fichier Boolean.cshtml pour montrer automagiquement les boutons 3-radio.

@model bool? 
<div data-ui="buttonset"> 
@{ 
    Dictionary<string, object> yesAttrs = new Dictionary<string, object>(); 
    Dictionary<string, object> noAttrs = new Dictionary<string, object>(); 
    Dictionary<string, object> nullAttrs = new Dictionary<string, object>(); 

    yesAttrs.Add("id", ViewData.TemplateInfo.GetFullHtmlFieldId("") + "Yes"); 
    noAttrs.Add("id", ViewData.TemplateInfo.GetFullHtmlFieldId("") + "No"); 
    nullAttrs.Add("id", ViewData.TemplateInfo.GetFullHtmlFieldId("") + "NA"); 

    if (Model.HasValue && Model.Value) 
    { 
     yesAttrs.Add("checked", "checked"); 
    } 
    else if (Model.HasValue && !Model.Value) 
    { 
     noAttrs.Add("checked", "checked"); 
    } 
    else 
    { 
     nullAttrs.Add("checked", "checked"); 
    } 
} 

@Html.RadioButtonFor(x => x, "true", yesAttrs) 
    <label for="@(ViewData.TemplateInfo.GetFullHtmlFieldId(""))Yes">Yes</label> 
@Html.RadioButtonFor(x => x, "false", noAttrs) 
    <label for="@(ViewData.TemplateInfo.GetFullHtmlFieldId(""))No">No</label> 
@Html.RadioButtonFor(x => x, "null", nullAttrs) 
    <label for="@(ViewData.TemplateInfo.GetFullHtmlFieldId(""))NA">TBD</label> 
</div>