`

跨页面实现多选

阅读更多
本文介绍如何在ASP.NET中实现多页面选择的问题。其具体思路很简单:用隐藏的INPUT记住每次选择的项目,在进行数据绑定时,检查保存的值,再在DataGrid中进行选中显示。下面时完整的代码和例子:

查看例子
SelectMultiPages.aspx


<%@ Page EnableViewState="true" CodeBehind="SelectMultiPages.aspx.cs" Language="c#" 
AutoEventWireup="false" Inherits="eMeng.Exam.SelectMultiPages" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>跨页面实现多选</title>
<META http-equiv="content-type" content="text/html; charset=gb2312">
<style>
* {FONT-SIZE:12PX}
#Status {text-align:left}
</style>
<script language="JAVASCRIPT">
function AddRemoveValues(oChk) { 
//在处理这个地方需要注意的是:你保存的值应该具有唯一性,这样才能不会替换错误的项。
if(oChk.checked)
SelectMultiPage.HdnSelectedValues.value += "," + oChk.value; 
else
SelectMultiPage.HdnSelectedValues.value = SelectMultiPage.HdnSelectedValues.value.replace("," + oChk.value,""); 
}
</script>
</HEAD>
<BODY>
<form id="SelectMultiPage" runat="server">
<asp:datagrid id="DataGrid1" HorizontalAlign="Center" AutoGenerateColumns="False" Width="600px"
		AllowPaging="True" runat="server">
	<AlternatingItemStyle BackColor="#EEEEEE"></AlternatingItemStyle>
	<HeaderStyle BackColor="#AAAADD" Font-Bold="True" HorizontalAlign="Center"></HeaderStyle>
	<PagerStyle HorizontalAlign="Right" Mode="NumericPages" Visible="True"></PagerStyle>
	<Columns>
		<asp:TemplateColumn HeaderText="选择">
			<ItemTemplate>
				<input type="checkbox" runat="server" id="chkSelect" onclick="AddRemoveValues(this)"
					value='<%#DataBinder.Eval(Container.DataItem,"Title")%>'/>
			</ItemTemplate>
		</asp:TemplateColumn>
		<asp:TemplateColumn HeaderText="文章标题">
			<ItemTemplate>
				<asp:Literal Text='<%# DataBinder.Eval(Container.DataItem, "Title") %>' runat="server" ID="TitleShow"/>
			</ItemTemplate>
		</asp:TemplateColumn>
		<asp:TemplateColumn HeaderText="发布时间">
			<ItemTemplate>
				<asp:Literal Text='<%# DataBinder.Eval(Container.DataItem, "CreateDate").ToString() %>' runat="server"/>
			</ItemTemplate>
		</asp:TemplateColumn>
	</Columns>
</asp:datagrid>
<div align=center>
<asp:button id="Button1" runat="server" Text="得到所选的值"></asp:button>
<div id="Status">
<asp:label id="Label1" runat="server"></asp:label>
</div>
<INPUT id="HdnSelectedValues" type="hidden" name="HdnSelectedValues" runat="server">
</div>
</form>
</BODY>
</HTML>

SelectMultiPages.aspx.cs
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.OleDb;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace eMeng.Exam
{
/// <summary>
/// SelectMultiPages 的摘要说明。
/// </summary>
public class SelectMultiPages : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Button Button1;
protected System.Web.UI.WebControls.Label Label1;
protected System.Web.UI.HtmlControls.HtmlInputHidden HdnSelectedValues;
protected System.Web.UI.WebControls.DataGrid DataGrid1;

private void Page_Load(object sender, System.EventArgs e)
{
	// 在此处放置用户代码以初始化页面
	if(!Page.IsPostBack)
	BindData();
}
private void DataGrid1_PageIndexChanged(object source, DataGridPageChangedEventArgs e)
{
	DataGrid1.CurrentPageIndex = e.NewPageIndex;
	BindData(); 
}

void BindData()
{
	OleDbConnection cn = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" 
		+ HttpContext.Current.Server.MapPath("aspx.mdb"));
	OleDbDataAdapter da = new OleDbDataAdapter("Select Title, CreateDate from Document",cn);
	DataSet ds = new DataSet();
	da.Fill(ds);
	DataGrid1.DataSource= ds;
	DataGrid1.DataBind();
}

private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
	//重新显示所选择的项目
	if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
	{
		if(HdnSelectedValues.Value.IndexOf(((Literal)e.Item.Cells[1].FindControl("TitleShow")).Text) >= 0 )
		{
			HtmlInputCheckBox ChkSelected = (HtmlInputCheckBox)(e.Item.Cells[0].FindControl("ChkSelect"));
			ChkSelected.Checked = true;
		}
	}
}
private void Button1_Click(object sender, System.EventArgs e)
{
	//为了显示的方便进行替换的
	Label1.Text = HdnSelectedValues.Value.Replace(",","<li>");
}

#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
	//
	// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
	//
	InitializeComponent();
	base.OnInit(e);
}

/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{    
	this.DataGrid1.ItemDataBound += 
		new System.Web.UI.WebControls.DataGridItemEventHandler(this.DataGrid1_ItemDataBound);
	this.DataGrid1.PageIndexChanged += 
		new System.Web.UI.WebControls.DataGridPageChangedEventHandler(this.DataGrid1_PageIndexChanged);
	this.Button1.Click += new System.EventHandler(this.Button1_Click);
	this.Load += new System.EventHandler(this.Page_Load);

}
#endregion	

}
}

 

分享到:
评论

相关推荐

    GridView控件中实现跨页面多选

    本篇文章将详细讲解如何在GridView控件中实现跨页面多选的功能,这对于需要批量处理或操作大量数据的场景至关重要。 首先,我们需要了解GridView的基本结构。GridView控件默认支持单选,即用户只能在一个页面内选择...

    asp.net跨页面多选

    在本场景中,我们关注的是"asp.net跨页面多选",这通常指的是在ASP.NET环境中实现用户在多个页面间传递选择的数据,例如通过复选框(Checkbox)让用户在多个选项中进行多选,并在页面跳转后依然保持用户的选择。...

    GridView实现行颜色交替及与checkbox 结合实现多选的源码

    这个源码示例主要展示了如何在GridView中实现行颜色交替以及与checkbox结合以实现多选功能。这些功能可以增强用户界面的可读性和交互性,使得大量数据的浏览和操作更为便捷。 首先,关于“行颜色交替”,这是一种...

    基于jquery实现的多选下拉框

    在这个项目中,我们将利用jQuery的强大功能来实现多选下拉框的功能。 1. **引入jQuery库**:在HTML文件中,通过添加`&lt;script&gt;`标签引用jQuery的CDN链接或本地文件,确保页面加载时可以使用jQuery方法。例如: ```...

    Java中checkbox实现跨页多选的方法

    在Java Web开发中,实现checkbox跨页多选功能是一项常见的需求,特别是在数据量大、需要分页展示的情况下。这个功能允许用户在多个页面上选择不同的选项,并在提交时能够保存所有选择,无论这些选项分布在多少个页面...

    带自动检索的多选下拉框

    在实际应用中,开发者需要将这个组件的样式和脚本文件引入到HTML页面中,并按照提供的API或示例代码配置和调用多选下拉框功能。同时,后端开发者需要在服务器端编写逻辑,处理前端发送的选择数据,可能涉及到数据库...

    js多级联动多选checkbox插件

    在JavaScript开发中,多级联动多选checkbox插件是一种常见的交互元素,用于实现层次结构数据的筛选和选择。这类插件通常用在如地区选择、类别分类等场景,用户可以通过逐级选择来过滤出需要的结果。`cascadebox-...

    jS checkbox 多选

    在网页开发中,...前者适用于跨页面共享状态,后者则适合在用户关闭浏览器后仍能恢复选择。这两种方法都需要配合JavaScript事件监听和DOM操作来实现。在实际应用中,还需要考虑安全性、兼容性和用户体验等因素。

    轻量级Jquery下拉多选

    3. **jQuery实现多选** 在JavaScript中,多选下拉框可以通过设置`&lt;select&gt;`元素的`multiple`属性来实现。通过jQuery,我们可以轻松地为这些元素添加事件监听器,如`change`事件,以便在用户选择或取消选择选项时...

    SelectBox下拉复选框多选插件

    在下拉列表中实现多选,就是将这种多选功能融入到下拉菜单中,用户可以选择并查看已选的项目。 3. **下拉列表**:下拉列表是网页设计中常见的交互元素,通过点击一个按钮显示或隐藏选项列表。它节省了页面空间,...

    qt实现echart和百度地图附加多选combox控件

    在本文中,我们将深入探讨如何使用Qt框架来实现ECharts图表、百度地图,并结合自定义的多选ComboBox控件——`mymulticombobox`。这个项目的主要目标是创建一个用户界面,允许用户通过多选ComboBox选择不同的选项,...

    DropDownCheckList、多选dropDownList

    为了确保良好的浏览器兼容性,开发者可能需要编写跨浏览器的代码或者借助polyfill库,以支持那些不完全支持新特性的老旧浏览器。 `DropDownCheckList`的优势主要体现在以下几点: 1. 用户体验:相比于传统的多页面...

    jsp/html 实现下拉复选框

    在实际开发中,可能会遇到的问题包括:样式兼容性(尤其是跨浏览器)、选项过多导致的滚动问题、以及如何通过JavaScript优雅地处理用户的选择等。解决这些问题通常需要对HTML、CSS和JavaScript有深入的理解,并可能...

    Select多选

    1. **多选模式**:layui-select-ext的多选模式允许用户同时选择多个选项,通过复选框或拖拽操作实现,这对于需要处理多维度数据的场景尤其有用,如设置角色权限、选择分类等。 2. **搜索功能**:内置的搜索功能让...

    .net简易多选直接上传控件dll

    .NET简易多选直接上传控件DLL是一种用于.NET框架的组件,它允许用户在Web应用程序中实现便捷的多文件选择和上传功能。这个控件是基于WebControl类进行扩展的,这意味着它可以轻松地集成到ASP.NET页面中,为开发者...

    JQuery DIV模拟下拉框(单选、多选)

    确保跨浏览器兼容性是前端开发的重要环节,因为不同的浏览器可能对某些CSS属性或JavaScript特性有不同的支持。 6. **代码实现**:在提供的文件列表中,"DIV模拟SELECT多选.html"和"模拟下拉框.html"可能是包含此...

     Asp.net简单多选投票系统

    7. **安全性**:系统应具备一定的安全性,防止SQL注入、跨站脚本攻击(XSS)等常见的Web安全问题。 8. **权限管理**:对于更复杂的系统,可能会有用户注册、登录功能,以便追踪每个投票者的投票情况,同时设置管理员...

    element ui分页多选,翻页记忆的实例

    本文将介绍如何使用Element UI实现带有分页功能的表格组件,并实现多选及翻页记忆功能。这将涉及到Element UI的表格、分页组件以及组件间的数据交互。 ### Element UI分页组件的使用 Element UI的分页组件(el-...

    无限级树形结构组件,支持单选和多选组件,支持搜索,面包屑类型导航

    此组件可以"打包小程序、H5页面、APP",这表明它是跨平台的,基于uni-app框架开发。uni-app是一个多端开发框架,能够编写一次代码,然后在微信小程序、支付宝小程序、百度小程序、QQ小程序等多个平台上运行,同时也...

    jQuery实现带多选和过滤功能的树状结构下拉框插件源码.zip

    这个"jQuery实现带多选和过滤功能的树状结构下拉框插件源码.zip"是一个专为网页开发设计的工具,旨在提供一种用户友好的方式来展示和操作具有层次结构的数据。 该插件的核心功能包括: 1. **多选功能**:允许用户...

Global site tag (gtag.js) - Google Analytics