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。