ASP.Net MVC mobile development

When developing mobile projects, there are some architectural options we need to think about. There are basically three approaches.

1) Do not do anything and let mobile browser to render the contents. The application surely will not look good on many mobile device.
2) Handle mobile device on client. Use CSS 3 media queries or progressive-enhancement JavaScript to render the contents.
3) Handle mobile device on server. The ASP.Net MVC framework splits the presentation from model and controller. The focus will be on hadling the view for mobile device.

Browser and device detection

The mobile browser and device detection is important so the rendering engine can render the contents correctly. It is good to know the manufacturer and model number of that device, but it is even better to know the characteristics of the device. The ASP.NET has built-in browser detection support for mobile device in Request.Browser object. For example,

Request.Browser.IsMobileDevice
Request.Browser.MobileDeviceManufacturer, Request.Browser.MobileDeviceModel
Request.Browser.ScreenPixelsWidth
Request.Browser.SupportsXmlHttp

CSS Media Queries

CSS media queries are an extension to CSS for media types. A common use is to define the maximum screen size for mobile browsers. If the browser window is 850 pixels wide or less, you can create CSS rules inside this media block.

@media only screen and (max-width: 850px) {

Viewport Meta Tag

Most mobile browsers define a viewport that is larger than the actual width of the mobile device. This allows mobile browsers to render web page inside the virtual display and allow users to zoom into the content. If you set the viewport width to the actual device width, there will be no zooming. The following shows the viewport example in the ASP.NET MVC 4 layout file.

<meta name=”viewport” content=”width=device-width”>

Layouts and Views

ASP.NET MVC 4 has very good support to render any view for mobile browsers. To create a mobile view, just add .Mobile to the file name. For example, to create a mobile Index view, just copy Index.cshtml and rename it to Index.Mobile.cshtml.

Views\Home\Index.cshtml Views\Home\Index.Mobile.cshtml
Views\Shared\_Layout.cshtml to Views\Shared\_Layout.Mobile.cshtml

Browser-Specific Views

You can also create views for an individual browser. For example, create views for the iPhone browser. In Global.asax file, add the following code to the Application_Start method.

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode(“iPhone”)
{
ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
(“iPhone”, StringComparison.OrdinalIgnoreCase) >= 0)
});

And also create the followinbg view files.

Views\Shared\_Layout.iPhone.cshtml
Views\Home\AllTags.iPhone.cshtml

jQuery Mobile

The jQuery Mobile library provides a user interface framework for the major mobile browsers that support CSS and JavaScript. The JavaScript and CSS files in jQuery Mobile render pages nicely to fit mobile browsers. To get started, you need to install jQuery.Mobile.MVC NuGet package. The package will install the following:

jQuery Mobile JavaScript and CSS files.
Controller widget (Controllers\ViewSwitcherController.cs).
Layout file (Views\Shared\_Layout.Mobile.cshtml).
Partial view (MvcMobile\Views\Shared\_ViewSwitcher.cshtml).

The jQuery Mobile framework uses HTML5 “data-” attributes to allow for markup-based initialization and configuration of widgets. For example, we have following markup in _Layout.Mobile.cshtml file.

<div data-role=”page” data-theme=”a”>
@Html.Partial(“_ViewSwitcher”)
<div data-role=”header” align=”center”>
@Html.ActionLink(“Home”, “Index”, “Home”)
@Html.ActionLink(“Date”, “AllDates”)
@Html.ActionLink(“Speaker”, “AllSpeakers”)
@Html.ActionLink(“Tag”, “AllTags”)
</div>
<div data-role=”header”>
<h1>@ViewBag.Title</h1>
</div>

.NET Project Training Provider in Vadodara