Loading ...

jQuery Mobile Login Dialog Box | CodeAsp.Net

jQuery Mobile Login Dialog Box

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

Comments (13)

   
Nick Hartley
Nick Hartley
This is tremendous - please keep them coming!
11/18/2010
 · 
by
   
njhartley
This is tremendous - keep the Jquery Mobile tips coming.  Thanks.
11/18/2010
 · 
by
   
teisenhauer
Thanks Nick!
4/23/2012
 · 
by
   
cian
cian
Hey,Thanks for sharing, just wondering why you use a handler to do the login processing rather than using the loging page itself? Is it purely for seperation of concerns or am I missing something.We do a lot of mobile sites and have had trouble in the past when a form redirects to another page to do the processing, some older handsets view this as a security breach.Cheers, Cian
11/25/2010
 · 
by
   
teisenhauer
Using a handler for this is just one way of doing it.  We like to use these since there are many instances where we are calling these handlers using jquery or some other type of javascript.
4/23/2012
 · 
by
   
Rania
Rania
Hi, I made two JSP pages one for login and the second contains entry fields. can I use the same JQuery with my JSPs?ThanksRania
12/17/2010
 · 
by
   
teisenhauer
I'm no JSP programmer, though if it's a server-side language then, YES!  .... ASPX, JSP, PHP ... they're all essentially rendering out an HTML page ... without the .htm or .html extensions.  Its basically all the same stuff.
4/23/2012
 · 
by
   
JD
JD
Hi there,I have followed all your instructions but didn't manage to get the screen UI that you said..<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="FullMobile._Default" %>
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link href="/assets/scripts/jquery.mobile-1.0a2/jquery.mobile-1.0a2.min.css" rel="stylesheet" type="text/css" />
    <script src="/assets/scripts/jquery/jquery-1.4.4/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="/assets/scripts/jquery.mobile-1.0a2/jquery.mobile-1.0a2.min.js" type="text/javascript"></script>
    </head>

<body>

<!-- start page -->
<div data-role="page">

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

<!-- start footer -->
<div data-role="footer">
   <h4>Page Footer</h4>
</div>
<!-- end footer -->

</div>
<!-- end page -->

</body>
</html> 
12/26/2010
 · 
by
   
teisenhauer
yea, your are going to have make sure all your link and script URL paths actually lead to the files!
4/23/2012
 · 
by
   
user908311
Hi,thanks for the post.  Any ideas why Login.ashx gets appended to the url instead of showing the url of the redirected page?i.e. instead of getting http://localhost:51690/Default.aspx i'm getting http://localhost:51690/Login.aspx#Login.aspx?thanksMatt
1/19/2011
 · 
by
   
Nanass
Nanass
J'ai le meme probleme. Est-ce que vous avez trouver la solution ???? merci
3/24/2012
 · 
by
   
teisenhauer
Sorry, don't know french!!
4/23/2012
 · 
by
   
teisenhauer
Matt, that's how jquery does it.  Play with your complete URL paths to get it to work.
4/23/2012
 · 
by
   
rafael
rafael
have you had success with displaying  content from the server via a dialog? I have a form in a dialog and I want the message (returning from the server, after filling out the form) to display in a dialog box as well. do you know how this can be done?
3/9/2011
 · 
by
   
teisenhauer
You're going to be looking at doing some AJAX for this, sir.
4/23/2012
 · 
by
   
Tudor Hoinaru
Tudor Hoinaru
Hi, i had the same issue regarding the UI. My solution was to actually use the CDN hosted scripts from jQuery Mobile website (See section Download). Hope it helps!
5/9/2011
 · 
by
   
Naveen
Naveen
HI,can we  really use aspx pages on mobile using jquery mobile...currently i am developing pages using html and jquery mobile....
5/20/2011
 · 
by
   
teisenhauer
Yes, you can use aspx pages in jquery mobile.
4/23/2012
 · 
by
   
Agmino Web Solutions
Exactly what I needed, thanks!!!
12/24/2011
 · 
by
   
teisenhauer
Thanks Agmino!
4/23/2012
 · 
by
   
Rob
Rob
we are using jquery ajax post to a webmethod with the return from the server in a success flag.  It works perfectly on jquerymobile.  

Hope this helps.

From the page...

Sample to get you going:

$('._login'.click(function () {    
            usr = $('.username'.val();
            pwd = $('.password'.val();
            
            var jsonText = JSON.stringify({ username: usr, password: pwd });              
            $.ajax({
                type: "POST",
                url: "Default.aspx/AuthenticateUser",
                data: jsonText,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {                                        
                        if (msg.d == "0" {
                            //failed
                            $('.login_dialog'.dialog('close';
                        } else {
                            //success
                            $('.login_dialog'.dialog('close';
}
}):

And in the code behind:

<WebMethod()> Public Shared Function AuthenticateUser(ByVal username As String, ByVal password As String) As String
        Dim result As String = "0"
        If Membership.ValidateUser(username, password) Then
            FormsAuthentication.SetAuthCookie(username, False)
If HttpContext.Current.User.IsInRole("Sales" Then result = "1"
End If
Return result
End Function
5/28/2012
 · 
by
   
developerscode
Thankyou soooooooo much
6/7/2012
 · 
by
   
nanthakumar t
nanthakumar t
great sample! Exactly what I needed
thank you so much.
please keep more post like tat
7/10/2012
 · 
by
  • :*
  • :*
  • :
 *

Top Posts