Please enable Javascript to correctly display the contents on Dot Net Tricks!

Changing browser URL with jQuery mobile and Asp.Net MVC

  Author : Shailendra Chauhan
Updated On : 22 Nov 2013
Total Views : 129,435   
Support : MVC5, MVC4, MVC3
 

Like Asp.Net MVC, jQuery mobile based MVC5 or MVC4 application does not update the browser URL with the current controller or action or id. Since jQuery mobile treats each request as an AJAX request. Hence when you navigate to new page or redirect to new action or page, then the browser URL would be same for all the navigation and redirection.

How to do it..

I did some work around it and found the better solution for changing browser URL with jQuery mobile and Asp.Net MVC. jQuery mobile has data-theme attribute which you need to specify in your DIV having attribute data-role="page"

Make a new MVC Helpers for specifying the data-theme attribute and register it in your web.config of Views folder of your Asp.Net MVC application.

Making Custom Asp.Net Helper

namespace jQueryMobileSite.CustomHelpers
{
public static class CustomHtmlHelper 
{
 public static IHtmlString GetPageUrl(this HtmlHelper htmlHelper, ViewContext viewContext)
 {
 StringBuilder urlBuilder = new StringBuilder();
 urlBuilder.Append("data-url='");
 urlBuilder.Append(viewContext.HttpContext.Request.Url.GetComponents (UriComponents.PathAndQuery, UriFormat.UriEscaped));
 urlBuilder.Append("'");
 return htmlHelper.Raw(urlBuilder.ToString());
 }
}
}

Adding Custom Asp.Net Helper

<system.web.webPages.razor>
 ...
 <pages pageBaseType="System.Web.Mvc.WebViewPage">
 <namespaces>
 <!-- other code has been removed for clarity -->
 <add namespace="jQueryMobileSite.CustomHelpers"/>
 ...
 </namespaces>
 </pages>
</system.web.webPages.razor>

Using Custom Asp.Net Helper

Now you can use this custom helpers on your views's DIV having attribute data-role="page" . Since this DIV acts as a new page for the jQuery Mobile.

<div data-role="page" data-theme="d" @Html.GetPageUrl(ViewContext)>
@* TO DO: Your Code *@
</div>
What do you think?

I hope you will enjoy this tricks while developing your jQuery Mobile application. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.


YOU MIGHT LIKE
Free Interview Books
 
COMMENTS (0)
13 FEB
ASP.NET Core Development (online)

07:00 AM-09:00 AM IST( MON, WED, FRI)

Know More
25 JAN
Angular2 and Angular1 Development (online)

09:00 PM-10:30 PM IST(MON-FRI)

Know More
24 JAN
ASP.NET MVC with Angular2 Development (online)

07:00 AM-09:00 AM IST(Tuesday & Thursday)

Know More
20 JAN
NODEJS & MEAN Stack 2 Development (online)

09:00 PM-11:00 PM IST( MON, WED, FRI)

Know More
15 JAN
PPC Marketing (offline)

04:00 PM-05:300 PM

14 JAN
Xamarin Forms : Build Cross-platform Apps (offline)

05:00 PM-06:30 PM IST

10 JAN
ASP.NET MVC with AngularJS Development (online)

09:00 PM-11:00 PM IST on (TUE, THRU,SAT)

3 JAN
ASP.NET MVC with AngularJS Development (online)

07:00 AM-09:00 AM IST

31 DEC
ASP.NET MVC with AngularJS Development (offline)

09:30 AM-11:00 AM

31 DEC
Angular2 and Angular1 Development (offline)

11:00 AM-12:30 AM

26 NOV
ASP.NET MVC with AngularJS Development (offline)

03:00 PM-04:30 PM

5 NOV
ASP.NET MVC with AngularJS Development (offline)

08:00 AM-09:30 AM

4 SEP
MEAN Stack 2 Development (offline)

11:00 AM-12:30 PM.

BROWSE BY CATEGORY
 
RECENT ARTICLES
SUBSCRIBE TO LATEST NEWS
 
LIKE US ON FACEBOOK
 

Professional Speaks

+