.NET 藏经阁 - 技术论坛 » .NET » ASP.NET » 使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动

1/1页1 跳转到页查看:407

发新话题

回复该主题

使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动

doriandeng

组别:管理员
性别:
积分:1786
帖子:1716

2008-07-04 12:22 | 只看楼主 树型| 收藏| 小中大 1^#

使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动

这里使用到了两张表：部门表和员工表 SQL脚本如下：

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Emp]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[Emp]
GO
CREATE TABLE [dbo].[Emp] (
[EmpID] [int] IDENTITY (1, 1) NOT NULL ,
[EmpName] [varchar] (20) COLLATE Chinese_PRC_CI_AS NULL ,
[Age] [int] NULL ,
[Dept] [int] NULL ,
[DelFlag] [bit] NULL
) ON [PRIMARY]
GO
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Department]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[Department]
GO
CREATE TABLE [dbo].[Department] (
[DeptID] [int] IDENTITY (1, 1) NOT NULL ,
[Name] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY]
GO

前台代码：

<HTML>
<HEAD>
<title>ListBoxToListBox</title>
<meta name="GENERATOR" C>
<meta name="CODE_LANGUAGE" C>
<meta name="vs_defaultClientScript" c>
<link href="../CSS/BasicLayout.css" rel="stylesheet" type="text/css">
<meta name="vs_targetSchema" c>
<style type="text/css"> .fsize { FONT-SIZE: 10pt } </style>
</HEAD>
<body MS_POSITI>
<script language="javascript">
function BindListEmp()
{
var DeptID=document.getElementById("ddlDept").value;
var obj=AjaxMethod.GetEmpByDeptID(DeptID);
if(obj.value!=null)
{
document.all("listEmployees").length=0;
var ds=obj.value;
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
{
for(var i=0; i<ds.Tables[0].Rows.length; i++)
　　　　 {
　　　　 var name=ds.Tables[0].Rows[i].EmpName;
　　　　　　 var id=ds.Tables[0].Rows[i].EmpID;
　　　　　　 //alert(name);
　　　　　　 //alert(id);
　　　　　　 document.all("listEmployees").options.add(new Option(name,id));
　　　　 }
}
else
{
}
}
else
{
}
}
</script>
<script language="javascript">
function GetData()
{
listNewEmp = eval("document.FrmListBox.listNewEmp");
document.getElementById("txtEmpID").value="";
for(i=0;i<listNewEmp.length;i++)
{
document.FrmListBox.txtEmpID.value+=listNewEmp.options[i].value+",";
}
}
function AddItem(ControlName)
{
Control = null;
Control=eval("document.FrmListBox.listNewEmp");
var x=0;
var i=0;
var y=0;
listEmployees=eval("document.FrmListBox.listEmployees");
listNewEmp=eval("document.FrmListBox.listNewEmp");
var j=listEmployees.length;
for(i=0;i<j;i++)
{
if(listEmployees.options[i].selected==true)
{
//alert(Control.length);
if(Control.length==0)
{
Control.add(new Option(listEmployees[i].text,listEmployees.options[i].value));
listNewEmp=eval("document.FrmListBox.listNewEmp");
continue;
}
else
{
for(x=0;x<listNewEmp.length;x++)
{
if(listEmployees.options[i].value==listNewEmp.options[x].value)
{
y++;
}
}
}
if(y==0)
{
Control.add(new Option(listEmployees[i].text,listEmployees.options[i].value));
listNewEmp=eval("document.FrmListBox.listNewEmp");
}
}
}
}
function RemoveItem(ControlName)
{
Control = null;
Control=eval("document.FrmListBox.listNewEmp");
var j=Control.length;
if(j==0) return;
for(j;j>0;j--)
{
if(Control.options[j-1].selected==true)
{
Control.remove(j-1);
}
}
}
</script>
<form id="FrmListBox" method="post" runat="server">
<table align="center" border="1" style="BORDER-COLLAPSE: collapse" borderColor="#ccccc"
width="80%" class="fSize">
<TR>
<TD style="WIDTH: 191px" align="right" width="191" height="30">公司部门：</TD>
<TD height="30"><asp:dropdownlist id="ddlDept" runat="server" Width="112px"></asp:dropdownlist></TD>
</TR>
<TR>
<TD style="WIDTH: 191px" align="right" width="191" height="30">项目成员：</TD>
<TD height="30">
<TABLE id="Table3" cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR align="center">
<TD style="WIDTH: 139px">
<asp:listbox id="listEmployees" runat="server" Width="141" Height="160" Selecti></asp:listbox></TD>
<TD style="WIDTH: 33px"><INPUT class="buttoncss" style="WIDTH: 48px; HEIGHT: 24px"
type="button" value=">>>>" name="btnReceSendToRight"><BR>
<INPUT class="buttoncss" style="WIDTH: 48px; HEIGHT: 24px"
type="button" value="<<<<" name="btnReceSendToLeft">
</TD>
<TD align="left">
<asp:listbox id="listNewEmp" runat="server" Width="141" Height="160" Selecti></asp:listbox>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<tr>
<td height="30" align="right">存储listNew控件中所得到的值：</td>
<td>
<asp:TextBox id="txtEmpID" runat="server"></asp:TextBox></td>
</tr>
<TR>
<TD align="center" colSpan="2" height="35">
<asp:button id="btnSubmit" runat="server" Width="64" Text="确定" CssClass="redButtonCss" Height="24"></asp:button>
</TD>
</TR>
</table>
</TD></TR></TABLE>
</form>
</body>
</HTML>

追随理想和美人而生活！

doriandeng

组别:管理员
性别:
积分:1786
帖子:1716

2008-07-04 12:22 | 只看楼主 树型| 收藏| 小中大 2^#

回复: 使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动

后台代码：

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using Ajax;
namespace NetTest.ListBoxTest
{
/// <summary>
/// ListBoxToListBox 的摘要说明。
/// </summary>
public class ListBoxToListBox : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DropDownList ddlDept;
protected System.Web.UI.WebControls.Button btnSubmit;
protected System.Web.UI.WebControls.ListBox listEmployees;
protected System.Web.UI.WebControls.ListBox listNewEmp;
protected System.Web.UI.WebControls.TextBox txtEmpID;
private string strConn=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"].ToString();
private void Page_Load(object sender, System.EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(NetTest.ListBoxTest.AjaxMethod));
if(!IsPostBack)
{
GetDepartment();
GetEmployees();
btnSubmit.Attributes.Add("onclick","GetData();");
}
}
#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.btnSubmit.Click += new System.EventHandler(this.btnSubmit_Click);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
#region 得到部门
private void GetDepartment()
{
SqlConnection Conn=new SqlConnection(strConn);
SqlCommand Cmd=new SqlCommand("Select * from Department",Conn);
SqlDataAdapter da=new SqlDataAdapter();
da.SelectCommand=Cmd;
DataSet ds=new DataSet();
Conn.Open();
da.Fill(ds);
Conn.Close();
ddlDept.DataSource=ds.Tables[0].DefaultView;
ddlDept.DataTextField="Name";
ddlDept.DataValueField="DeptID";
ddlDept.DataBind();
ddlDept.Attributes.Add("onChange","BindListEmp()");
}
#endregion
#region 得到所有的员工
private void GetEmployees()
{
SqlConnection Conn=new SqlConnection(strConn);
SqlCommand Cmd=new SqlCommand("Select * from Emp",Conn);
SqlDataAdapter da=new SqlDataAdapter();
da.SelectCommand=Cmd;
DataSet ds=new DataSet();
Conn.Open();
da.Fill(ds);
Conn.Close();
listEmployees.DataSource=ds.Tables[0].DefaultView;
listEmployees.DataTextField="EmpName";
listEmployees.DataValueField="EmpID";
listEmployees.DataBind();
}
#endregion
private void btnSubmit_Click(object sender, System.EventArgs e)
{
Response.Write(txtEmpID.Text);
}
}
}

追随理想和美人而生活！

doriandeng

组别:管理员
性别:
积分:1786
帖子:1716

2008-07-04 12:23 | 只看楼主 树型| 收藏| 小中大 3^#

回复: 使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动

我想大家都知道使用AJAX技术，都是在javaScript中调用一个类里的方法，因此AjaxMothod中的方法如下

using System;
using System.Data.SqlClient;
using System.Data;
namespace NetTest.ListBoxTest
{
/// <summary>
/// AjaxTest 的摘要说明。
/// </summary>
public class AjaxMethod
{
private string strConn=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"].ToString();
public AjaxMethod()
{
//
// TODO: 在此处添加构造函数逻辑
//
}
#region 根据部门编号得到部门员工
[Ajax.AjaxMethod]
public DataSet GetEmpByDeptID(string DeptID)
{
try
{
int IntDeptID=int.Parse(DeptID);
SqlConnection Conn=new SqlConnection(strConn);
SqlCommand Cmd=new SqlCommand("Select * from Emp where Dept="+IntDeptID,Conn);
SqlDataAdapter da=new SqlDataAdapter();
da.SelectCommand=Cmd;
DataSet ds=new DataSet();
Conn.Open();
da.Fill(ds);
Conn.Close();
return ds;
}
catch(Exception ex)
{
string str=ex.Message;
return null;
}
}
#endregion
}
}

注意一下关于两个ListBox之间所使用到的JavaScript代码和<form>标记的id有关，因为一般人生成一个页面之后，都不会去修改<form>的，所以特别提醒一下。

追随理想和美人而生活！

<<上一主题|下一主题>>

1/1页1 跳转到页

发表新主题

回复该主题