1.说明AjaxPro.2.dll的简单使用。实现省市县级联下拉框异步刷新。
2. 首先添加引用。在bin->添加引用->添加AjaxPro.2.dll即可。
3. 修改web.config。在System.web和compilation节点之间添加。如下所示：
代码
<system.web>
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>
<compilation debug="true" targetFramework="4.0"/>
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>
<compilation debug="true" targetFramework="4.0"/>
4. 在page_load先注册一下，如下所示。注意参数名字为该页面的类名称。
代码
public partial class CascadeDropdownlist : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(CascadeDropdownlist));
。。。。。。
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(CascadeDropdownlist));
。。。。。。
5. 添加方法。注意先要添加[AjaxPro.AjaxMethod]。而且在返回城市列表的时候本人返回的是dataset或者datatable，如果返回的是数组或者字符串之类的，那么前台控件绑定的时候会出错。本人也是初学，具体的原理不是很清楚。还望高手指教。
代码
[AjaxPro.AjaxMethod]
public DataSet BindCity(string ProvinceID)
{
string sql = "select * from City where ProvinceID='" + ProvinceID + "'";
db db = new db();
DataSet ds = db.GetDataSet(sql, "city");
db.Close();
return ds;
}
public DataSet BindCity(string ProvinceID)
{
string sql = "select * from City where ProvinceID='" + ProvinceID + "'";
db db = new db();
DataSet ds = db.GetDataSet(sql, "city");
db.Close();
return ds;
}
6. 前台页面
代码
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlProvince" runat="server" >
</asp:DropDownList>
<asp:DropDownList ID="ddlCity" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlArea" runat="server">
</asp:DropDownList>
</div>
</form>
</body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlProvince" runat="server" >
</asp:DropDownList>
<asp:DropDownList ID="ddlCity" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlArea" runat="server">
</asp:DropDownList>
</div>
</form>
</body>
7. JS脚本。这两个方法其实差不多，搞明白一个就基本OK了。起初将列表绑定到下拉框总想用city.Options.Add(new Option(value,text))这样的方法，结果失败了。调用不到。后来改用的下面的写法。
代码
<script language ="javascript" type ="text/javascript" >
//根据省ID绑定市列表
function BindCity() {
var province = document.getElementById("ddlProvince");
var id = province.value;
var city = document.getElementById("ddlCity");
city.length = 1;
var area = document.getElementById("ddlArea");
area.length = 1;
var ds = CascadeDropdownlist.BindCity(id).value;
if (ds != null && typeof (ds) == "object" && ds.Tables != null) {
if (ds.Tables[0].Rows.length > 0) {
for (var i = 0; i < ds.Tables[0].Rows.length; i++) {
var op = document.createElement("option");
op.setAttribute("value",ds.Tables[0].Rows[i]["CityID"]);
var txt = document.createTextNode(ds.Tables[0].Rows[i]["City"]);
op.appendChild(txt);
city.appendChild(op);
}
}
}
}
//根据市ID绑定县列表
function BindArea() {
var city = document.getElementById("ddlCity");
var id = city.value;
var area = document.getElementById("ddlArea");
area.length = 1;
var ds = CascadeDropdownlist.BindArea(id).value;
if (ds != null && typeof (ds) == "object" && ds.Tables != null) {
if (ds.Tables[0].Rows.length > 0) {
for (var i = 0; i < ds.Tables[0].Rows.length; i++) {
var op = document.createElement("option");
op.setAttribute("value", ds.Tables[0].Rows[i]["AreaID"]);
var txt = document.createTextNode(ds.Tables[0].Rows[i]["Area"]);
op.appendChild(txt);
area.appendChild(op);
}
}
}
</script>
//根据省ID绑定市列表
function BindCity() {
var province = document.getElementById("ddlProvince");
var id = province.value;
var city = document.getElementById("ddlCity");
city.length = 1;
var area = document.getElementById("ddlArea");
area.length = 1;
var ds = CascadeDropdownlist.BindCity(id).value;
if (ds != null && typeof (ds) == "object" && ds.Tables != null) {
if (ds.Tables[0].Rows.length > 0) {
for (var i = 0; i < ds.Tables[0].Rows.length; i++) {
var op = document.createElement("option");
op.setAttribute("value",ds.Tables[0].Rows[i]["CityID"]);
var txt = document.createTextNode(ds.Tables[0].Rows[i]["City"]);
op.appendChild(txt);
city.appendChild(op);
}
}
}
}
//根据市ID绑定县列表
function BindArea() {
var city = document.getElementById("ddlCity");
var id = city.value;
var area = document.getElementById("ddlArea");
area.length = 1;
var ds = CascadeDropdownlist.BindArea(id).value;
if (ds != null && typeof (ds) == "object" && ds.Tables != null) {
if (ds.Tables[0].Rows.length > 0) {
for (var i = 0; i < ds.Tables[0].Rows.length; i++) {
var op = document.createElement("option");
op.setAttribute("value", ds.Tables[0].Rows[i]["AreaID"]);
var txt = document.createTextNode(ds.Tables[0].Rows[i]["Area"]);
op.appendChild(txt);
area.appendChild(op);
}
}
}
</script>
OK，至此一个简单的小例子完成了。