代码之家 › 专栏 › 技术社区 › Gavin

在UI中显示可为空的布尔输入

user-interface asp.net

Gavin · 技术社区 · 17 年前

我目前有一个高级搜索页面,可以搜索数据库中的多个字段。它有几个文本框,所有文本框都搜索不同的字段,用户可以选择将文本框留空,它们将在搜索中被忽略。

问题是,我现在想添加此项以搜索我的一些BIT字段,我最初的想法是使用复选框。我的问题是,我现在意识到我需要3个状态N/A、True、False,因为用户需要不在这个字段上搜索的能力。我唯一真正的想法是一个包含这3个选项的下拉列表或无线电列表。然而,最终可能会有5+个输入搜索BIT字段,我不确定这是否会变得混乱。我记得我过去开发windows应用程序时,复选框也可能有空/未选中状态。我不确定网络是否有其他选择?如果存在自定义控件,我真的不想纠正它吗?

谢谢

3 回复 | 直到 17 年前

freddoo 17 年前

网络世界中的复选框只有两种状态:选中或未选中

您可以像在报告服务中那样,在单选框旁边有一个复选框,指示该字段是否用于搜索“是”和“否”,但这会变得很混乱。

我会选择一个包含“全部”、“是”和“否”选项的下拉菜单。默认选项为“全部”。

Zhaph - Ben Duguid 17 年前

您可以使用每个选项两个单选按钮(yes/true和no/false)来完成此操作,默认情况下两者都没有选择——这将允许用户将它们留空并忽略它们,或者选择其中一个选项。

Jules Bartow 14 年前

可为null的布尔值有3个状态。使用3个单选按钮,这样用户就不必像使用下拉列表那样点击两次。此外,他们还可以撤消将复选框设置为false,如果他们只有一个复选框,则无法做到这一点。

显示结果的一种干净直观的方式是复选框或什么都不做。

对于MVC3,将以下C#Razor代码放入Views | Shared | DisplayTemplates | Boolean.cshtml文件中,以便在true时自动显示选中的复选框,在false时自动显示未选中的复选复选框,而不显示任何内容(   )如果为空。空通常意味着用户犹豫不决,不确定,或者认为你问的问题是私人的,与你无关。

@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;");
    }
}

对于MVC3,将以下C#Razor代码放入Views | Shared | EditorTemplates | Boolean.css文件中,以自动显示3个单选按钮。

@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>