Javascript 直接调用服务器C#代码 ASP.NET Ajax实例

时间：2015-01-29 来源：互联网作者：佚名

在MS Ajax中，JS与C#交互的一种方式就是调用WebService，该WebService可以ASMX的也可以是WCF的，不论哪种方式，系统都会自动为开发者生成代理的JS类。实现方法如下：

1. 建立一个网站，并在其中添加一个WCF服务（这里一定要选择Ajax-Enabled WCF Service），如下图所示：

2. IDE会自动为我们生成一个SVC文件，是对外的接口，以及该SVC对应的后台实现类，该类文件会被放在App_Code下，如下图所示：

height=99

3.修改该类的代码，如下所示：%20
复制代码%20代码如下:%20
[ServiceContract(Namespace%20=%20"TestAjax")]%20
[AspNetCompatibilityRequirements(RequirementsMode%20=%20AspNetCompatibilityRequirementsMode.Allowed)]%20
public%20class%20Service%20
{%20
[OperationContract]%20
public%20bool%20ValidateUser(string%20uid,%20string%20pwd)%20
{%20
if%20(uid=="sa"&&pwd=="sa")%20
{%20
return%20true;%20
}%20
return%20false;%20
}%20
}%20
%20
4.现在我们就可以页面里调用了，首先在页面中添加一个ScriptManager，并引入我们刚才编写的那个WCF%20WebService（目的是在运行的时候生成JS的代理类），如下所示：%20
复制代码%20代码如下:%20
<%@%20Page%20Language="C#"%20AutoEventWireup="true"%20CodeFile="Default.aspx.cs"%20Inherits="_Default"%20%>%20
<!DOCTYPE%20html%20PUBLIC%20"-//W3C//DTD%20XHTML%201.0%20Transitional//EN"%20"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">%20
<html%20xmlns="http://www.w3.org/1999/xhtml">%20
<head%20runat="server">%20
<title></title>%20
</head>%20
<body>%20
<form%20id="form1"%20runat="server">%20
<div>%20
<asp:ScriptManager%20ID="ScriptManager1"%20runat="server">%20
<Services>%20
<asp:ServiceReference%20Path="~/Service.svc"/>%20
</Services>%20
</asp:ScriptManager>%20
</div>%20
</form>%20
</body>%20
</html>%20
%20
5.接下来可以编写JS代码来直接调用C#写的WebService了。JS代码如下所示：%20
复制代码%20代码如下:%20
<script%20type="text/javascript">%20
function%20ValidateUser(uid,%20pwd)%20{%20
TestAjax.Service.ValidateUser(uid,pwd,OnSucceed%20,OnFailed%20);%20
}%20
function%20OnSucceed(result)%20{%20
if%20(result%20==%20true)%20{%20
window.alert("通过验证");%20
}%20
else%20{%20
window.alert("验证失败！");%20
}%20
}%20
function%20OnFailed(result)%20{%20
window.alert("操作失败："+result%20._message);%20
}%20
</script>%20
%20
6.这里请大家注意，在调用TestAjax.Service.ValidateUser方法时，代码中并没有直接取该函数的返回值，因为利用这种方案对服务器函数的调用都是异步的，正确的处理方法是指定了两个回调函数OnSucceed和OnFailed,第一个函数是成功时的回调，后一个是失败时的回调，这两个函数都需要一个参数，OnSucceed的参数就是服务器函数的返回值，而OnFailed的参数是失败时的出错信息，功能有点像Exception类型，其中_message属性中出错信息，_stackTrace中出错的堆栈跟踪信息。%20
7.千万别说这种回调方法麻烦！其实这是一种常规的异步回调模式，大多数情况（不论什么语言）都会这么写的！%20
8.页面上完整的代码如下所示：%20
复制代码%20代码如下:%20
<%@%20Page%20Language="C#"%20AutoEventWireup="true"%20CodeFile="Default.aspx.cs"%20Inherits="_Default"%20%>%20
<!DOCTYPE%20html%20PUBLIC%20"-//W3C//DTD%20XHTML%201.0%20Transitional//EN"%20"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">%20
<html%20xmlns="http://www.w3.org/1999/xhtml">%20
<head%20runat="server">%20
<title></title>%20
<script%20type="text/javascript">%20
function%20ValidateUser(uid,%20pwd)%20{%20
TestAjax.Service.ValidateUser(uid,pwd,OnSucceed%20,OnFailed%20);%20
}%20
function%20OnSucceed(result)%20{%20
if%20(result%20==%20true)%20{%20
window.alert("通过验证");%20
}%20
else%20{%20
window.alert("验证失败！");%20
}%20
}%20
function%20OnFailed(result)%20{%20
window.alert("操作失败："+result%20._message);%20
}%20
function%20Button1_onclick()%20{%20
var%20uid%20=%20$get("tbxUid").value;%20
var%20pwd%20=%20$get("tbxPwd").value;%20
ValidateUser(uid,pwd);%20
}%20
</script>%20
</head>%20
<body>%20
<form%20id="form1"%20runat="server">%20
<div>%20
<asp:ScriptManager%20ID="ScriptManager1"%20runat="server">%20
<Services>%20
<asp:ServiceReference%20Path="~/Service.svc"/>%20
</Services>%20
</asp:ScriptManager>%20
</div>%20
用户名：<input%20id="tbxUid"%20type="text"%20/><br%20/>%20
密码：%20<input%20id="tbxPwd"%20type="text"%20/>%20
<input%20id="Button1"%20type="button"%20value="验证"%20onclick="return%20Button1_onclick()"%20/>%20
</form>%20
</body>%20
</html>%20
%20
9.运行结果如下所示：%20
当用户名和密码都是sa时会通过验证%20
当用户名和官友有一个值不是sa时就不能通过验证