局部刷新AJAX的用法。DropDownList联动

最新推荐文章于 2018-08-03 14:32:00 发布

原创最新推荐文章于 2018-08-03 14:32:00 发布 · 602 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #callback #dataset #function #object #null

c#工作记录专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在ASP.NET应用中使用AjaxPro实现无刷新下拉列表联动效果，包括添加AjaxPro.2.dll、配置web.config及前后台代码示例。

1、先添加AjaxPro.2.dll到bin里。

2、在web.conf里添加

</httpHandlers>

3.在要用到位置的后台添加：后台：

public partial class Admin_news_picture_add : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

AjaxPro.Utility.RegisterTypeForAjax(typeof(Admin_news_picture_add));//名字要一样

}

//呆会前台要调用这个方法

[AjaxPro.AjaxMethod]
public static DataSet DropDownList1Result(int ddl1)
{
DataSet dlist = Scms.SystemCms.news_system_api.GetSmallclassByBigId(ddl1);
return dlist;
}

3、前台：DropDownList1控键、DropDownList3控键。这两个控键实现无刷新连动

//ddl1.value为前台到到控键值传给要调用的后台方法。get_Result_CallBack后台方法调用完后把返回值

// 传给这个方法。如果调用后台方法后没有返回值的话。不用写“get_Result_CallBack”
Admin_news_picture_add.DropDownList1Result(ddl1.value,get_Result_CallBack);

            }
        }
        function get_Result_CallBack(response)
        {
            document.all("<%=DropDownList3.ClientID%>").length=0;
            if (response.value != null)
            {
                var ds = response.value;
                if(ds != null && typeof(ds) == "object" && ds.Tables != null)
                {
                    for(var i=0; i<ds.Tables[0].Rows.length; i++)
                    {
                        var name=ds.Tables[0].Rows[i].smallchinesename;
                        var id=ds.Tables[0].Rows[i].bh;

                        //得到的值累加到DropDownList3控键中
                        document.all("<%=DropDownList3.ClientID%>").options.add(new Option(name,id));
                    }
                 }
            }
            return
        }
    </script>