如何在用户控件里联动Dropdownlist

最新推荐文章于 2022-04-30 08:57:32 发布

weixin_30522095

最新推荐文章于 2022-04-30 08:57:32 发布

阅读量149

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/winsonet/archive/2006/10/19/534187.html

这几天做项目过程中，发现要在用户控件里做一个无刷新的Dropdownlist联动效果时遇到了些问题，现在终于将问题解决了，因此写出来与大家分享一下，呵呵，也许这里的高手们都已知道这问题是如何解决的了，不过为了让自己也留下些印象，还是决定在此献丑了！

要实现无刷新效果，相信大家都会马上想到AJAX，不错，我现在就是用AJAXPRO来完成的，其实我之前一直解决不了的一个问题就是在用户控件里调用JavaScript获取页面的控件ID，大家都知道如果是在一般的ASPX页面，要获取控件只需要使用

Document.getElementById(ControlID);

就可以获取所需的控件了，不过如果是使用用户控件，然后在另一个页面调用此用户控件，那么直接使用上面的方法就获取不了用户控件页面里的子控件了，我想这应该是由于用户控件被另一页面调用，而其实并不属于那个页面的，所以每次用此方法获取时，都会提示“缺少对象”的错误。

要在用户控件页面里要获取其里面的控件，可以用以下的方法：

var id = '<%=this. ControlID.ClientID%>';

var Object=document.getElementById(id);

通过上面２句，就可以获取实际用户控件页面里的子控件了！

以下是我的部分实现代码，主要是完成了省份与城市的联动：（关于数据绑定的代码我就不写出来了，在此只写出相关性的代码）

CS文件：

１、先注册一个AJAXPro组件，然后绑定DropDownList控件的数据，其加上JS的事件

private void Page_Load(object sender, System.EventArgs e)
2

{
3

AjaxPro.Utility.RegisterTypeForAjax(typeof(Top_test1));
4

// 在此处放置用户代码以初始化页面
5

if(!IsPostBack)
6

{
7

BindToPro();
8

BindToCity();
9

this.ddlProSt_hy.Attributes.Add("onchange","cityResult();");
10

}
11

}
12

２、发布AJAX服务器端的方法：

GetCityList#region GetCityList
2

[AjaxPro.AjaxMethod]
3

public DataSet GetCityList(int povinceid)
4

{
5

string sql="select CityID,CityName from cities where provinceid="+povinceid;
6

return GetData(sql);
7

}
8

#endregion

ASCX用户控件文件：
３、加入以下JavaScript代码

<SCRIPT language="javascript">
2

//根据省份ID获取城市列表
3

function cityResult()
4

{
5

var id = '<%=this.ddlProSt_hy.ClientID%>';//获取所需的控件ID
6

var Pro=document.getElementById(id); //根据获取的ID得到控件对象
7

HCWLWebSystem.WebUI.Top_test1.GetCityList(Pro.selectedIndex,get_city_Result_CallBack);//通过AjaxPro调用后台服务器方法
8

}
9

//获取后台回调数据的方法
10

function get_city_Result_CallBack(response)
11

{
12

if (response.value != null)
13

{
14

var id = '<%=this.ddlCitySt_hy.ClientID%>';//获取要关联的控件ID
15

var city=document.getElementById(id); //根据ID获取要关联的控件对象
16

city.length=0;　　　　
17

　　　　 var ds = response.value;
18

　　　　 //根据后台返回的DataSet动态地添加DropDownList的项
19

if(ds != null && typeof(ds) == "object" && ds.Tables != null)
20

{
21

for(var i=0; i<ds.Tables[0].Rows.length; i++)
22

{
23

　　　　 var name=ds.Tables[0].Rows[i].CityName;
24

　　　　　　 var id=ds.Tables[0].Rows[i].cityID;
25

　　　　　　 city.options.add(new Option(name,id));//为控件添加项
26

　　　　 }
27

}
28

}
29

return
30

}
31

</SCRIPT>

４、然后在Body里的代码：

<body MS_POSITIONING="GridLayout">
2

<form id="Form1" method="post" runat="server">
3

<FONT face="宋体">
4

<asp:DropDownList id="ddlProSt_hy" style="Z-INDEX: 101; LEFT: 400px; POSITION: absolute; TOP: 208px"
5

runat="server"></asp:DropDownList>
6

<asp:DropDownList id="ddlCitySt_hy" style="Z-INDEX: 102; LEFT: 552px; POSITION: absolute; TOP: 208px"
7

runat="server"></asp:DropDownList></FONT>
8

</form>
9

</body>

　　呵呵，大概就是这么多啦，由于本人技术有限，而且也是第一次发这类文章，如有错误的地方，望大家多多指教哦：）

转载于:https://www.cnblogs.com/winsonet/archive/2006/10/19/534187.html