Loading ...

jQuery Mobile Registration / Signup Dialog | CodeAsp.Net

jQuery Mobile Registration / Signup Dialog

 /5
0 (0votes)

This is an addition to my series of blog posts on jQuery Mobile:

So, if you've been following my posts so far, you should have a good overview of jQuery Mobile, it's documentation, how to set up your Visual Studio environment, the structure of a jQuery Mobile page, and how to create a simple Login Dialog box.

In this post, I'm going to quickly show you how to create a jQuery Mobile Registration / Signup login dialog box.

CLICK TO DOWNLOAD THE PROJECT FILES

And just like my other posts, there are a handful of ways you can do this ... this is just one solution ... and a quick and dirty on at that. 

To begin you want to put a "signup" button on your default page in the header. 

You can do this using the following code:

 

	<!-- start header -->
<div data-role="header" data-nobackbtn="true">
<a href="register.aspx" data-rel="dialog">Sign up</a>
<h1>My Mobile App</h1>
<a href="login.aspx" data-rel="dialog">Login</a>
</div>
<!-- end header -->

 

After that, and continuing with what we've created before, I added a few files to my project:

  1. /register.aspx
  2. FormActions/register.ashx

Register.aspx

 

<!DOCTYPE html> 
<html>
<head id="Head1" runat="server">
<title>Login</title>
</head>
<body>

<div data-role="page">

<div data-role="header" data-position="inline" data-nobackbtn="true">
<h1>Sign up</h1>
<a href="/m/" class="ui-btn-right">Cancel</a>
</div>

<div data-role="content" data-theme="c" data-inset="true">

<form action="/FormActions/register.ashx" method="get">

<fieldset>

<asp:Literal runat="server" ID="litMessage"></asp:Literal>

<label for="username">Username:</label>
<input type="text" name="username" id="username" value="" />

<label for="email">Email:</label>
<input type="email" name="email" id="email" value="" />

<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" />

<label for="firstName">First name:</label>
<input type="text" name="firstName" id="firstName" value="" />

<label for="firstName">Last name:</label>
<input type="text" name="lastName" id="lastName" value="" />

<p>By submitting this information, I acknowledge that I have
read and agree to the <a href="#">Terms of Use</a> and <a href="#">Privacy Policy</a></p>

<a href="index.html" data-role="button" data-inline="true" data-theme="b">Login</a>

<p>Already have an account? <a data-rel="dialog" href="login.aspx">Login</a></p>

</fieldset>

</form>

</div>

</div>

</body>
</html>

 

Register.aspx.cs

 

protected void Page_Load(object sender, EventArgs e)
{
litMessage.Text = "Email or password is incorrect. Try again.";
}



/FormActions/register.ashx

 

        public void ProcessRequest(HttpContext context)
{
string email = System.Web.HttpContext.Current.Request.Form["email"];
string password = System.Web.HttpContext.Current.Request.Form["password"];
string firstName = System.Web.HttpContext.Current.Request.Form["firstName"];
string lastName = System.Web.HttpContext.Current.Request.Form["lastName"];

// do stuff here to log the user in ...

bool myBool = false;
if (myBool)
{
// the user is logged in, redirect them to another page
}
else
{
// the login failed, return them to login page
System.Web.HttpContext.Current.Response.Redirect("~/register.aspx?msg=failed");
}
}


And there you go ... I hope that give you the gist of things.  From here you can get into this more hardcore and all the bells and whistles that you like.

Thanks again!

Comments (4)

   
virux
 Very useful. Thank you so much. Please provide tutorial to databinding listview. cheers ~
1/5/2011
 · 
by
   
zhengokusa
zhengokusa
thank you for this simple example.
1/24/2011
 · 
by
   
sham
sham
Fantastic write up getting started with jqm and asp.net.. Thanks and keep it coming !!
6/24/2012
 · 
by
   
Marilyn Peniscola

Hi there I just wanted to say that I did enjoy my visit to your web site and to wish you all the best with it in the coming years - Marilyn Peniscola

9/2/2016
 · 
by
  • :*
  • :*
  • :
 *

Top Posts