PageMethod 一种更简单、更快速的 Asp.Net AJAX 方法我们可以通过释放 AJAX 的力量轻松改善用户体验和 Web 应用程序的性能。我在 AJAX 中最喜欢的东西之一是 PageMethod。
PageMethod 是一种我们可以在 java 脚本中公开服务器端页面方法的方法。这带来了很多机会,我们可以在不使用缓慢且烦人的回发的情况下执行大量操作。
在这篇文章中,我将展示 ScriptManager 和 PageMethod 的基本用法。在这个例子中,我创建了一个用户注册表,用户可以在其中注册他的电子邮件地址和密码。这是我将要开发的页面的标记:
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width: 200px;">
<asp:Label ID="lblEmailAddress" runat="server" Text="Email Address"></asp:Label>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
</fieldset>
<div>
</div>
<asp:Button ID="btnCreateAccount" runat="server" Text="Signup" />
</div>
</form>
</body>
</html>
要设置页面方法,首先必须在页面上拖动脚本管理器。
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
还要注意我已经改变了EnablePageMethods="true"
。
这将告诉 ScriptManager 我将从客户端调用 PageMethods。
现在下一步是创建一个服务器端函数。
这是我创建的函数,该函数验证用户的输入:
[WebMethod]
public static string RegisterUser(string email, string password)
{
string result = "Congratulations!!! your account has been created.";
if (email.Length == 0)//Zero length check
{
result = "Email Address cannot be blank";
}
else if (!email.Contains(".") || !email.Contains("@")) //some other basic checks
{
result = "Not a valid email address";
}
else if (!email.Contains(".") || !email.Contains("@")) //some other basic checks
{
result = "Not a valid email address";
}
else if (password.Length == 0)
{
result = "Password cannot be blank";
}
else if (password.Length < 5)
{
result = "Password cannot be less than 5 chars";
}
return result;
}
要告诉脚本管理器此方法可通过 javascript 访问,我们需要确保两件事:
第一:此方法应为“公共静态”。
第二:上面的方法应该有一个[WebMethod]标签,如上面的代码所写。
现在我已经创建了创建帐户的服务器端函数。现在我们必须从客户端调用它。以下是我们如何从客户端调用该函数:
<script type="text/javascript">
function Signup() {
var email = document.getElementById('<%=txtEmail.ClientID %>').value;
var password = document.getElementById('<%=txtPassword.ClientID %>').value;
PageMethods.RegisterUser(email, password, onSucess, onError);
function onSucess(result) {
alert(result);
}
function onError(result) {
alert('Cannot process your request at the moment, please try later.');
}
}
</script>
为了调用我的服务器端方法注册用户,ScriptManager 生成一个代理函数,该函数在 PageMethods 中可用。
我的服务器端函数有两个参数,即电子邮件和密码,在这些参数之后,我们必须给出另外两个函数名称,如果方法成功执行(第一个参数,即 onSucess)或方法失败(第二个参数,即结果),它们将运行。
现在一切似乎都准备好了,现在我已经添加OnClientClick="Signup();return false;"
了我的注册按钮。所以这里是我的 aspx 页面的完整代码:
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<fieldset style="width: 200px;">
<asp:Label ID="lblEmailAddress" runat="server" Text="Email Address"></asp:Label>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
</fieldset>
<div>
</div>
<asp:Button ID="btnCreateAccount" runat="server" Text="Signup" OnClientClick="Signup();return false;" />
</div>
</form>
</body>
</html>
<script type="text/javascript">
function Signup() {
var email = document.getElementById('<%=txtEmail.ClientID %>').value;
var password = document.getElementById('<%=txtPassword.ClientID %>').value;
PageMethods.RegisterUser(email, password, onSucess, onError);
function onSucess(result) {
alert(result);
}
function onError(result) {
alert('Cannot process your request at the moment, please try later.');
}
}
</script>