ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

时间:2022-06-17 10:48:13

一、ajax验证表单元素规范正确与否

以用ajax来验证用户名是否被占用为例

1创建表单元素<input type="text" id="t">

2在js中用keyup事件来进行操作

3创建ajax格式和内容:格式:

$.ajax({

url:"哪一个服务端处理器",

data:{"自己起名",所需要传给处理器的数据},

type:"post",

dataType:"json",

success:function(aa){

//对处理器返回的值aa进行处理操作

},

error:function(){

alert("处理器连接失败");

}

});

4.代码示范

(1)建立linq

#pragma warning disable 1591
//------------------------------------------------------------------------------
// <auto-generated>
// 此代码由工具生成。
// 运行时版本:4.0.30319.17929
//
// 对此文件的更改可能会导致不正确的行为,并且如果
// 重新生成代码,这些更改将会丢失。
// </auto-generated>
//------------------------------------------------------------------------------ using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Data.Linq;
using System.Data.Linq.Mapping;
using System.Linq;
using System.Linq.Expressions;
using System.Reflection; [global::System.Data.Linq.Mapping.DatabaseAttribute(Name="mydb")]
public partial class chinaDataContext : System.Data.Linq.DataContext
{ private static System.Data.Linq.Mapping.MappingSource mappingSource = new AttributeMappingSource(); #region 可扩展性方法定义
partial void OnCreated();
partial void InsertChinaStates(ChinaStates instance);
partial void UpdateChinaStates(ChinaStates instance);
partial void DeleteChinaStates(ChinaStates instance);
#endregion public chinaDataContext() :
base(global::System.Configuration.ConfigurationManager.ConnectionStrings["mydbConnectionString"].ConnectionString, mappingSource)
{
OnCreated();
} public chinaDataContext(string connection) :
base(connection, mappingSource)
{
OnCreated();
} public chinaDataContext(System.Data.IDbConnection connection) :
base(connection, mappingSource)
{
OnCreated();
} public chinaDataContext(string connection, System.Data.Linq.Mapping.MappingSource mappingSource) :
base(connection, mappingSource)
{
OnCreated();
} public chinaDataContext(System.Data.IDbConnection connection, System.Data.Linq.Mapping.MappingSource mappingSource) :
base(connection, mappingSource)
{
OnCreated();
} public System.Data.Linq.Table<ChinaStates> ChinaStates
{
get
{
return this.GetTable<ChinaStates>();
}
}
} [global::System.Data.Linq.Mapping.TableAttribute(Name="dbo.ChinaStates")]
public partial class ChinaStates : INotifyPropertyChanging, INotifyPropertyChanged
{ private static PropertyChangingEventArgs emptyChangingEventArgs = new PropertyChangingEventArgs(String.Empty); private string _AreaCode; private string _AreaName; private string _ParentAreaCode; private bool _Root; private short _Zone; private string _NavigateURL; #region 可扩展性方法定义
partial void OnLoaded();
partial void OnValidate(System.Data.Linq.ChangeAction action);
partial void OnCreated();
partial void OnAreaCodeChanging(string value);
partial void OnAreaCodeChanged();
partial void OnAreaNameChanging(string value);
partial void OnAreaNameChanged();
partial void OnParentAreaCodeChanging(string value);
partial void OnParentAreaCodeChanged();
partial void OnRootChanging(bool value);
partial void OnRootChanged();
partial void OnZoneChanging(short value);
partial void OnZoneChanged();
partial void OnNavigateURLChanging(string value);
partial void OnNavigateURLChanged();
#endregion public ChinaStates()
{
OnCreated();
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_AreaCode", DbType="VarChar(20) NOT NULL", CanBeNull=false, IsPrimaryKey=true)]
public string AreaCode
{
get
{
return this._AreaCode;
}
set
{
if ((this._AreaCode != value))
{
this.OnAreaCodeChanging(value);
this.SendPropertyChanging();
this._AreaCode = value;
this.SendPropertyChanged("AreaCode");
this.OnAreaCodeChanged();
}
}
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_AreaName", DbType="NVarChar(20) NOT NULL", CanBeNull=false)]
public string AreaName
{
get
{
return this._AreaName;
}
set
{
if ((this._AreaName != value))
{
this.OnAreaNameChanging(value);
this.SendPropertyChanging();
this._AreaName = value;
this.SendPropertyChanged("AreaName");
this.OnAreaNameChanged();
}
}
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_ParentAreaCode", DbType="VarChar(20) NOT NULL", CanBeNull=false)]
public string ParentAreaCode
{
get
{
return this._ParentAreaCode;
}
set
{
if ((this._ParentAreaCode != value))
{
this.OnParentAreaCodeChanging(value);
this.SendPropertyChanging();
this._ParentAreaCode = value;
this.SendPropertyChanged("ParentAreaCode");
this.OnParentAreaCodeChanged();
}
}
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_Root", DbType="Bit NOT NULL")]
public bool Root
{
get
{
return this._Root;
}
set
{
if ((this._Root != value))
{
this.OnRootChanging(value);
this.SendPropertyChanging();
this._Root = value;
this.SendPropertyChanged("Root");
this.OnRootChanged();
}
}
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_Zone", DbType="SmallInt NOT NULL")]
public short Zone
{
get
{
return this._Zone;
}
set
{
if ((this._Zone != value))
{
this.OnZoneChanging(value);
this.SendPropertyChanging();
this._Zone = value;
this.SendPropertyChanged("Zone");
this.OnZoneChanged();
}
}
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_NavigateURL", DbType="VarChar(100)")]
public string NavigateURL
{
get
{
return this._NavigateURL;
}
set
{
if ((this._NavigateURL != value))
{
this.OnNavigateURLChanging(value);
this.SendPropertyChanging();
this._NavigateURL = value;
this.SendPropertyChanged("NavigateURL");
this.OnNavigateURLChanged();
}
}
} public event PropertyChangingEventHandler PropertyChanging; public event PropertyChangedEventHandler PropertyChanged; protected virtual void SendPropertyChanging()
{
if ((this.PropertyChanging != null))
{
this.PropertyChanging(this, emptyChangingEventArgs);
}
} protected virtual void SendPropertyChanged(String propertyName)
{
if ((this.PropertyChanged != null))
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
#pragma warning restore 1591

(2)default页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.7.1.min.js"></script><%--引用jquery--%>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="t" /><span id="s"></span>
</div>
</form>
</body>
</html>
<script>
$("#t").keyup(function () {//用keyup操作方式来验证
var a = $(this).val();//先取值
//1、将数据提交到服务端去
$.ajax({
url: "ajax/SelectUserName.ashx",//服务端处理器路径
data: { "shuju": a },//将数据a提交到服务端去,”shuju“是自己随意起名
type: "post",//规定提交方式,有post和get两种
dataType: "json",//规定返回交互的数据类型,有”json“和”xml“。但是json比xml好用
success: function (b) {//b为SelectUserName.ashx中返回的namejson的值
if (b.has == "") {
$("#s").text("恭喜,用户名能使用").css("color","blue");
}
else {
$("#s").text("抱歉,用户名已被使用").css("color","red");
}
},//sucess
error: function () {//success不成功,会走这一步!!
alert("服务器连接失败");
}
});//ajax
});//keyup </script>

(3)服务处理器SelectUserName.ashx页面,(建立在新建文件夹ajax的里面,与default平级)

<%@ WebHandler Language="C#" Class="SelectUserName" %>

using System;
using System.Web;
using System.Linq; public class SelectUserName : IHttpHandler { public void ProcessRequest (HttpContext context) {
string name = context.Request["shuju"];//获取Default.aspx中提交的数据
string namejson = "{\"has\":\"0\"}";//建立json,格式为{"key":"value","key":"value",..........}
using (xinxiDataContext cnn = new xinxiDataContext())
{
var ss = cnn.Users.Where(r => r.UserName == name).AsEnumerable();//查询是否有该UserName,此处没有进行数据访问 此处需要引用using System.Linq;
if (ss.Count() > )//如果有该UesrName,ss里面是有数据的,反之,没有
{
namejson = "{\"has\":\"1\"}";//修改namejson内容
}
}
context.Response.Write(namejson);//将namejson返回出去
context.Response.End();//关闭输出 } public bool IsReusable {
get {
return false;
}
} }

二、ajax展示加载数据库数据

1、服务处理器的作用就是用含有json的数组把数据传出来,再在web窗体端对该数组进行处理。

含有json的数组的格式:[{"key1":"value1","key2":"value2"},{"key3":"value3"}........{"keyn":"value3"}]。

2、以数据库xinxi中Uers和Nation表为例

(1)建立linq。(xinxi.dbml)

#pragma warning disable 1591
//------------------------------------------------------------------------------
// <auto-generated>
// 此代码由工具生成。
// 运行时版本:4.0.30319.17929
//
// 对此文件的更改可能会导致不正确的行为,并且如果
// 重新生成代码,这些更改将会丢失。
// </auto-generated>
//------------------------------------------------------------------------------ using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Data.Linq;
using System.Data.Linq.Mapping;
using System.Linq;
using System.Linq.Expressions;
using System.Reflection; [global::System.Data.Linq.Mapping.DatabaseAttribute(Name="xinxi")]
public partial class xinxiDataContext : System.Data.Linq.DataContext
{ private static System.Data.Linq.Mapping.MappingSource mappingSource = new AttributeMappingSource(); #region 可扩展性方法定义
partial void OnCreated();
partial void InsertUsers(Users instance);
partial void UpdateUsers(Users instance);
partial void DeleteUsers(Users instance);
partial void InsertNation(Nation instance);
partial void UpdateNation(Nation instance);
partial void DeleteNation(Nation instance);
#endregion public xinxiDataContext() :
base(global::System.Configuration.ConfigurationManager.ConnectionStrings["xinxiConnectionString"].ConnectionString, mappingSource)
{
OnCreated();
} public xinxiDataContext(string connection) :
base(connection, mappingSource)
{
OnCreated();
} public xinxiDataContext(System.Data.IDbConnection connection) :
base(connection, mappingSource)
{
OnCreated();
} public xinxiDataContext(string connection, System.Data.Linq.Mapping.MappingSource mappingSource) :
base(connection, mappingSource)
{
OnCreated();
} public xinxiDataContext(System.Data.IDbConnection connection, System.Data.Linq.Mapping.MappingSource mappingSource) :
base(connection, mappingSource)
{
OnCreated();
} public System.Data.Linq.Table<Users> Users
{
get
{
return this.GetTable<Users>();
}
} public System.Data.Linq.Table<Nation> Nation
{
get
{
return this.GetTable<Nation>();
}
}
} [global::System.Data.Linq.Mapping.TableAttribute(Name="dbo.Users")]
public partial class Users : INotifyPropertyChanging, INotifyPropertyChanged
{ private static PropertyChangingEventArgs emptyChangingEventArgs = new PropertyChangingEventArgs(String.Empty); private string _UserName; private string _Password; private bool _Sex; private string _NickName; private System.DateTime _Birthday; private string _Nation; private string _State; private EntityRef<Nation> _Nation1; #region 可扩展性方法定义
partial void OnLoaded();
partial void OnValidate(System.Data.Linq.ChangeAction action);
partial void OnCreated();
partial void OnUserNameChanging(string value);
partial void OnUserNameChanged();
partial void OnPasswordChanging(string value);
partial void OnPasswordChanged();
partial void OnSexChanging(bool value);
partial void OnSexChanged();
partial void OnNickNameChanging(string value);
partial void OnNickNameChanged();
partial void OnBirthdayChanging(System.DateTime value);
partial void OnBirthdayChanged();
partial void OnNationChanging(string value);
partial void OnNationChanged();
partial void OnStateChanging(string value);
partial void OnStateChanged();
#endregion public Users()
{
this._Nation1 = default(EntityRef<Nation>);
OnCreated();
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_UserName", DbType="NVarChar(20) NOT NULL", CanBeNull=false, IsPrimaryKey=true)]
public string UserName
{
get
{
return this._UserName;
}
set
{
if ((this._UserName != value))
{
this.OnUserNameChanging(value);
this.SendPropertyChanging();
this._UserName = value;
this.SendPropertyChanged("UserName");
this.OnUserNameChanged();
}
}
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_Password", DbType="NVarChar(20) NOT NULL", CanBeNull=false)]
public string Password
{
get
{
return this._Password;
}
set
{
if ((this._Password != value))
{
this.OnPasswordChanging(value);
this.SendPropertyChanging();
this._Password = value;
this.SendPropertyChanged("Password");
this.OnPasswordChanged();
}
}
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_Sex", DbType="Bit NOT NULL")]
public bool Sex
{
get
{
return this._Sex;
}
set
{
if ((this._Sex != value))
{
this.OnSexChanging(value);
this.SendPropertyChanging();
this._Sex = value;
this.SendPropertyChanged("Sex");
this.OnSexChanged();
}
}
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_NickName", DbType="NVarChar(20) NOT NULL", CanBeNull=false)]
public string NickName
{
get
{
return this._NickName;
}
set
{
if ((this._NickName != value))
{
this.OnNickNameChanging(value);
this.SendPropertyChanging();
this._NickName = value;
this.SendPropertyChanged("NickName");
this.OnNickNameChanged();
}
}
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_Birthday", DbType="DateTime NOT NULL")]
public System.DateTime Birthday
{
get
{
return this._Birthday;
}
set
{
if ((this._Birthday != value))
{
this.OnBirthdayChanging(value);
this.SendPropertyChanging();
this._Birthday = value;
this.SendPropertyChanged("Birthday");
this.OnBirthdayChanged();
}
}
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_Nation", DbType="NVarChar(20) NOT NULL", CanBeNull=false)]
public string Nation
{
get
{
return this._Nation;
}
set
{
if ((this._Nation != value))
{
if (this._Nation1.HasLoadedOrAssignedValue)
{
throw new System.Data.Linq.ForeignKeyReferenceAlreadyHasValueException();
}
this.OnNationChanging(value);
this.SendPropertyChanging();
this._Nation = value;
this.SendPropertyChanged("Nation");
this.OnNationChanged();
}
}
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_State", DbType="NVarChar(20)")]
public string State
{
get
{
return this._State;
}
set
{
if ((this._State != value))
{
this.OnStateChanging(value);
this.SendPropertyChanging();
this._State = value;
this.SendPropertyChanged("State");
this.OnStateChanged();
}
}
} [global::System.Data.Linq.Mapping.AssociationAttribute(Name="Nation_Users", Storage="_Nation1", ThisKey="Nation", OtherKey="NationCode", IsForeignKey=true)]
public Nation Nation1
{
get
{
return this._Nation1.Entity;
}
set
{
Nation previousValue = this._Nation1.Entity;
if (((previousValue != value)
|| (this._Nation1.HasLoadedOrAssignedValue == false)))
{
this.SendPropertyChanging();
if ((previousValue != null))
{
this._Nation1.Entity = null;
previousValue.Users.Remove(this);
}
this._Nation1.Entity = value;
if ((value != null))
{
value.Users.Add(this);
this._Nation = value.NationCode;
}
else
{
this._Nation = default(string);
}
this.SendPropertyChanged("Nation1");
}
}
} public event PropertyChangingEventHandler PropertyChanging; public event PropertyChangedEventHandler PropertyChanged; protected virtual void SendPropertyChanging()
{
if ((this.PropertyChanging != null))
{
this.PropertyChanging(this, emptyChangingEventArgs);
}
} protected virtual void SendPropertyChanged(String propertyName)
{
if ((this.PropertyChanged != null))
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
} [global::System.Data.Linq.Mapping.TableAttribute(Name="dbo.Nation")]
public partial class Nation : INotifyPropertyChanging, INotifyPropertyChanged
{ private static PropertyChangingEventArgs emptyChangingEventArgs = new PropertyChangingEventArgs(String.Empty); private string _NationCode; private string _NationName; private EntitySet<Users> _Users; #region 可扩展性方法定义
partial void OnLoaded();
partial void OnValidate(System.Data.Linq.ChangeAction action);
partial void OnCreated();
partial void OnNationCodeChanging(string value);
partial void OnNationCodeChanged();
partial void OnNationNameChanging(string value);
partial void OnNationNameChanged();
#endregion public Nation()
{
this._Users = new EntitySet<Users>(new Action<Users>(this.attach_Users), new Action<Users>(this.detach_Users));
OnCreated();
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_NationCode", DbType="NVarChar(20) NOT NULL", CanBeNull=false, IsPrimaryKey=true)]
public string NationCode
{
get
{
return this._NationCode;
}
set
{
if ((this._NationCode != value))
{
this.OnNationCodeChanging(value);
this.SendPropertyChanging();
this._NationCode = value;
this.SendPropertyChanged("NationCode");
this.OnNationCodeChanged();
}
}
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_NationName", DbType="NVarChar(20) NOT NULL", CanBeNull=false)]
public string NationName
{
get
{
return this._NationName;
}
set
{
if ((this._NationName != value))
{
this.OnNationNameChanging(value);
this.SendPropertyChanging();
this._NationName = value;
this.SendPropertyChanged("NationName");
this.OnNationNameChanged();
}
}
} [global::System.Data.Linq.Mapping.AssociationAttribute(Name="Nation_Users", Storage="_Users", ThisKey="NationCode", OtherKey="Nation")]
public EntitySet<Users> Users
{
get
{
return this._Users;
}
set
{
this._Users.Assign(value);
}
} public event PropertyChangingEventHandler PropertyChanging; public event PropertyChangedEventHandler PropertyChanged; protected virtual void SendPropertyChanging()
{
if ((this.PropertyChanging != null))
{
this.PropertyChanging(this, emptyChangingEventArgs);
}
} protected virtual void SendPropertyChanged(String propertyName)
{
if ((this.PropertyChanged != null))
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
} private void attach_Users(Users entity)
{
this.SendPropertyChanging();
entity.Nation1 = this;
} private void detach_Users(Users entity)
{
this.SendPropertyChanging();
entity.Nation1 = null;
}
}
#pragma warning restore 1591

(2)dafault页面布置

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.7.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<table style="width:100%;background-color:blue;text-align:center;">
<thead>
<tr style="background-color:aqua">
<td>用户名</td>
<td>密码</td>
<td>性别</td>
<td>昵称</td>
<td>生日</td>
<td>民族</td>
<td>国家</td>
</tr>
</thead>
<tbody id="tb">
<%-- <tr style="background-color:gray">
<td>用户名</td>
</tr>--%> </tbody> </table>
<input type="button" id="btn1" value="加载" />
</form>
</body>
</html>
<script>
$("#btn1").click(function () {//获取全部信息
$.ajax({
url: "ajax/quan.ashx",
data: {},//获取全部信息,不需要传值
type: "post",
dataType: "json",
success: function (aaa) {
$("#tb").empty();//加载前线清空内容
for (i in aaa)//aaa为服务处理器quan.ashx所传回来的集合
{
var s = "";
s += "<tr style=\"background-color:gray\">";
s += "<td>" + aaa[i].name + "</td>";
s += "<td>" + aaa[i].pwd + "</td>";
s += "<td>" + aaa[i].sex + "</td>";
s += "<td>" + aaa[i].nick + "</td>";
s += "<td>" + aaa[i].bir + "</td>";
s += "<td>" + aaa[i].nation + "</td>";
s += "<td>" + aaa[i].sta + "</td>";
s += "</tr>";
$("#tb").append(s);
}
},
error: function () {
alert("处理器连接失败!");
}
});
});
</script>

(3)服务处理器quan.ashx的布置(建立在新建文件夹ajax的里面,与default平级)

<%@ WebHandler Language="C#" Class="quan" %>

using System;
using System.Web;
using System.Linq;
using System.Collections.Generic; public class quan : IHttpHandler {
//{"name":"","pwd":"","sex":"","nick":"","bir":"","nation":"","sta":""}
public void ProcessRequest (HttpContext context) {
string n = "[";
int count = ;
using (xinxiDataContext cnn = new xinxiDataContext())//拼接含有json的数组:[{"key1":"value1","key2":"value2"},{"key3":"value3"}........{"keyn":"value3"}]
{
var all = cnn.Users;//等同于 List<ChinaStates> all = cnn.Users.ToList();查询全部信息,返回泛型集合
foreach(Users u in all)
{
if (count > )
{
n += ",";
}
n +="{\"name\":\""+u.UserName+"\",\"pwd\":\""+u.Password+"\",\"sex\":\""+u.Sex+"\",\"nick\":\""+u.NickName+"\",\"bir\":\""+u.Birthday+"\",\"nation\":\""+u.Nation+"\",\"sta\":\""+u.State+"\"}";
count++;
}
}
n += "]";
context.Response.Write(n);
context.Response.End();
} public bool IsReusable {
get {
return false;
}
} }

三、ajax三级联动

(1)建立linq

#pragma warning disable 1591
//------------------------------------------------------------------------------
// <auto-generated>
// 此代码由工具生成。
// 运行时版本:4.0.30319.17929
//
// 对此文件的更改可能会导致不正确的行为,并且如果
// 重新生成代码,这些更改将会丢失。
// </auto-generated>
//------------------------------------------------------------------------------ using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Data.Linq;
using System.Data.Linq.Mapping;
using System.Linq;
using System.Linq.Expressions;
using System.Reflection; [global::System.Data.Linq.Mapping.DatabaseAttribute(Name="mydb")]
public partial class chinaDataContext : System.Data.Linq.DataContext
{ private static System.Data.Linq.Mapping.MappingSource mappingSource = new AttributeMappingSource(); #region 可扩展性方法定义
partial void OnCreated();
partial void InsertChinaStates(ChinaStates instance);
partial void UpdateChinaStates(ChinaStates instance);
partial void DeleteChinaStates(ChinaStates instance);
#endregion public chinaDataContext() :
base(global::System.Configuration.ConfigurationManager.ConnectionStrings["mydbConnectionString"].ConnectionString, mappingSource)
{
OnCreated();
} public chinaDataContext(string connection) :
base(connection, mappingSource)
{
OnCreated();
} public chinaDataContext(System.Data.IDbConnection connection) :
base(connection, mappingSource)
{
OnCreated();
} public chinaDataContext(string connection, System.Data.Linq.Mapping.MappingSource mappingSource) :
base(connection, mappingSource)
{
OnCreated();
} public chinaDataContext(System.Data.IDbConnection connection, System.Data.Linq.Mapping.MappingSource mappingSource) :
base(connection, mappingSource)
{
OnCreated();
} public System.Data.Linq.Table<ChinaStates> ChinaStates
{
get
{
return this.GetTable<ChinaStates>();
}
}
} [global::System.Data.Linq.Mapping.TableAttribute(Name="dbo.ChinaStates")]
public partial class ChinaStates : INotifyPropertyChanging, INotifyPropertyChanged
{ private static PropertyChangingEventArgs emptyChangingEventArgs = new PropertyChangingEventArgs(String.Empty); private string _AreaCode; private string _AreaName; private string _ParentAreaCode; private bool _Root; private short _Zone; private string _NavigateURL; #region 可扩展性方法定义
partial void OnLoaded();
partial void OnValidate(System.Data.Linq.ChangeAction action);
partial void OnCreated();
partial void OnAreaCodeChanging(string value);
partial void OnAreaCodeChanged();
partial void OnAreaNameChanging(string value);
partial void OnAreaNameChanged();
partial void OnParentAreaCodeChanging(string value);
partial void OnParentAreaCodeChanged();
partial void OnRootChanging(bool value);
partial void OnRootChanged();
partial void OnZoneChanging(short value);
partial void OnZoneChanged();
partial void OnNavigateURLChanging(string value);
partial void OnNavigateURLChanged();
#endregion public ChinaStates()
{
OnCreated();
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_AreaCode", DbType="VarChar(20) NOT NULL", CanBeNull=false, IsPrimaryKey=true)]
public string AreaCode
{
get
{
return this._AreaCode;
}
set
{
if ((this._AreaCode != value))
{
this.OnAreaCodeChanging(value);
this.SendPropertyChanging();
this._AreaCode = value;
this.SendPropertyChanged("AreaCode");
this.OnAreaCodeChanged();
}
}
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_AreaName", DbType="NVarChar(20) NOT NULL", CanBeNull=false)]
public string AreaName
{
get
{
return this._AreaName;
}
set
{
if ((this._AreaName != value))
{
this.OnAreaNameChanging(value);
this.SendPropertyChanging();
this._AreaName = value;
this.SendPropertyChanged("AreaName");
this.OnAreaNameChanged();
}
}
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_ParentAreaCode", DbType="VarChar(20) NOT NULL", CanBeNull=false)]
public string ParentAreaCode
{
get
{
return this._ParentAreaCode;
}
set
{
if ((this._ParentAreaCode != value))
{
this.OnParentAreaCodeChanging(value);
this.SendPropertyChanging();
this._ParentAreaCode = value;
this.SendPropertyChanged("ParentAreaCode");
this.OnParentAreaCodeChanged();
}
}
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_Root", DbType="Bit NOT NULL")]
public bool Root
{
get
{
return this._Root;
}
set
{
if ((this._Root != value))
{
this.OnRootChanging(value);
this.SendPropertyChanging();
this._Root = value;
this.SendPropertyChanged("Root");
this.OnRootChanged();
}
}
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_Zone", DbType="SmallInt NOT NULL")]
public short Zone
{
get
{
return this._Zone;
}
set
{
if ((this._Zone != value))
{
this.OnZoneChanging(value);
this.SendPropertyChanging();
this._Zone = value;
this.SendPropertyChanged("Zone");
this.OnZoneChanged();
}
}
} [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_NavigateURL", DbType="VarChar(100)")]
public string NavigateURL
{
get
{
return this._NavigateURL;
}
set
{
if ((this._NavigateURL != value))
{
this.OnNavigateURLChanging(value);
this.SendPropertyChanging();
this._NavigateURL = value;
this.SendPropertyChanged("NavigateURL");
this.OnNavigateURLChanged();
}
}
} public event PropertyChangingEventHandler PropertyChanging; public event PropertyChangedEventHandler PropertyChanged; protected virtual void SendPropertyChanging()
{
if ((this.PropertyChanging != null))
{
this.PropertyChanging(this, emptyChangingEventArgs);
}
} protected virtual void SendPropertyChanged(String propertyName)
{
if ((this.PropertyChanged != null))
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
#pragma warning restore 1591

(2)web窗体页面布置

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.7.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="sheng_dd" runat="server"></asp:DropDownList>
<asp:DropDownList ID="shi_dd" runat="server"></asp:DropDownList>
<asp:DropDownList ID="qu_dd" runat="server"></asp:DropDownList> </div>
</form>
</body>
</html>
<script>
bind($("#sheng_dd"),"","");
function bind(drop,pcode,aa) {
$.ajax({
url: "ajax/China.ashx",
data: { "pcode": pcode },
type: "post",
dataType: "json",
success: function (aaa) {//aaa为数据处理完毕返回来的数组
if (aa == "") {//如果aa=1,给省加载。
drop.empty();
for (i in aaa) {
var a = "<option value=\"" + aaa[i].code + "\">" + aaa[i].name + "</option>";//DropDownList在页面编译成select,所以用<option value="">text</option>
drop.append(a);//循环往DropDownList增加数据
}
bind($("#shi_dd"), $("#sheng_dd").val(), "");
bind($("#qu_dd"), $("#shi_dd").val(), "");
} if (aa == "")//如果aa=2,给市加载。
{
drop.empty();
for (i in aaa) {
var a = "<option value=\"" + aaa[i].code + "\">" + aaa[i].name + "</option>";//DropDownList在页面编译成select,所以用<option value="">text</option>
drop.append(a);//循环往DropDownList增加数据
}
bind($("#qu_dd"), $("#shi_dd").val(), ""); }
if (aa == "")//如果aa=3,给区加载。
{
drop.empty();
for (i in aaa) {
var a = "<option value=\"" + aaa[i].code + "\">" + aaa[i].name + "</option>";//DropDownList在页面编译成select,所以用<option value="">text</option>
drop.append(a);//循环往DropDownList增加数据
} } },
error: function () {
alert("服务器连接失败");
}//error });//ajax };//bind() $("#sheng_dd").change(function () {//sheng_dd所选变化事件
bind($("#shi_dd"), $("#sheng_dd").val(), "");//市根据省变化
});
$("#shi_dd").change(function () {//shi_dd所选变化事件
bind($("#qu_dd"), $("#shi_dd").val(), "");//区根据市变化
}); </script>

(3)服务处理器China.ashx页面,(建立在新建文件夹ajax的里面,与default平级)

<%@ WebHandler Language="C#" Class="China" %>

using System;
using System.Web;
using System.Collections.Generic;
using System.Linq;
using System.Text; public class China : IHttpHandler { public void ProcessRequest (HttpContext context) {//此处的作用就是拼接含有json的数组,格式[{"key1";:"value1","key2":"value2"}.....{"keyn":"valuen"}]
string pcode=context.Request["pcode"];//接收传过来的数据
StringBuilder s = new StringBuilder();
int count = ;
s.Append("[");
using (chinaDataContext con = new chinaDataContext())
{
List<ChinaStates> list = con.ChinaStates.Where(r => r.ParentAreaCode == pcode).ToList();//根据ParentAreaCode查询符合条件的地区
foreach (ChinaStates c in list)
{
if (count > )
{
s.Append(",");
}
s.Append("{\"code\":\""+c.AreaCode+"\",\"name\":\""+c.AreaName+"\"}");
count++;
}
} s.Append("]");
context.Response.Write(s);
context.Response.End(); } public bool IsReusable {
get {
return false;
}
} }

完!!