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
Posted On : 22 Nov 2013
Total Views : 130,923   
Updated On : 22 Nov 2013
 

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.



Free Interview Books
 
COMMENTS (0)
6 JUN
Hadoop Development cum Administration (Online)

7:00 AM-9:00AM IST

Know More
30 MAY
ASP.NET MVC with Angular4 Development (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)

Know More
30 MAY
ASP.NET MVC with Angular4 Development (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)

28 MAY
ASP.NET Core with Angular4 Development (Classroom)

10:30 AM-11:30 AM Weekend

27 MAY
ASP.NET MVC with Angular4 Development (Classroom)

4:00 PM-5:30 PM Weekend

20 MAY
Angular2 and Angular4 Development (Online)

08:00 AM-10:00 AM IST(+5.30 GMT) Weekend

20 MAY
NodeJS with Angular4 Development (Classroom)

5:00 PM-6:30 PM Weekend

8 MAY
ASP.NET MVC with Angular4 Development (Online)

07:00 AM-09:00 AM IST(+5:30 GMT) M/W/F

2 MAY
ASP.NET Core Development (Online)

07:00 AM - 09:00 AM IST( TUS, THR)

29 APR
ASP.NET MVC with Angular2 Development (Classroom)

9:30 AM-11:00 AM

22 APR
MEAN Stack 2 Development (Classroom)

11:00 AM-12:30 PM Weekend

10 APR
Master Class ASP.NET MVC 5 with Angular2 Plus Angular4 Development (Online)

09:00 PM - 11:00 PM IST (M/W/F)

BROWSE BY CATEGORY
 
 
LIKE US ON FACEBOOK
 
+