AjaxPro实现无刷新多级联动实例

首先，首先将AjaxPro.2.dll引用到项目中并在webconfig里面添加配置：

<httpHandlers>
      <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>

其次，编写前台页面代码：

<tr>
    <td width="15%" height="28" class="content_size11">
    <div align="right"><span class="notice">*</span>Main Category</div>
    </td>
    <td width="85%" colspan="2" class="content_size11">
         <asp:DropDownList ID="ddl_MainCategory" runat="server" Width="200px" AutoPostBack="false"
                           onchange="SubCategory(Rapid3DAdmin.Administrator.Product_add.GetSubCategory(document.getElementById('ddl_MainCategory').value).value)">
         </asp:DropDownList>
    </td>
</tr>
<tr>
    <td width="20%" height="28" class="content_size11">
    <div align="right"><span class="notice">*</span>Sub Category</div>
    </td>
    <td class="content_size11">
         <asp:DropDownList ID="ddl_SubCategory" runat="server" Width="200px"
                           onchange="CoursewareTitle(Rapid3DAdmin.Administrator.Product_add.GetCoursewareTitle(document.getElementById('ddl_SubCategory').value).value)">
         </asp:DropDownList>
    </td>
</tr>
<tr>
    <td width="15%" height="28" class="content_size11">
    <div align="right"><span class="notice">*</span>Courseware Title</div>
    </td>
    <td class="content_size11" colspan="2">
         <asp:DropDownList ID="ddl_CoursewareTitle" runat="server" Width="200px" AutoPostBack="false"
                          OnChange="Version(Rapid3DAdmin.Administrator.Product_add.GetVersion(document.getElementById('ddl_CoursewareTitle').value).value)">
         </asp:DropDownList>
    </td>
</tr>
<tr>
     <td width="15%" height="28" class="content_size11">
     <div align="right">Version</div>
     </td>
     <td class="content_size11" colspan="2">
          <asp:TextBox ID="tb_Version" runat="server" Width="200px" Enabled="false"></asp:TextBox>
     </td>
</tr>
注释：在dropdownlist中添加onchange事件，Rapid3DAdmin.Administrator为后台命名空间，Product_add为后台类，GetSubCategory()、GetCoursewareTitle()、GetVersion()分别为后台获取数据的方法

效果图：

再次，向后台添加代码：

Page_Load事件中添加：AjaxPro.Utility.RegisterTypeForAjax(typeof(/*类名*/));
[AjaxPro.AjaxMethod]
        public DataTable GetSubCategory(string MainCategoryID)
        {
            try
            {
                string mySql = @"select a.CATEGORYNAME,a.CATEGORYID from Category a
                            where a.PARENTCATEGORYID = " + MainCategoryID + "";
                return dbSys.ExecuteDataSet(mySql).Tables[0];
            }
            catch
            {
                return null;
            }
        }

        [AjaxPro.AjaxMethod]
        public DataTable GetCoursewareTitle(string SubCategoryID)
        {
            try
            {
                string mySql = @"select a.TITLENAME,a.TITLEID,b.CATEGORYNAME from Title a
                            left join Category b on b.CATEGORYID = a.CATEGORYID
                            where a.CATEGORYID = " + SubCategoryID + "";
                return dbSys.ExecuteDataSet(mySql).Tables[0];
            }
            catch
            {
                return null;
            }
        }

        [AjaxPro.AjaxMethod]
        public DataTable GetVersion(string CoursewareTitleID)
        {
            try
            {
                string mySql = "select VERSION from Title where TITLEID = " + CoursewareTitleID + "";
                return dbSys.ExecuteDataSet(mySql).Tables[0];
            }
            catch
            {
                return null;
            }
        }  
//注释：分别为前台获取数据源，并返回DataTable

最后编写Javascript代码部分：

/*处理后端代码返回的数据，并逐个添加Sub Category项 */
function SubCategory(dt) {var Subcategory = document.getElementById("ddl_SubCategory");
    Ddl_Del("ddl_SubCategory");//填充数据前先对数据项进行清空
    Subcategory.options.add(new Option("-- Please select --", -1));  
    for (var i = 0; i < dt.Rows.length; i++) {
        var Subcategory_Text = dt.Rows[i]["CATEGORYNAME"];
        var Subcategory_Value = dt.Rows[i]["CATEGORYID"];
        Subcategory.options.add(new Option(Subcategory_Text, Subcategory_Value));
    }
}
/*处理后端代码返回的数据，并逐个添加Courseware Title项 */
function CoursewareTitle(dt) {
    var CoursewareTitle = document.getElementById("ddl_CoursewareTitle");
    Ddl_Del("ddl_CoursewareTitle");//填充数据前先对数据项进行清空
    CoursewareTitle.options.add(new Option("-- Please select --", -1));
    for (var i = 0; i < dt.Rows.length; i++) {
        var CoursewareTitle_Text = dt.Rows[i]["TITLENAME"];
        var CoursewareTitle_Value = dt.Rows[i]["TITLEID"];
        CoursewareTitle.options.add(new Option(CoursewareTitle_Text, CoursewareTitle_Value));
    }
}

/*清空dropdownlist项的数据 */
function Ddl_Del(ID) {     
    var select = document.getElementById(ID);
    while (select.childNodes.length > 0) {
        select.removeChild(select.childNodes[0]);
    }
}

/*处理后端代码返回的数据，并读取到TextBox里面 */
function Version(dt) {
    var CoursewareTitle = document.getElementById("ddl_CoursewareTitle");
    var Version = document.getElementById("tb_Version");
    if (dt.Rows.length > 0) {//如果返回的内容为空，则制空
        for (var i = 0; i < dt.Rows.length; i++) {
            if (dt.Rows[i]["VERSION"] == null) {
                Version.value = "";
            } else {
                Version.value = dt.Rows[i]["VERSION"];
            }
        }
    }
    else {
        Version.value = "";
    }
}

这样你就完成了无刷新的多级联动。

注意：通常会报“AjaxPro 未定义错误”其中需要注意后台方法应定义为“public”类型（影响这个错误的其中原因之一）；

非常注意：在开发过程中，如果这是一个类似表单提交的操作（即需要Submit操作），往往在后台获取控件文本时不能获取到数据，这是因为以上控件的数据是通过前端绑定，所以后台需要作代码处理才能获取！

你需要添加这样一段代码：（以上例子为例）

if (!string.IsNullOrEmpty(Request.Form["ddl_SubCategory"]))
      {
           this.ddl_SubCategory.SelectedValue = Request.Form["ddl_SubCategory"];
      }
或
if (!string.IsNullOrEmpty(Request.Form["ddl_CoursewareTitle"]))
      {
           this.ddl_CoursewareTitle.SelectedValue = Request.Form["ddl_CoursewareTitle"];
      }
否则
ddl_SubCategory.SelectedItem.Value.ToString().Trim()
ddl_CoursewareTitle.SelectedItem.Value.ToString().Trim()//这样无法获取控件值