asp.net实现ListBox、DropDownList无刷新三级联动(xmlhttp)
最近正在做一个分类信息的程序,正做到实现无刷新三级联动的问题,从网上查了不少方法,最后使用选择了xmlhttp方法实现,并对代码进行了多次改进,现提供给大家参考。此为ListBox控件示例,DropDownList只需将控件名改一下就可以了。
数据库结构为
id 自动编号
oneid 数值型 一级分类id
twoid 数值型 二级分类id
threeid 数值型 三级分类id
sort 数值型 排序
classname 字符型 分类名称
数据库下载
/Files/netshuai/class.rar
aspx页面javascript代码
aspx页面控件代码
cs页面代码
数据库结构为
id 自动编号
oneid 数值型 一级分类id
twoid 数值型 二级分类id
threeid 数值型 三级分类id
sort 数值型 排序
classname 字符型 分类名称
数据库下载
/Files/netshuai/class.rar
aspx页面javascript代码
<script type="text/javascript">
<!--
function XmlPost(str)
{
var webFileUrl="";
document.all("<% =Lbx_ClassThree.ClientID %>").length=0;
if(str==1)
{
webFileUrl = "?oneid=" + document.all("<% =Lbx_ClassOne.ClientID %>").value;
document.all("<% =Lbx_ClassTwo.ClientID %>").length=0;
}
else
{
webFileUrl = "?oneid=" + document.all("<% =Lbx_ClassOne.ClientID %>").value+"&twoid="+document.all("<% =Lbx_ClassTwo.ClientID %>").value;
}
var result = "";
var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
xmlHttp.open("Post", webFileUrl, false);
xmlHttp.send("");
result = xmlHttp.responseText;
if(result != "")
{
var piArray = result.split(",");
if(str==1)
{
for(var i=0;i<piArray.length;i++)
{
var ary1 = piArray[i].toString().split("|");
document.all("<% =Lbx_ClassTwo.ClientID %>").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
}
}
else
{
for(var i=0;i<piArray.length;i++)
{
var ary1 = piArray[i].toString().split("|");
document.all("<% =Lbx_ClassThree.ClientID %>").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
}
}
}
}
//-->
</script>
<!--
function XmlPost(str)
{
var webFileUrl="";
document.all("<% =Lbx_ClassThree.ClientID %>").length=0;
if(str==1)
{
webFileUrl = "?oneid=" + document.all("<% =Lbx_ClassOne.ClientID %>").value;
document.all("<% =Lbx_ClassTwo.ClientID %>").length=0;
}
else
{
webFileUrl = "?oneid=" + document.all("<% =Lbx_ClassOne.ClientID %>").value+"&twoid="+document.all("<% =Lbx_ClassTwo.ClientID %>").value;
}
var result = "";
var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
xmlHttp.open("Post", webFileUrl, false);
xmlHttp.send("");
result = xmlHttp.responseText;
if(result != "")
{
var piArray = result.split(",");
if(str==1)
{
for(var i=0;i<piArray.length;i++)
{
var ary1 = piArray[i].toString().split("|");
document.all("<% =Lbx_ClassTwo.ClientID %>").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
}
}
else
{
for(var i=0;i<piArray.length;i++)
{
var ary1 = piArray[i].toString().split("|");
document.all("<% =Lbx_ClassThree.ClientID %>").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
}
}
}
}
//-->
</script>
aspx页面控件代码
<asp:ListBox ID="Lbx_ClassOne" runat="server" Height="300px" Width="150px"></asp:ListBox>
<asp:ListBox ID="Lbx_ClassTwo" runat="server" Height="300px" Width="150px"></asp:ListBox>
<asp:ListBox ID="Lbx_ClassThree" runat="server" Height="300px" Width="150px" ></asp:ListBox>
<asp:ListBox ID="Lbx_ClassTwo" runat="server" Height="300px" Width="150px"></asp:ListBox>
<asp:ListBox ID="Lbx_ClassThree" runat="server" Height="300px" Width="150px" ></asp:ListBox>
cs页面代码
protected void Page_Load(object sender, EventArgs e)
{
string strOneid = "", strTwoid = "";
if (Request["oneid"] != null && Request["oneid"].ToString() != "")
{
strOneid = Request["oneid"].ToString();
}
if (Request["twoid"] != null && Request["twoid"].ToString() != "")
{
strTwoid = Request["twoid"].ToString();
}
if (strOneid != "")
{
Lbx_Class_Bind(strOneid, strTwoid);
}
if (!this.IsPostBack)
{
Lbx_ClassOne_Bind();
Lbx_ClassOne.Attributes.Add("onchange", "XmlPost(1)");
Lbx_ClassTwo.Attributes.Add("onchange", "XmlPost(2)");
}
}
private void Lbx_ClassOne_Bind()
{
string strSQL;
strSQL = "select * from nts_infoclass where oneid<>0 and twoid=0 and threeid=0 order by sort";
string ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source='数据库路径'";
OleDbConnection cnn = new OleDbConnection(ConnectionString);
cnn.Open();
OleDbCommand cmd=new OleDbCommand(sql, cnn);
OleDbDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
Lbx_ClassOne.DataSource = dr;
Lbx_ClassOne.DataTextField = "classname";
Lbx_ClassOne.DataValueField = "oneid";
Lbx_ClassOne.DataBind();
}
private void Lbx_Class_Bind(string oneid, string twoid)
{
string strSQL = "",idname="";
if (oneid != "" && twoid == "")
{
strSQL = "select * from nts_infoclass where twoid<>0 and threeid=0 and oneid=" + oneid + " order by sort";
idname = "twoid";
}
if (oneid != "" && twoid != "")
{
strSQL = "select * from nts_infoclass where threeid<>0 and oneid=" + oneid + " and twoid=" + twoid + " order by sort";
idname = "threeid";
}
string mystr = "";
string ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source='数据库路径'";
OleDbConnection cnn = new OleDbConnection(ConnectionString);
cnn.Open();
OleDbCommand cmd=new OleDbCommand(sql, cnn);
OleDbDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
while (dr.Read())
{
mystr += "," + dr[idname].ToString() + "|" + dr["classname"].ToString();
}
if (mystr != "")
{
mystr = mystr.Substring(1);
}
dr.Close();
this.Response.Write(mystr);
this.Response.End();
}
{
string strOneid = "", strTwoid = "";
if (Request["oneid"] != null && Request["oneid"].ToString() != "")
{
strOneid = Request["oneid"].ToString();
}
if (Request["twoid"] != null && Request["twoid"].ToString() != "")
{
strTwoid = Request["twoid"].ToString();
}
if (strOneid != "")
{
Lbx_Class_Bind(strOneid, strTwoid);
}
if (!this.IsPostBack)
{
Lbx_ClassOne_Bind();
Lbx_ClassOne.Attributes.Add("onchange", "XmlPost(1)");
Lbx_ClassTwo.Attributes.Add("onchange", "XmlPost(2)");
}
}
private void Lbx_ClassOne_Bind()
{
string strSQL;
strSQL = "select * from nts_infoclass where oneid<>0 and twoid=0 and threeid=0 order by sort";
string ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source='数据库路径'";
OleDbConnection cnn = new OleDbConnection(ConnectionString);
cnn.Open();
OleDbCommand cmd=new OleDbCommand(sql, cnn);
OleDbDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
Lbx_ClassOne.DataSource = dr;
Lbx_ClassOne.DataTextField = "classname";
Lbx_ClassOne.DataValueField = "oneid";
Lbx_ClassOne.DataBind();
}
private void Lbx_Class_Bind(string oneid, string twoid)
{
string strSQL = "",idname="";
if (oneid != "" && twoid == "")
{
strSQL = "select * from nts_infoclass where twoid<>0 and threeid=0 and oneid=" + oneid + " order by sort";
idname = "twoid";
}
if (oneid != "" && twoid != "")
{
strSQL = "select * from nts_infoclass where threeid<>0 and oneid=" + oneid + " and twoid=" + twoid + " order by sort";
idname = "threeid";
}
string mystr = "";
string ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source='数据库路径'";
OleDbConnection cnn = new OleDbConnection(ConnectionString);
cnn.Open();
OleDbCommand cmd=new OleDbCommand(sql, cnn);
OleDbDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
while (dr.Read())
{
mystr += "," + dr[idname].ToString() + "|" + dr["classname"].ToString();
}
if (mystr != "")
{
mystr = mystr.Substring(1);
}
dr.Close();
this.Response.Write(mystr);
this.Response.End();
}