JQuery Mobile and Asp.net WebForms 4.5

Hi,

I was searching for some examples on the responsive web design and frameworks and i was impressed by JQuery mobile and it’s roadmap towards the future and it’s broad capabilities. You can view JQuery Mobile at http://view.jquerymobile.com/1.3.0/

So, in further searches – it was obvious that lesser people have tried it with web forms. I didn’t find any examples (may be there are.. but nothing good appeared on google search).

So here is a another to the point simple example:

Steps

  1. Create Empty Web Forms Project (VS 2012)
  2. From NuGet – Add Jquery
  3. Add Jquery UI (For normal site)
  4. Add JQuery Mobile (For Mobile Site)
  5. Add “Site.Master” Master page
  6. Add “Site.Mobile.Master” Page (To used as master page for mobile site)
  7. Add Default.aspx
  8. Add Default.mobi.aspx
  9. Add Global.asax

Main Idea

“Every .aspx page in normal page has its respective .mobi.aspx” It’s hybrid project and we will simple use asp.net url routing to map if the request comes from mobile site (only in case of .aspx) – All other things remain same.

So,

Here are questions:

  1. How to do URL Rewrite?
  2. How to setup jQuery Mobile?

1- How to do URL Rewrite?

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.SessionState;
using System.Web.Routing;
namespace Test.WebWithMobile
{
public class Global : System.Web.HttpApplication
{
        protected void Application_BeginRequest(object sender, EventArgs e)
        {
            if (Request.Browser.IsMobileDevice)
            {
                //Request.Url.MakeRelativeUri(new Uri(Request.Url.AbsoluteUri)).ToString() + Request.Url.AbsoluteUri.Replace(“.aspx”, “.mobi.aspx”)
                if ((!Request.Url.OriginalString.ToLower().Contains(“mobile”)
                    && Request.Url.OriginalString.ToLower().EndsWith(“.aspx”))
                    || Request.Url.OriginalString.IndexOf(“.aspx”) == -1)
                {
                    var url = Request.Url.OriginalString;
                    if (url.ToLower().IndexOf(“.aspx”) == -1)
                        url += “Default.aspx”;
                    url = url.Replace(“.aspx”, “.mobi.aspx”);                    
                    var path = Request.Url.MakeRelativeUri(new Uri(url));
                    HttpContext.Current.RewritePath(“~/” + path);
                }//Request.ApplicationPath);
            }
}
}

2- How to setup jQuery Mobile?

<head runat=”server”>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″ />
<title></title>
<link href=”Content/jquery.mobile-1.3.0.min.css” rel=”stylesheet” />
    <script src=”Scripts/jquery-1.9.1.min.js”></script>
    <script src=”Scripts/jquery.mobile-1.3.0.min.js”></script>
<asp:ContentPlaceHolder ID=”head” runat=”server”>
</asp:ContentPlaceHolder>

</head>
<body>
<form id=”form1″ runat=”server”>
<div data-role=”page”>
            <div data-role=”header”>Mobile Header</div>
            <div data-role=”content”>
<asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ runat=”server”>
</asp:ContentPlaceHolder>
</div>
        </div>
</form>
</body>

That’s It !!!

Surprised … but that’s it… This will get your going with query mobile and setting up web solution.

  1. Intro to JQuery Mobile
  2. Responsive Web Design
  3. PluralSight Training
  4. Download Source Code

JQM

2 thoughts on “JQuery Mobile and Asp.net WebForms 4.5

  1. I like the helpful info you provide in your articles.
    I’ll bookmark your weblog and check again here
    regularly. I’m quite sure I ill learn many
    new stuff right here! Best of luck for the next!

  2. Could I know what yoou do to draw new visitors to your site?
    Can you let me know how did you obtain a lot oof traffic? Could you also tell me,
    how diid youu brand your sitfe and how did you nsure
    visitors?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.