目的:学习AJAX,用于实现在 选择“省份”下拉框时候,联动实现在“城市”下拉框中显示出相应的“城市”名称 。
步骤1:在页面CS文件中的PAGE_LOGD方法中注册
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(cs文件的类名));
///向页面注册对象,在前台用该对象调用后台方法
}
步骤2. 在页面CS文件中创建在前台页面需要调用的后台方法
[AjaxPro.AjaxMethod]
public DataSet getBranchNameByAjax(string selectedValue)
{
IList<SiteBranch> list = siteBaseInfoManager.GetBranchInfo(selectedValue);
DataSet ds = new DataSet();
DataTable dtId = new DataTable();
DataTable dtName = new DataTable();
DataRow idRow, nameRow;
dtId.Columns.Add(new DataColumn("id"));
dtName.Columns.Add(new DataColumn("name"));
for(int i=0;i<list.Count;i++)
{
idRow = dtId.NewRow();
nameRow =dtName.NewRow();
idRow[0] = list[i].Id;
nameRow[0] = list[i].FZJG;
dtId.Rows.Add(idRow);
dtName.Rows.Add(nameRow);
}
ds.Tables.Add(dtId);
ds.Tables.Add(dtName);
return ds;
}
步骤3:在下拉框属性中加入JS方法,如下:
<asp:DropDownList ID="DropDownListPlace" runat="server" οnchange="getBranchNameByAjax(this.value)"
Width="85px">
</asp:DropDownList>
步骤4:AJAX调用的JS函数,如下:
function getBranchNameByAjax(value)
{
Module_DataManage_SiteInfoManage_SiteInfoManage.getBranchNameByAjax(value,fillSiteBranchByresponse);
}
function fillSiteBranchByresponse(response)
{
if(response.value==null)
{
if(response.error=="login")
{
window.location.reload();
}
alert("与服务器断开连接!");
}
else
{
var dtId=response.value.Tables[0];
var dtName=response.value.Tables[1];
document.getElementById("DropDownListBranch").disabled=false;
document.getElementById("DropDownListBranch").length=0;
// if(dtId==""||dtId==null){document.getElementById("DropDownListBranch").options.add(new Option("",""));}
for(var i=0;i<dtId.Rows.length;i++)
{
var id=dtId.Rows[i].id;
var name=dtName.Rows[i].name;
if(name==""||name==null){document.getElementById("DropDownListBranch").options.add(new Option("",""));}
document.getElementById("DropDownListBranch").options.add(new Option(name,id));
}
}
}
步骤5:在工程中加入AjaxPro.dll,见附件