使用 AjaxPro 来完成二级联动的效果

最新推荐文章于 2022-02-25 20:00:37 发布

最新推荐文章于 2022-02-25 20:00:37 发布 · 60 阅读

文章标签：

#ASP #JavaScript #Web #C #C++ #ViewUI

本文介绍如何在ASP.NET Web应用程序中实现基于Ajax的多级下拉框联动效果，包括配置Web.config文件、编写服务器端代码及客户端JavaScript交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先要在Web.config的<system.web>中添加下面的东东

</httpHandlers>

然后在服务器端的Page_Load中添加下面一行代码

AjaxPro.Utility.RegisterTypeForAjax(typeof(index));

BigClassid 前台页面

＜script type="text/javascript"＞
function ShowCity(id)
{
var result = chen.getCityList(id).value;
var ddlcity = document.getElementById("ddlCity");
ddlcity.length=0;
for(var i=0; i＜result.Rows.length; i++)
{
ddlcity.options.add(new Option(result.Rows[i].SmallClass,result.Rows[i].id));
}
}
＜/script＞
＜/head＞
＜body＞
＜form id="form1" runat="server"＞
＜p＞
省份：＜asp:DropDownList ID="ddlPro" runat="server"＞
＜/asp:DropDownList＞
市区：＜asp:DropDownList ID="ddlCity" runat="server"＞
＜/asp:DropDownList＞
＜/p＞
＜div＞

＜/div＞
＜/form＞
＜/body＞
＜script type="text/javascript"＞
function ShowCity(id)
{
var result = chen.getCityList(id).value;
var ddlcity = document.getElementById("ddlCity");
ddlcity.length=0;
for(var i=0; i＜result.Rows.length; i++)
{
ddlcity.options.add(new Option(result.Rows[i].SmallClass,result.Rows[i].id));
}
}
＜/script＞
＜/head＞
＜body＞
＜form id="form1" runat="server"＞
＜p＞
省份：＜asp:DropDownList ID="ddlPro" runat="server"＞
＜/asp:DropDownList＞
市区：＜asp:DropDownList ID="ddlCity" runat="server"＞
＜/asp:DropDownList＞
＜/p＞
＜div＞

＜/div＞
＜/form＞
＜/body＞

后台：

[AjaxPro.AjaxNamespace("chen")]
public partial class ddlTwo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(ddlTwo));

SqlConnection conn = new SqlConnection("server=.; uid=sa; pwd=chen123; database=C_News; ");
conn.Open();
SqlCommand cmd = new SqlCommand("", conn);
string strsql = "select * from C_BigClass";
cmd.CommandText = strsql;
SqlDataAdapter da = new SqlDataAdapter();
da.SelectCommand = cmd;
DataTable dt = new DataTable();
da.Fill(dt);

this.ddlPro.DataSource = dt;
this.ddlPro.DataValueField = "id";
this.ddlPro.DataTextField = "BigClass";
this.ddlPro.DataBind();

this.ddlPro.Attributes["onchange"] = "ShowCity(this.options[selectedIndex].value)";

conn.Close();
}

[AjaxPro.AjaxMethod]
public DataTable getCityList(int id)
{
Hashtable ht = new Hashtable();

SqlConnection conn = new SqlConnection("server=.; uid=sa; pwd=chen123; database=C_News; ");
conn.Open();
SqlCommand cmd = new SqlCommand("", conn);
string strsql = "select * from C_SmallClass where BigClassid="+id+"";
cmd.CommandText = strsql;
SqlDataAdapter da = new SqlDataAdapter();
da.SelectCommand = cmd;
DataTable dt = new DataTable();
da.Fill(dt);

return dt;
}
}

　　如果我们要进行三级或四级连动，其实很简单，只要在Page_load下面this.ddlPro.Attributes["onchange"] = "ShowCity(this.options[selectedIndex].value)"; 的下面为每个下拉框都加一个方法就行了。只不过多写几个public DataTable getCityList(int id)的程序。