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
- Create Empty Web Forms Project (VS 2012)
- From NuGet – Add Jquery
- Add Jquery UI (For normal site)
- Add JQuery Mobile (For Mobile Site)
- Add “Site.Master” Master page
- Add “Site.Mobile.Master” Page (To used as master page for mobile site)
- Add Default.aspx
- Add Default.mobi.aspx
- 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:
- How to do URL Rewrite?
- 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.
Rizwan Ahmed 
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!
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?