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

JQueryUI – Showing New Menu Widget Horizontally

Showing JQuery menu Horizontally through CSS

I was trying the menu widget from JQuery UI. It looks good with lot of ability. But as usual i had to tweak it a little bit. You can check this at http://jqueryui.com/menu/#navigationmenu

Problem:

The menu on the demo site appears to be Vertical aligned – it grows vertically, and i would like it to be horizontal.

Like

Menu 1 – Menu 2 – Menu 3

Instead of

Menu 1

Menu 2

Menu 3

Solution:

So, for doing with minimal changes here is what you need to do, just define following css classes:

#menu li { display:inline-block; width: auto; }

#menu li.sub { display:block; width: auto;}

Where menu is the ul element for menu, and li (the sub menus, the second level) are marked with “sub” class. Here is the HTML markup for the reference.

display:inline-block; will render the li as inline – so they will appear in the same line side by side.

for Sub menu under each li you need to set them as “block”, so they appear vertically.

<ul id=”menu“>

<li><a href=”?Aberdeen”>Admin</a></li>

<li>

<a href=”?Ada”>Themes</a>

<ul>

<li class=”sub”><a href=”?Ada”>Default</a></li>

<li class=”sub”><a href=”?Saarland”>Test 2</a></li>

<li class=”sub”><a href=”?Salzburg”>Test 3</a></li>

</ul>

</li>

<li><a href=”?Adamsville”>Support</a></li>

<li><a href=”?Addyston”>Release Notes</a></li>

<li><a href=”?Addyston”>My Details</a></li>

</ul>

Hopefully, it will help people out.

UPDATED: http://jsbin.com/afepiz/31/edit (JSBIN)

Enjoy,

Thanks,

Riz

Updating JQuery 1.4+ (or older) to 1.7+ (“attr” replacement)

We were trying to update the Jquery from 1.4 to 1.7 to get new functions in and also to get better working with JQuery UI and with jqGrid.

Suddenly we hit a ROAD BLOCK! the Jquery decided to change the behaviour of method to soemthign different. We used attr function extensively in our app, so replacing it in 3000 location and than verifying it would mean lot of typos and QA effort. They changed it to prop !

So we just simply wrote and override to attr! and extended jQuery…

jQuery.fn.attr = function(a, b) {
if (a == null && a == undefined
&& b == null && b == undefined) {
return ;
}
if (a != null && b != null)
return $(this).prop(a, b);
if (a != null && (b == null || typeof (b) == “undefined”))
return $(this).prop(a);
}

copy this into your code and enjoy beauty of it…