2.ASP.NET AJAx架构--客户端框架的简单实现

完整代码如下:02_ClientCentric.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="02_ClientCentric.aspx.cs" Inherits="ClientCentric" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Client-Centric Example</title> </head> <body> <form id="form1" runat="server"> <h3>客户端为中心的解决方案【使用web服务实现】</h3> 添加一个ScriptManager控件,然后还要声明一个服务引用指向本地web服务,从而生成服务的JavaScript代理,<br /> 这样就可以在客户端脚本中调用这个服务了。 <!--增加一个服务引用来生成JavaScript代理--> <asp:ScriptManager ID="ScriptManager1" runat="server"> <Services> <asp:ServiceReference Path="HRService.asmx" /> </Services> </asp:ScriptManager> <h2>Employee Lookup</h2> <div> <select id="Departments" size="5"> <option value="Engineering" >Engineering</option> <option value="HR">Human Resources</option> <option value="Sales">Sales</option> <option value="Marketing">Marketing</option> </select> </div> <br /> <div> <span id="employeeResults"></span> <span id="loading" style="display:none;" mce_style="display:none;"> <img src="images/indicator.gif" mce_src="images/indicator.gif" alt="" />   Loading ... </span> </div> <mce:script type="text/javascript"><!-- var departments = null; //注册加载(load)和卸载(unload)事件 Sys.Application.add_load(page_load); Sys.Application.add_unload(page_unload); function page_load(sender, e) { departments = $get("Departments"); //获取到列表框 $addHandler(departments, "change", departments_onchange); //注册改变(change)事件的注册 //addHandler:在运行时将事件与事件处理程序相关联,或者在添加事件处理程序时声明要执行的代码。 } function page_unload(sender, e) { $removeHandler(departments, "change", departments_onchange); //取消改变(change)事件的注册 } function departments_onchange(sender, e) { $get("employeeResults").innerHTML = ""; $get("loading").style.display = "block"; var selectedValue = departments.value; //调用JavaScript的代理 HRService.GetEmployeeCount(selectedValue, onSuccess); /* 第一个参数:列表中选中的部门项。 第二个参数:是GetEmployeeCount()方法成功返回时的一个回调函数名。 */ } function onSuccess(result) //显示结果 { $get("loading").style.display = "none"; $get("employeeResults").innerHTML = "Employee count: " + result; } // --></mce:script> </form> </body> </html>

添加的web服务类:HRService.asmx
<%@ WebService Language="C#" Class="HRService" %> using System; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Web.Script.Services;//脚本服务的命名空间 [ScriptService] //声明脚本支持的有关服务 [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class HRService : System.Web.Services.WebService { [ScriptMethod] //声明脚本支持的有关方法 [WebMethod] public int GetEmployeeCount(string department) { System.Threading.Thread.Sleep(2000); return HumanResources.GetEmployeeCount(department); } }
用到的数据访问类:HumanResources.cs
using System; public static class HumanResources { public static int GetEmployeeCount(string department) { int count = 0; switch (department) { case "Sales": count = 10; break; case "Engineering": count = 28; break; case "Marketing": count = 44; break; case "HR": count = 7; break; default: break; } return count; } }  

你可能感兴趣的:(JavaScript,Ajax,框架,webservice,function,web服务)