Choose a location:
posted 11/17/2010 by Tim Eisenhauer
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:
<!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>
protected void Page_Load(object sender, EventArgs e) { litMessage.Text = "Email or password is incorrect. Try again."; }
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!
Very useful. Thank you so much. Please provide tutorial to databinding listview. cheers ~
thank you for this simple example.
What kind of email newsletter would you prefer to receive from CodeAsp.Net? 18
