【问题标题】:How Can I Bind/Render An ASP.NET Dataset As Buttons如何将 ASP.NET 数据集绑定/呈现为按钮
【发布时间】:2014-01-26 05:20:37
【问题描述】:

使用 ASP.NET WebForms,什么是获取 DataSet 的好方法,而不是将其绑定到线性 ListBox 或 DropDownList 控件(例如),将其绑定到看起来像一组按钮或切换的控件可能是排队或堆叠等?

一个示例 UI 实现可能看起来像一个数字键盘...

Please Choose:
[1] [2] [3]
[4] [5] [6]
[7] [8] [9]
Submit >>

...数字 1..9 来自 DataSet(代表一些数据结构,可能是一组可供选择的产品 ID),已呈现为键盘,用户可以单击/选择一个或更多项目/按钮。完成后,他们单击提交,控件的事件处理提交以提取所选项目数据(即绑定项目/行的 ID)。

作为一个扩展,这将是一个可重用的控件,这样我们就可以做这样的事情......

Step 1. Please Choose item:
[1] [2] [3]
[4] [5] [6]
[7] [8] [9]
Submit >>

----------------------

You selected: 1, 5, 8
Step 2. Please Choose Sub-item:
[A] [B] [C] [D] [E] [F]
[G] [H] [I] [J] [K] [L]
[M] [N] [O] [P] [Q] [R]
Submit >>

----------------------

You selected: J, Q
Step 3. Please Choose Sub-sub-item:
[Apple] [Pear] [Orange]
[Kiwi] [Lemon] [Grape]
Submit >>

...如果用户从第 1 步中选择,则第 2 步控件根据他们第 1 步的选择动态创建/填充/呈现,然后他们从呈现第 3 步的第 2 步中选择(基于2),然后进行第 3 步选择,等等,直到最终的提交,它在幕后做任何事情。

是否存在启用 UI 方面的现有 ASP.NET 控件,或者它可能需要全部或部分通过额外的 JavaScript(例如 jQuery)进行一些繁重的工作? (绑定和动态创建当然是我已经可以使用用户控件之类的东西了。)

非常感谢。

【问题讨论】:

    标签: javascript asp.net button user-interface webforms


    【解决方案1】:

    是的,您可以使用checkbox-list 控件来获得您想要的。这是您可以使用的示例标记:

      <asp:CheckBoxList id="checkboxlist1" 
           AutoPostBack="True"
           CellPadding="5"
           CellSpacing="5"
           RepeatColumns="2"
           RepeatDirection="Vertical"
           RepeatLayout="Flow"
           TextAlign="Right"
           OnSelectedIndexChanged="Check_Clicked"
           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>
    

    然后您可以使用jqueryui button 在客户端获取自定义样式。

    【讨论】:

    • 谢谢,这看起来很棒!我试试看。
    猜你喜欢
    • 1970-01-01
    • 2017-01-02
    • 1970-01-01
    • 2015-11-19
    • 2012-02-13
    • 1970-01-01
    • 2014-09-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多