前台代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="provinceStringBuilder.aspx.cs" Inherits="provinceStringBuilder" %>
<!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>
<script src="js/Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
bindprovince(); //在加载的时候,绑定省的方法
function bindprovince() {
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService.asmx/provinceData",
data: "{}",
success: function (result) {
var table = result.d;
var lth = $(table).find('tr').length; //总共有多少行距
// alert(lth);
$(table).find('tr').each(function () {
var myoption = "<option value=" + $(this).children().eq(0).text() + ">";
myoption += $(this).children().eq(1).text() + "</option>";
$('#Select1').append(myoption);
})
}
})
}
//以上方法是绑定省的
//下面是绑定市的方法
$('#Select1').change(function () {
var faid = $(this).val();
$('#Select2').children().remove();
//alert(faid);
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService.asmx/cityData",
data: "{faid:'" + faid + "'}",
success: function (result) {
var table = result.d;
$(table).find('tr').each(function () {
var myoption = "<option value=" + $(this).children().eq(0).text() + " >";
myoption += $(this).children().eq(1).text();
myoption += "</option>";
$('#Select2').append(myoption);
})
}
})
})
//以上是绑定市的方法
//下面是绑定县的方法
$('#Select2').bind("change", function () {
$('#Select3').children().remove();
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService.asmx/xianData",
data: "{faid:'" + $(this).val() + "'}",
success: function (result) {
var table = result.d;
$(table).find('tr').each(function () {
var myoption = "<option value=" + $(this).children().eq(0).text() + ">";
myoption += $(this).children().eq(1).text() + "</option>";
$('#Select3').append(myoption);
})
}
})
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="mydiv">
</div>
<div>
<input id="Text1" type="text" /><br />
省:<select id="Select1">
<option>--请选择--</option>
</select>
市:<select id="Select2">
<option>--请选择--</option>
</select>
县:<select id="Select3">
<option>--请选择--</option>
</select>
</div>
</form>
</body>
</html>
后台代码:
添加一个web服务文件,里面的代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Text;
/// <summary>
///WebService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
public WebService () {
//如果使用设计的组件,请取消注释以下行
//InitializeComponent();
}
[WebMethod]
public string HelloWorld() {
return "Hello World";
}
[WebMethod]
public string provinceData()
{
string str = "select provinceID,province from province";
DataTable dt = sqlhelper.getprovince(str, CommandType.Text);
StringBuilder sb = new StringBuilder();
sb.Append("<table>");
foreach (DataRow row in dt.Rows)
{
sb.Append("<tr><td>");
sb.Append(row["provinceID"].ToString()+"</td><td>");
sb.Append(row["province"].ToString()+"</td></tr>");
}
sb.Append("</table>");
return sb.ToString();
}
[WebMethod]
public string cityData(string faid)
{
string str = "select cityID,city from city where father=@fid";
DataTable dt = sqlhelper.getprovince(str, CommandType.Text, new SqlParameter("@fid", faid));
StringBuilder sb = new StringBuilder();
sb.Append("<table>");
foreach (DataRow row in dt.Rows)
{
sb.Append("<tr>");
sb.Append("<td>" + row["cityID"].ToString() + "</td>");
sb.Append("<td>" + row["city"].ToString() + "</td>");
sb.Append("</tr>");
}
sb.Append("</table>");
return sb.ToString();
}
[WebMethod]
public string xianData(string faid)
{
string str = "select areaID,area from area where father=@fid";
DataTable xdt = sqlhelper.getprovince(str, CommandType.Text, new SqlParameter("@fid", faid));
StringBuilder sb = new StringBuilder();
sb.Append("<table>");
foreach (DataRow row in xdt.Rows)
{
sb.Append("<tr>");
sb.Append("<td>"+row["areaID"].ToString()+"</td>");
sb.Append("<td>" + row["area"].ToString() + "</td>");
sb.Append("</tr>");
}
sb.Append("</table>");
return sb.ToString();
}
}
还有一个sqlhelper类,里面的代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
/// <summary>
///sqlhelper 的摘要说明
/// </summary>
public class sqlhelper
{
public sqlhelper()
{
//
//TODO: 在此处添加构造函数逻辑
//
}
private static string str = ConfigurationManager.ConnectionStrings["sqlcnn"].ConnectionString; //数据库连接字符串在web.config中定义
/// <summary>
/// 得到数据以datatable的形式返回
/// </summary>
/// <param name="sqltext">执行的命令文本</param>
/// <param name="commandtype">命令类型</param>
/// <param name="sq">命令参数</param>
/// <returns></returns>
public static DataTable getprovince(string sqltext,CommandType commandtype,params SqlParameter[] sq)
{
DataTable dt = null;
using (SqlConnection con = new SqlConnection(str))
{
using (SqlCommand com = con.CreateCommand())
{
com.CommandText = sqltext;
com.Parameters.AddRange(sq);
SqlDataAdapter da = new SqlDataAdapter(com);
dt = new DataTable();
da.Fill(dt);
}
}
return dt;
}
}