Holi Sale. Get upto 40% OFF on Job-oriented Training! Offer Ending in
D
H
M
S
Get Now
Browse Tutorials

02 Intermediate

Changing browser URL with jQuery mobile and Asp.Net MVC

Changing browser URL with jQuery mobile and Asp.Net MVC

05 Mar 2024
Intermediate
146K Views
1 min read

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.

Share Article
About Author
Shailendra Chauhan (Microsoft MVP, Founder & CEO at Scholarhat by DotNetTricks)

Shailendra Chauhan is the Founder and CEO at ScholarHat by DotNetTricks which is a brand when it comes to e-Learning. He provides training and consultation over an array of technologies like Cloud, .NET, Angular, React, Node, Microservices, Containers and Mobile Apps development. He has been awarded Microsoft MVP 8th time in a row (2016-2023). He has changed many lives with his writings and unique training programs. He has a number of most sought-after books to his name which has helped job aspirants in cracking tough interviews with ease.
Accept cookies & close this