Friday, November 30, 2007

CreateUserWizard Ajax-Enabled using Anthem .NET


Screenshot - CreateUserAjax.jpg

Introduction


This is a Web User Control to create a new user in the SQL Membership in ajax way.
The Problem: When i click register the page do a postback to the server.
The Goal: Click register without loading or postback.



Background


I decided to use Anthem .NET Ajax Framework to get the AJAX functionality because:
- You won't write any javascript
- Control the VIEWSTATE
- Anthem Controls



Lets begin with the button, If you see the picture (this is good :D) then you can see the 'run it' button which is 2 gif images.
When you click it:
- It displays another image.
- Calls a server method! (asynchronously)
- In the method, do something useful.
- Displays the original image.



But what if I dont want to use the image button and just use a normal button?
Well this is the story of a normal button and this is exactly what the article talks about:
- The button calls a client javascript function.
- This function (using anthem) calls a server method, passing it parameters like UserName, Pass, Email.. etc.
- When the server method completes, a callBack comes to the client with the result calling a client javascript function passing it this result object.



Using the code


Starting with the normal button (ASP.NET Button Control) Client-Side Code:
Small Example:
Dont forget to add a reference to Anthem dll
Client-Side Code:



//
//<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>


This is how to call a server method in aspx page, Anthem_InvokePageMethod('param1', [param2], param3(result));
The first parameter is the method name Anthem_InvokePageMethod('Add', [param2], param3(result));
The second parameter is the parameters you want to pass to the server method Anthem_InvokePageMethod('Add', [6, 4], param3(result));
The third parameter is the callBack client javascript function Anthem_InvokePageMethod('Add', [6, 4], CallBack(result));



Server-Side Code:
So what is the server method that we want to invoke from the client-side?
Its a public method in the same aspx page, with this attribute [Anthem.Method], so to use it we have to register the page to the Anthem Manager.



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
}
}


I think you got it, so lets see how to do it..



Client-Side Code:
Add HTML inputs of type text (for username, password and email for example) and a button



<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>




Server-Side Code:



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;
}




Well, this was the normal button (normal functions calling) code, lets see the Image Button Anthem Control
The image button control click event is a server event



    protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{

}


Which brings you directly to the server-side code and handle the client-side itself, then how can you get the result?
Actuallty Anthem provides you with this bool property with every Anthem control (UpdateAfterCallBack), then we can make this:
(Add an Anthem label control)
        resultLabelAnthem.Text = theReturn;

resultLabelAnthem.UpdateAfterCallBack = true;


What you exactly do here is assign a value to the text property and ask the control to update itself after the callBack so the client can see the assigned value.
And this is our simple Control!
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;
}
}




Points of Interest


I think this is very simple, invoking server methods asynchronously and CallBacks are the way to put your code in an ajax way. Well not everything! I tried to make an Ajax File Uploader control, typed many scripts, ActiveX.. but finally the security system stopped the stream to read the files on the client computer and I noticed I'm trying to upload any file from the client wihtout his permission asynchronously in ajax way!.
Some developers say they made it with the FileUpload Control and iFrames.. I tried this too but I failed.
Please tell me your experience.



History


Expecting an Ajax Validation Control

0 comments: