目的：学习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" onchange="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,见附件

发表于 @ 2007年10月09日 15:34:00|评论(loading...)|编辑