在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
ASP.NET 2.0 中的CheckBoxList控件提供了一组checkbox,这组checkbox可以通过绑定数据源的方式动态产生。 本文将会展示如何通过使用Checkboxlist控件,并且配合使用ASP.NET或Javascript选择/取消这个CheckBoxList中的所有项.
使用ASP.NET Step 1: 打开 Visual Studio. 新建一个网站命名为 ‘CheckUncheckAll’,新建一个页面WebForm1.aspx,拖拽一个CheckBoxList 控件到这个页面. 重命名这个控件为‘cblMulti’.Step 2: 添加完CheckBoxList,鼠标移上后,设计界面中会出现一个小三角提示标签,这个标签可以让你指定一个数据源或手动添加checkbox项到CheckBoxList中。 点击‘Edit Items’打开ListItem的集合编辑器,添加一些项,如下图所示: 备注: 如果你不想使用这个集合编辑器而是想通过编程的方式添加checkbox项。在Page load事件中添加如下代码即可。 protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { cblMulti.Items.Add(new ListItem("Items 1", "Items 1")); cblMulti.Items.Add(new ListItem("Items 2", "Items 2")); cblMulti.Items.Add(new ListItem("Items 3", "Items 3")); } } 另外,你也可以像下面一样将checkbox list绑定到datareader上: // 假定GetListItems返回一个sqldatareader里customerid和customername项的列表 SqlDataReader dr = GetListItems(); cblMulti.DataSource = dr; cblMulti.DataValueField = "cust_no"; cblMulti.DataTextField = "cust_name"; cblMulti.DataBind(); 为了简便起见,在示例中我们通过编程的方式:在page load事件中通过使用cblMulti.Items.Add(new ListItem(text,value))增加checkbox项。
Step 3: 从工具箱中拖拽两个LinkButton到页面中,分别重命名为:‘lbAll’ 和 ‘lbNone’ 代码如下 : <asp:LinkButton ID="lbAll" runat="server">Select All</asp:LinkButton> <asp:LinkButton ID="lbNone" runat="server">Select None</asp:LinkButton>
Step 4: 双击这两个控件,为它们生成click事件。在这两个link button的click事件中,添加如下代码: // Check All protected void lbAll_Click(object sender, EventArgs e) { foreach (ListItem li in cblMulti.Items) { li.Selected = true; } }
// Uncheck All protected void lbNone_Click(object sender, EventArgs e) { foreach (ListItem li in cblMulti.Items) { li.Selected = false; } }
Step 5 : 运行这个程序测试。点击‘Select All’可以一次选中所有的checkbox.类似的,点击‘Select None’可以一次取消所有的checkbox的选择。 这样就完成了,运行效果如下:
使用Javascript 我们可以使用javascript实现同样的功能。在javascript例子中,我们给这个例子增加一些复杂性。 我们将会使用一个继承master page页面的例子,并且使用两个checkboxlist代替原来的一个添加到我们的页面中。步骤如下: Step 1: 在刚才项目上新建一个母板页Site1.Master,新建一个带母板页的页面WebForm2.aspx. 拖拽两个CheckBoxList 控件到这个页面。重命名控件为:‘cbl1’ 和 ‘cbl2’. <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:CheckBoxList ID="cbl1" runat="server"> </asp:CheckBoxList><br /> <asp:CheckBoxList ID="cbl2" runat="server"> </asp:CheckBoxList> </asp:Content>
Step 2: 在Page_Load()事件中增加项到checkboxlist 控件中。 protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { cbl1.Items.Add(new ListItem("Items 1", "Items 1")); cbl1.Items.Add(new ListItem("Items 2", "Items 2")); cbl1.Items.Add(new ListItem("Items 3", "Items 3")); cbl2.Items.Add(new ListItem("Items 4", "Items 4")); cbl2.Items.Add(new ListItem("Items 5", "Items 5")); cbl2.Items.Add(new ListItem("Items 6", "Items 6"));
} }
Step 3: 现在在这个页面中添加全选功能。再往下进行之前,我们先理解下如何传递MasterPage子页面中的控件到javascript函数中。 当页面在浏览器中被显示时,子页面和master page会合并成一个页面。这意味着控件的id会重新命名。 ASP.NET重命名这些id,这样可以避免命名冲突。为了处理这些重命名的控件,ASP.NET提供了两种方法获得这些经过重命名的控件,即‘Control.ClientID’ 和 ‘Control.UniqueID’. 理解了这些后,我们就可以添加一些控件到页面中,然后使用Control.ClientID传递各个控件到javascript函数中。 我们的javascript函数原型如下: function CheckBoxListSelect(<pass the control>, <state i.e true or false>) { // Our code will come here }
Step 4: 在代码中各个checkboxlist下面增加两个链接标签,记住我们使用了两个CheckBoxList. <asp:CheckBoxList ID="cbl1" runat="server"></asp:CheckBoxList><br /> Select <a id="A1" href="#">All</a> | <a id="A2" href="#">None</a> <asp:CheckBoxList ID="cbl2" runat="server"></asp:CheckBoxList><br /> Select <a id="A3" href="#">All</a> | <a id="A4" href 全部评论
专题导读
上一篇:[导入]怎样从ASP.NET 2.0中读取连接字符串发布时间:2022-07-10下一篇:Asp.net 2.0的一些小心得 (二) ObjectDataSource的使用发布时间:2022-07-10热门推荐
热门话题
阅读排行榜
|
请发表评论