asp.net js实现dropdownlist二级联动（动态）

来源：互联网发布：unity3d vr抗锯齿编辑：程序博客网时间：2024/06/06 17:19

ASPX端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="111.aspx.cs" Inherits="Solution2_usercontrol_111" %>
<%@ Register TagPrefix="uc1" TagName="SfDqJs" Src="SfDqJs.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <center>
        <form id="form1" runat="server">
            <div>
            <uc1:SfDqJs id="SfDqJs1" runat="server"></uc1:SfDqJs>
                <asp:DropDownList ID="dropSf" runat="server">
                </asp:DropDownList>
                <asp:DropDownList ID="dropDq" runat="server">
                </asp:DropDownList></div>
        </form>
    </center>
</body>
</html>

CS端代码：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

public partial class Solution2_usercontrol_111 : System.Web.UI.Page
{
private string strSql;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            dropSf.Items.Add("请选择");
            dropSf.Items[0].Selected = true;
            dropSfDataBind();

}
}

    private void dropSfDataBind()
    {
        //省份绑定
        strSql = "select bigid,bigtype from big";
        SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["connectstring"].ConnectionString);
        SqlDataAdapter da = new SqlDataAdapter(strSql, conn);
        DataSet ds = new DataSet();
        da.Fill(ds);
        if (ds.Tables[0].Rows.Count > 0)
        {

            dropSf.DataSource = ds;
            dropSf.DataTextField = "bigtype";
            dropSf.DataValueField = "bigid";
            dropSf.DataBind();
            dropSf.Items.Add("请选择");
            dropSf.Items[ds.Tables[0].Rows.Count].Selected = true;
        }

dropSf.Attributes.Add("onchange", "javascript:Sfonchange(this.value);");//添加JS省份改变事件

}
}

接下来呢，就是web control喽。。。

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SfDqJs.ascx.cs" Inherits="Solution2_usercontrol_SfDqJs" %>
<%
Response.Write("<script language=javascript>");
Response.Write("var aryDq = new Array(");
string strSql = "select bigid,smallid,smalltype from small";

System.Data.DataSet ds = new System.Data.DataSet();
System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection(ConfigurationManager.ConnectionStrings["connectstring"].ConnectionString);
    System.Data.SqlClient.SqlDataAdapter da=new System.Data.SqlClient.SqlDataAdapter(strSql,conn);
    da.Fill(ds);

//ds = db.GetDataSet(strSql,ds);
int itbRowCount = ds.Tables[0].Rows.Count;
int i = 0;
foreach(System.Data.DataRow row in ds.Tables[0].Rows)
{
      Response.Write("new Array('" + row[0].ToString() + "','" + row[1].ToString() + "','" + row[2].ToString() + "'),");
}
Response.Write("new Array('0','0','0')");
ds.Dispose();
ds = null;
Response.Write(");");
Response.Write("alert(aryDq);</script>");
%>
<script language="javascript">
function Sfonchange(sfId)
{
debugger
var dropDq=document.getElementById("dropDq");
if (sfId!="")
{
   var Dqstr="";j=0,p=0;
   for (i=0;i<aryDq.length;i++)
   {
    if (aryDq[i][0]==sfId)
    {
     j=j+1;
     Dqstr=Dqstr+aryDq[i][1]+","+aryDq[i][2]+",";
    }
   }
   dropDq.length=j+1;   //document.Form1.
   aryDq1=Dqstr.split(",");
   dropDq.options[0].value="0";
   dropDq.options[0].text = "请选择所在城市";   //document.Form1.
   for (i=1;i<=j;i++)
   {
    if(aryDq1[p] != null && aryDq1[p] != "")
    {
     dropDq.options[i].value = aryDq1[p]; //document.Form1.
     dropDq.options[i].text = aryDq1[p+1]; //document.Form1.
    }
    p=p+2;
   }
}
}
</script>

其中在web control中有一条SQL语句，是读取小类表中内容的，这里写的时候，列名一定要注意哦。。。先是大类ID，小类ID，再是小类内容列，如果说列的顺序错误的话，是得不到我们想要的结果的，我试过，大家可以试试看，有问题一起讨论喽。。。

查找MSDN发现EnalbeEventValidation 是用来验证回发的数据是否有效，如果无效自然就会报这个错误，那我们反过来想为什么会回发的数据无效呢，因为我使用的是js给第二个dripdownlist赋值，只看级联没有问题，但是当点击页面的按钮查询数据时候就会报这个错误，原因是第二个dropdownlist使用的是asp.net控件，点击按钮的时候.net的机制会记录当前控件的状态，并在数据回填的时候进行验证，可是这时候我的第二个dropdownlist被重新绑定了，所以查找不到对应的数据，就会报这个错误，解决办法是将asp.net控件替换成html控件，这样.net机制就不会记录html控件的值，也就不会报这个错误了。这样可以使用reqest.form["name"]在后台得到dropdownlist的值，之后处理。如果想要使用dropdownlist控件的话，后台不要动态绑定第二个dropdownlist，使用js为其赋值，但是要将EnableEventValidation设置为false

在ASP.NET当中，在进行联动的时候，有时候使用JS联动，就会出现回发或回调参数无效...

在解决方法当中，我选择的是使用

<select id="Select1" runat="server">

<option value="0">Text1</option>

<option value="1">Text2</option>

</select>

来代替DropDownList。。

但这种方式修改的值是无法在服务端代码中访问的，使用Select1.value获得的值，显示都是同一个，因为JS修改后的表单值没有同步更新到ASP.NET的VIEWSTATE隐藏域中，解决的办法如下：

1. 如果是只访问HTMLSELECT控件的选择的VALUE值，可以使用Request.Form["Select1"].ToString()来获取

2. 如果要同时访问VALUE和TEXT值，可以在表单添加隐藏域<asp:HiddenField>，在前台JS更新HTMLSELECT控件时同步更新此隐藏域的VALUE，然后后台即可获取隐藏域的VALUE。

0 0