jQuery Mobile Login Dialog Box

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

• jQuery Mobile Introduction & Tips To Get Started
• jQuery Mobile Getting Started

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, and the structure of a jQuery Mobile page.

Today, I'm going to quickly show you how to create a jQuery Mobile Login dialog box. 

Since many applications require a login, it's good practice to create this and get it out of the way. So, here we go.

NOTE: This is an example to help you get up and running fast.  There are probably a handful of different ways you can do this ... some more secure than others.

In the root of my application, I added a "login.aspx" file, as shown below:

I've also added a new directory to store files, such as ashx files, to handle form processing... and added login.ashx

In this login.ashx file, for demonstration purposes, I added the following code:

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

            // 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("~/login.aspx?msg=failed");
            }
        }

On my default.aspx page, I have added a "login button" to the header section as show below:

	<!-- start header -->
	<div data-role="header" data-nobackbtn="true">
		<h1>My Mobile App</h1>
		<a href="login.aspx" data-rel="dialog" class="ui-btn-right">Login</a>
	</div>
	<!-- end header -->

You'll notice that there is a data-rel="dialog" property.  This property tells the jQuery Mobile framework to "open this page as a dialog box" ... rather than a 'full page' ... I've also linked this to the "login.aspx" page ... and you'll also notice a CSS class:  class="ui-btn-right" ... this tells the jQuery Mobile framework to float the login button the the right side.

And when you view this default.aspx page in a browser you'll now see the login button:

Now, open your login.aspx file to view the HTML ... I immediately replaced the generated HTML with the jQuery Mobile page template ... and added the following in the header:

	<!-- start header -->
	<div data-role="header">
		<h1>Login</h1>
		<a href="/" class="ui-btn-right">Cancel</a>
	</div>
	<!-- end header -->

You'll notice that I added a "Cancel" button.  This button will be placed inside the "header section" ... you'll also notice that I added a class to this cancel button "ui-btn-right" ... this CSS class tells the jQuery Mobile framework to 'float the button to the right side' ... as opposed to defaulting it on the left side.  Why did I put it on the right side?  Because it's more UI friendly.

Next, you have to add the form elements to allow a user to login, in this case ... I'll be adding a textbox for the email address, a textbox for a password, and a button. So, your content section will look like this:

	<!-- start content -->
	<div data-role="content" data-inset="true">	
	
        <form action="/FormActions/login.ashx" method="POST">
            <fieldset>
            
            <asp:Literal runat="server" ID="litMessage"></asp:Literal>

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

                <input id="Submit1" type="submit" value="Login" data-role="button" data-inline="true" data-theme="b" />

            <hr />
            Don't have a login? <a href="register.aspx">Sign Up</a>
            </fieldset>
        </form>
        
	</div>
	<!-- end content -->

And in the codebehind, I added this (as an example) to handle errors:

protected void Page_Load(object sender, EventArgs e)
        {
            if(!String.IsNullOrEmpty(Request.QueryString["msg"]))
            {
                litMessage.Text = "Email or password is incorrect.  Try again.";
            }
        }

When you run the application, then click the login button on your default page, you'll see:

So, you fill out the form, click login ... the from will be POST'ed to the login.ashx file ... in the ashx file, you will add your login code.

There you go, a quick and dirty way to create a login form for jQuery Mobile and ASP.NET.