使用Anthem.NET创建支持AJAX的用户控件
3.33/5 (2投票s)
创建用户控件，类似于微软的方式，但动态生成！
引言
这是一个Web用户控件，用于以AJAX方式在SQL Membership中创建新用户。
问题：当我点击注册时，页面会回发到服务器。
目标：能够点击注册而无需加载或回发。
背景
我决定使用Anthem .NET AJAX框架来实现AJAX功能，因为
- 你无需编写任何javascript代码。
- 你可以控制ViewState。
- 你可以使用Anthem控件。
让我们从按钮开始。如果你看一下图片（这很好：D），你会看到“运行它”按钮有两个GIF图像。当你点击它时
- 它会显示另一个图像。
- 异步调用服务器方法！
- 在方法中，执行一些有用的操作。
- 显示原始图像。
但是，如果我不想使用图像按钮而只想使用普通按钮呢？好吧，这就是普通按钮的故事，这正是本文讨论的内容
- 按钮调用客户端JavaScript函数。
- 此函数（使用Anthem）调用服务器方法，并将用户名、密码、电子邮件等参数传递给它。
- 服务器方法完成后，回调会返回客户端，并调用客户端JavaScript函数，并将此结果对象传递给它。
使用代码
让我们从普通的按钮（ASP.NET 的Button控件）客户端代码开始。别忘了添加对Anthem DLL的引用。
客户端代码
//
//<asp:Button ID="Button2" runat="server"
// Text="Register" OnClientClick="call(); return false;"/>
//
<script type="text/javascript">
function call()
{
Anthem_InvokePageMethod(
'AddOne',
[6, 4],
CallBack(result)
);
}
function CallBack(result)
{
alert(result.value.ToString());
}
</script>
这就是我们在ASPX页面中调用服务器方法的方式：Anthem_InvokePageMethod('param1', [param2], param3(result));。第一个参数是方法名 Anthem_InvokePageMethod('Add', [param2], param3(result));。第二个参数是要传递给服务器方法的参数 Anthem_InvokePageMethod('Add', [6, 4], param3(result));。第三个参数是回调客户端JavaScript函数：Anthem_InvokePageMethod('Add', [6, 4], CallBack(result));。
服务器端代码
那么，我们想从客户端调用的服务器方法是什么呢？它是在同一ASPX页面中的公共方法，带有属性[Anthem.Method]。因此，要使用它，我们必须将页面注册到Anthem管理器。
public partial class CreateUser : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Anthem.Manager.Register(this);
}
[Anthem.Method]
public int Add(int param1, int param2)
{
return param1 + param2;//this is an example
}
}
我想你已经明白了，所以让我们看看如何做……
客户端代码
添加类型为文本的HTML输入（例如用户名、密码和电子邮件）和一个按钮。
<asp:Button ID="Button2" runat="server"
Text="Register" OnClientClick="register(); return false;"/>
<input id="NameTextInput" type="text" />
<input id="PassTextInput" type="text" />
<input id="EmailTextInput" type="text" />
<input id="resultTextInput" type="text" />
<script type="text/javascript">
function register()
{
Anthem_InvokePageMethod(
'CreateUserOnTheFly',
[document.getElementById('NameTextInput').value,
document.getElementById('PassTextInput').value,
document.getElementById('EmailTextInput').value],
function(result)
{
document.getElementById('resultTextInput').value = result.value;
}
);
}
</script>
服务器端代码
protected void Page_Load(object sender, EventArgs e)
{
Anthem.Manager.Register(this);
}
//Simply Create User with .NET Membership class
[Anthem.Method]
public string CreateUserOnTheFly(string name, string pass, string email)
{
string theReturn = "";
try
{
if (!string.IsNullOrEmpty(name))
//I recommend using validation as the control does
{
MembershipCreateStatus status;
MembershipUser user = Membership.CreateUser(name, pass, email,
"question", "answer", true, out status);
#region statusIs
switch (status)
{
case MembershipCreateStatus.DuplicateEmail:
theReturn = "DuplicateEmail";
break;
case MembershipCreateStatus.DuplicateProviderUserKey:
theReturn = "DuplicateProviderUserKey";
break;
case MembershipCreateStatus.DuplicateUserName:
theReturn = "DuplicateUserName";
break;
case MembershipCreateStatus.InvalidAnswer:
theReturn = "InvalidAnswer";
break;
case MembershipCreateStatus.InvalidEmail:
theReturn = "InvalidEmail";
break;
case MembershipCreateStatus.InvalidPassword:
theReturn = "InvalidPassword";
break;
case MembershipCreateStatus.InvalidProviderUserKey:
theReturn = "InvalidProviderUserKey";
break;
case MembershipCreateStatus.InvalidQuestion:
theReturn = "InvalidQuestion";
break;
case MembershipCreateStatus.InvalidUserName:
theReturn = "InvalidUserName";
break;
case MembershipCreateStatus.ProviderError:
theReturn = "ProviderError";
break;
case MembershipCreateStatus.Success:
theReturn = "Success, User: '" + user.UserName;
break;
case MembershipCreateStatus.UserRejected:
theReturn = "UserRejected";
break;
}
#endregion
}
}
catch (Exception ex)
{
theReturn = ex.Message.ToString();
}
return theReturn;
}
好吧，这是普通按钮（普通函数调用）代码。让我们看看ImageButton Anthem控件。ImageButton控件的Click事件是一个服务器端事件。
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
}
它直接把你带到服务器端代码并处理客户端。那么，我们如何获取结果呢？实际上，Anthem 为你提供了每个Anthem控件（UpdateAfterCallBack）的这个bool属性。然后，我们可以这样做（添加一个Anthem Label控件）
resultLabelAnthem.Text = theReturn;
resultLabelAnthem.UpdateAfterCallBack = true;
你在这里做的就是为Text属性赋值，并要求控件在回调后自行更新，以便客户端可以看到赋值的值。这就是我们的简单控件！
public partial class CreateUserAjax : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
string theReturn = "";
try
{
MembershipCreateStatus status;
MembershipUser user = Membership.CreateUser(TextBoxName.Text,
TextBoxPass.Text, TextBoxEmail.Text, TextBoxQuestion.Text,
TextBoxAnswer.Text, true, out status);
#region statusIs
switch (status)
{
case MembershipCreateStatus.DuplicateEmail:
theReturn = "DuplicateEmail";
break;
case MembershipCreateStatus.DuplicateProviderUserKey:
theReturn = "DuplicateProviderUserKey";
break;
case MembershipCreateStatus.DuplicateUserName:
theReturn = "DuplicateUserName";
break;
case MembershipCreateStatus.InvalidAnswer:
theReturn = "InvalidAnswer";
break;
case MembershipCreateStatus.InvalidEmail:
theReturn = "InvalidEmail";
break;
case MembershipCreateStatus.InvalidPassword:
theReturn = "InvalidPassword";
break;
case MembershipCreateStatus.InvalidProviderUserKey:
theReturn = "InvalidProviderUserKey";
break;
case MembershipCreateStatus.InvalidQuestion:
theReturn = "InvalidQuestion";
break;
case MembershipCreateStatus.InvalidUserName:
theReturn = "InvalidUserName";
break;
case MembershipCreateStatus.ProviderError:
theReturn = "ProviderError";
break;
case MembershipCreateStatus.Success:
theReturn = "Success, UserName: " + user.UserName;
break;
case MembershipCreateStatus.UserRejected:
theReturn = "UserRejected";
break;
}
#endregion
}
catch (Exception ex)
{
theReturn = ex.Message.ToString();
}
resultLabelAnthem.Text = theReturn;
resultLabelAnthem.UpdateAfterCallBack = true;
}
}
关注点
我认为异步调用服务器方法非常简单，回调是将你的代码以AJAX方式实现的方法。好吧，并非每次都是这样！我尝试创建一个AJAX文件上传控件，添加了许多脚本、ActiveX……但最终，安全系统阻止了读取客户端计算机上文件的流，我注意到我试图在没有用户许可的情况下以AJAX方式异步上传客户端文件！一些开发者说他们使用FileUpload控件和iFrames做到了这一点……我也尝试过，但失败了。请告诉我你的经验。