Web

Make ASP.NET Web Forms Feel Native with KendoUI Mobile

by Jeff Fritz on September 03, 2014


In 1965, a patent was filed for a synthetic grass product that would go on to be implemented in the world’s first indoor baseball stadium. The following year, the Houston Astrodome opened and was instantly famous for its green carpet that simulated grass. The thing is that real grass is expensive to add and even more expensive to maintain, a problem astroturf solves.

In the world of web development, native apps can be similarly expensive to build and maintain, as can re-engineering a desktop site to work on mobile. Thankfully, like Astroturf, we have tools that can make a website look and feel like a native app on a mobile device but also minimize the difficulty and cost of building and maintaining. KendoUI Mobile is one such tool.

I have a number of websites out there that were designed and built in ASP.NET with the desktop browser in mind. They’ve been running for some time, and they just don’t look and feel right on a phone. Any way you cut it, no matter the amount of zooming, pinching, or squinting, its a painful user experience.

In this article, I’m going to show you a sample ASP.NET Web Forms application and how quickly we can add capabilities for native mobile rendering with KendoUI Mobile capabilities.

Two options – Adaptive Rendering and Alternative Rendering

When building and thinking about web sites on mobile, we have two general approaches we can take in developing our user interface:

  1. Adaptive Rendering is an approach that builds an interface that will stretch, shrink, and shift content appropriately for any sized browser.
  2. Alternative Rendering is an approach that provides a new user interface specific to the needs of specific browsers, or even entire classes of browsers.

Of course, there is a third option: do nothing and expect the mobile browsers to just get better at handling desktop sized content. This might be a good option for you, as we are finding that phones are getting larger and larger screen sizes:

Smartphone[2]

Huge phones

The Nokia Lumia 1520 and Samsung Galaxy Note barely fit in my pants pockets, and you won’t find me carry a man-purse for one of these giant phones. My old websites look just fine on these giant phones, but I don’t want to rely on my customers buying a phablet just so they can access my applications.

In our case, we will be writing an alternative rendering for a sample web site that provides a native-like experience to mobile browsers for their specific type of device.

Transition to a new Render Mode

The key ASP.NET feature that will allow me to bridge from the markup intended for Desktop browsers to one intended for Mobile browsers is called FriendlyUrls. With this feature, ASP.NET will help make URLs requested of our server look more SEO-friendly. It will automatically take a URL like this:

http://www.mywebsite.com/Products/Edit.aspx?id=2&Name=Chess

…and reformat it to look something a bit more friendly like this:

http://www.mywebsite.com/Products/Edit/2/Chess

That’s a lot easier for humans to read, and with the help of the FriendlyUrls NuGet package, easy for ASP.NET to understand.

To assist the Get method on the Edit page in fetching the appropriate value from the path, we simply add aFriendlyUrlSegments hint to the arguments.

public Models.BoardGame myForm_GetItem([FriendlyUrlSegments(0)]int? id)

Note that I use a nullable integer for this input parameter. That allows me to add an error check scenario in my method to verify that an appropriate (if any) id was submitted to this page. I can then redirect to a “Product Not Found” page or handle it in some other graceful manner that makes my customers happy.

The real feature of FriendlyUrls that I want to show you is the mobile device detection and re-routing. This means that the ASP.NET router will detect that a mobile device is requesting a page and search for a .mobile.aspx page with the same base-name. For that request to that device, it will serve the content of this alternate page, and not the content of the .aspx to the requester.

Since ASP.NET 4.0 we have had routing in all segments of ASP.NET, including web forms. With this routing feature enabled in RouteConfig.cs as follows, we can take advantage of adding alternate renderings for our pages:

public static void RegisterRoutes(RouteCollection routes)
{
    routes.EnableFriendlyUrls();
}

Now we can start to add mobile-friendly renderings into our web application without modifying our existing ASPX pages. In effect, we can add this secondary rendermode risk-free… developing a mobile version of the application next to our existing pages without disturbing them.

 

Summary

It’s easy to modify an existing ASP.NET project to start adding mobile capabilities to it. If you want your application to act native, to feel native to the mobile users browsing it, give KendoUI Mobile a shot. It’s available as part of KendoUI Core’s Open Source package and you can add references to the Telerik CDN to start using it now. Learn more about how I wrote this and download the source code for this article now: https://github.com/csharpfritz/KendoMobile.

 


Jeff Fritz

Microsoft MVP in ASP.Net and Developer Advocate for Telerik

Jeffrey T. Fritz is a Microsoft MVP in ASP.Net, an ASP Insider and Developer Advocate for Telerik with more than a decade of experience writing and delivering large scale multi-tenant web applications. After building applications with ASP, ASP.NET and now ASP.NET MVC, he is crazy about building web sites for all sizes on any device. You can read more from Jeffrey on his personal blog or on Twitter at @csharpfritz.

More from Jeff Fritz
All articles

Follow us