ASP.NET FriendlyUrls ViewSwitcher and jQuery Mobile
Sometime ago, September of 2012, Scott Hanselman blogged about a cool new library written for ASP.NET WebForms called ASP.NET Friendly URLs. The ASP.NET Friendly URLs library makes it easy to enable extensionless URLs for file-based handlers (e.g. ASPX, ASHX) in ASP.NET applications. The library itself is very cool. In a nutshell, you, with two lines of code, can have extensionless URLs in ASP.NET web forms and have different pages served up for mobile devices. Scott Hanselman’s blog post covers all of the details on features and implementation. I wanted to show you a problem that I had with using the library, namely the ViewSwitcher control, with jQuery Mobile.
I followed the thorough instructions on Scott Hanselman’s blog post about how to enable or create the mobile version of the site. Essentially you have to create a _
Site.Master and Site.Mobile.Master
1
2
3
<%@ Register Src="~/ViewSwitcher.ascx" TagPrefix="friendlyUrls" TagName="ViewSwitcher>
<!– Add this where you want the control displayed –/>
<friendlyUrls:ViewSwitcher ID="ViewSwitcher1" runat="server" />
Once these two lines of markup are on your Master Page, the FriendlyUrls library will generate a block of HTML enabling the user to switch views, if the page has an alternate view.
This works great out of the box if you are not using jQuery Mobile and the reason for it is not the FriendlyUrls library but the way jQuery Mobile tries to load pages via Ajax. If you run your application “out of the box” while on a jQuery Mobile based view, and try to switch to Desktop view you will get redirected to http://domainname/__FriendlyUrls_SwitchView?ReturnUrl=/, or something similar. This is because the FriendlyUrl libraries changes the view using a cookie and the jQuery Mobile framework only attempts to load the changes for the page (not the entire page) so there is a little trouble. No worries there is a quick fix. If you open up the ViewSwitcher.ascx control and add the following attribute to the anchor tag
1
data-ajax="false"
This tells jQuery Mobile to not load that page with Ajax and load the entire page.
Ideally when the library hits the ASP.NET open source stack (its on its way), I or someone else will contribute this to the control to implement this small fix.
Share on
Twitter Facebook LinkedIn RedditLike what you read?
Please consider sponsoring this blog.
