关于无刷新联动,目前实现的方法有很多种,可以使用XMLHttpRequest对象来实现,也可以采用Ajax Library,另外也可以使用AjaxControlToolkit里的控件来实现.刚刚这些天在一个项目里使用到了这个功能
    
     通常联动又分静态联动(数据不变)和动态联动(数据会变动),比如省市区县这里固定数据就是很少变动的。又比如一个公司里,下面分得有不同的部分,各部门下又可能有不能的小组......这样的关系,各个小组都有可能随时都会变动的,撤消也可能会增加小组等。下面我就一动态联动简单介绍下。

准备工作:
 ● 建立数据库

 ● 初始化数据
     JavaScript和Webservice实现联动

 ● 建立相关类和WebService

}
}
}

一、使用XMLHttpRequest实现
     建立两个aspx文件,AjaxClient.asp,AjaxServer.aspx,下面是两个文件的CS代码定义:

 1JavaScript和Webservice实现联动public partial class AjaxClient : System.Web.UI.Page
 2}

     在AjaxClient.aspx里放置了两个下拉列表控件,一个用来显示城市,一个用来显示区。在AjaxClient的服务端我们为城市绑定好数据,这里是通过调用WebService里的GetCitys()得到的一个数组,详细可以看上面的WebService的详细定义代码,这里我们还为这两个控件设置了客户端事件及响应事件的方法。下面我们看看AjaxServer.aspx的定义:

 1JavaScript和Webservice实现联动public partial class AjaxServer : System.Web.UI.Page
 2}

    上面的代码不难理解,在Page_Load里获取AjaxClient.aspx传递过来的CityID这个参数,然后通过这个参数的值调用下面定义的GetDistricts方法,在这方法里通过调用WebService里的方法得到查询数据库得到一个数组对象。然后在把这个数组对象解吸为XML并Response给客户端。客户端的JavaScript定义如下:

 1JavaScript和Webservice实现联动<script type="text/javascript">
 2JavaScript和Webservice实现联动   ////初始化客户端控件引用
 3JavaScript和Webservice实现联动   var ddlCitys=document.getElementById("<% = ddlCitys.ClientID %>");
 4JavaScript和Webservice实现联动   var ddlDistricts=document.getElementById("<% = ddlDistricts.ClientID %>");
 5JavaScript和Webservice实现联动
 6JavaScript和Webservice实现联动    //初始化HttpRequest
 7JavaScript和Webservice实现联动    var HttpRequest = false;
 8JavaScript和Webservice实现联动    if(window.XMLHttpRequest)
 9script>

    来分析下上面的JavaScript的定义,getDistrictByCityID方法就是通过CityID做为参数向AjaxServer.aspx发起请求,然后返回一个XML对象,然后通过getDistrictByCityID方法的回调函数来处理返回的XML,解析后把值绑定到ddlDistrict这个下拉列表控件上,这样使用XMLHttpRequest就实现了异步发起请求并处理回调的方式实现了无刷新联动。运行如下:
     JavaScript和Webservice实现联动

二、使用AJAX Library实现
    这里我简单介绍下使用AJAX Library的实现,通过ScritrpManager访问WebService的方法调用方法得到一个数组对象,在客户端通过JavaScript解析数组实现,先看看WebService里的方法定义:

 1JavaScript和Webservice实现联动[WebMethod]
 2JavaScript和Webservice实现联动public District[] GetDistricts(int cityID)
 3}

    此方法返回一个数组到客户端,客户端通过回调函数来处理这个数组并把数据绑定到下拉列表控件上。这里同上一样先初始化一个下拉列表控件的数据:

 1JavaScript和Webservice实现联动public partial class AjajLibrary : System.Web.UI.Page
 2}

引入Webservice:

1JavaScript和Webservice实现联动<asp:ScriptManager ID="ScriptManager1" runat="server">
2JavaScript和Webservice实现联动  <Services>
3JavaScript和Webservice实现联动    <asp:ServiceReference Path="WebService.asmx" InlineScript="true" />
4JavaScript和Webservice实现联动  </Services>
5JavaScript和Webservice实现联动</asp:ScriptManager>
 1JavaScript和Webservice实现联动<script type="text/javascript">
 2JavaScript和Webservice实现联动//初始化控件引用
 3JavaScript和Webservice实现联动var ddlCitys = $get("<% = ddlCitys.ClientID %>");
 4JavaScript和Webservice实现联动var ddlDistrict = $get("<% = ddlDistricts.ClientID %>");
 5JavaScript和Webservice实现联动   
 6JavaScript和Webservice实现联动var obj="";
 7JavaScript和Webservice实现联动
 8JavaScript和Webservice实现联动function onCityChanged(cityID)
 9script>

三、使用AjaxControlToolkit控件实现

相关文章:

  • 2021-08-20
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-08-08
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-07-31
  • 2022-12-23
  • 2021-06-24
  • 2022-12-23
  • 2021-04-19
相关资源
相似解决方案