Creating separate views to target mobile devices in MS MVC

This is a small how-to on creating separate view files to target mobile phones in your MS MVC websites. By the end of the article, I will have shown how to create new directories within your view folders which target various mobile devices. The views make use of the same controller files to deliver content to specific devices.

The Mobile Device Browser File

First up, I am going to add the Mobile Device Browser file to my project:

Project Description
The Mobile Browser Definition File contains definitions for individual mobile devices and browsers. At run time, ASP.NET uses the information in the request header to determine what type of device/browser has made the request.

This open source file takes care of doing the work of figuring out what kind of device is accessing the website. It allows you to target many different mobile devices, and takes out a lot of the hard work of for targeting specific devices.

To add the Mobile Device Browser File to your project, right click on your website project file in VS, and

Add > Add ASP.NET Folder > App_Browsers

Create another folder insider App_Browsers called devices

Drop the mobile.browser file from the Mobile Device Browser File Download in the newly created devices directory.

Using this file I can target the devices I want to support without having to know the specifics of what those devices send in their headers. I can just use the Request.Browser property to tailor which view I want to return.

Now I am going to put together the directory structure I will be using to target different devices. I have decided to use the following directory structure within my views section:

· Home

· Mobile

o iPhone

§ Index.aspx

o BlackBerry

§ Index.aspx

o Index.aspx

· Index.aspx

Basically, a standard request from a desktop computer will be served up the Home > index.aspx file. A request from an iPhone will be served up Home > Mobile > iPhone > Index.aspx.

A mobile device which does not have a specific directory in the mobile directory will be served the Home > Mobile > index.aspx view.

The Custom View Engine

Next up we are going to create a Custom View Engine, to override the standard MVC view Engine.

Our custom view engine will take care of routing request from mobile devices to the correct views.

Public Class CustomViewEngine

Inherits WebFormViewEngine

Public Overloads Overrides Function FindView(ByVal controllerContext As ControllerContext, ByVal viewName As String, ByVal masterName As String, ByVal useCache As Boolean) As ViewEngineResult

' Logic for finding views in your project using your strategy for organizing your views under the Views folder.

Dim result As ViewEngineResult = Nothing

Dim request = controllerContext.HttpContext.Request

' iPhone Detection

If request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) > 0 Then

result = MyBase.FindView(controllerContext, "Mobile/iPhone/" & viewName, masterName, useCache)

End If

' Blackberry Detection

If request.UserAgent.IndexOf("BlackBerry", StringComparison.OrdinalIgnoreCase) > 0 Then

result = MyBase.FindView(controllerContext, "Mobile/BlackBerry/" & viewName, masterName, useCache)

End If

' Default Mobile

If request.Browser.IsMobileDevice Then

result = MyBase.FindView(controllerContext, "Mobile/" & viewName, masterName, useCache)

End If

' Desktop

If result Is Nothing OrElse result.View Is Nothing Then

result = MyBase.FindView(controllerContext, viewName, masterName, useCache)

End If

Return result

End Function

End Class

Applying the Custom ViewEngine

Now that I have my Mobile View folders and mobile views created, and have implemented a Custom ViewEngine, I can go ahead and apply the custom view engine.

To do this we’ll need to clear any existing ViewEngines and add a new instance of the ‘CustomViewEngine”. This needs to be done within the Application_Start method in the Global.asax.

' Replace the Default WebFormViewEngine with CustomViewEngine

System.Web.Mvc.ViewEngines.Engines.Clear()

System.Web.Mvc.ViewEngines.Engines.Add(New CustomViewEngine())

And we're done!

That's everything you need to do... Hit the site with your mobile phone, and IIS will serve up your customised mobile views. Got to love the MS MVC Framework!

This post was inspired by a stackoverflow answer given by Dale Ragan. Cheers Dale!

Draggable scrolling list with jQuery

DraggableList is a jquery plugin for making a list or other html element scroll within a draggable container.

Check out a demo here

Simply point the pluggin at an unordered list (or other element), specify a containment size and the list will become draggable. Drag the list up and down to scroll its contents.

Example Usage

<style type="text/css">
   body{ font-family:Georgia;}
   .myList {list-style:none; margin:0px; padding:0px;}
   .myList li{ height:50px; border-bottom:solid 1px #dedede; margin:0px; padding:0px 2px 0 2px;}
   .draggableList{ border:solid 1px black;}
</style>

<script type="text/javascript">
$(document).ready(function() {
$('.myList').draggableList({height:150, listPosition:0});
});
</script>

<ul class="myList">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>

Options

The plugin has a bunch of options with default values as follows:

        cursor: 'n-resize',
    height: '150',
    width: '100',
    listPosition: '0',
    panelCssClass:'draggableList'

cursor

CSS cursor style on hovering over the list

height

Numeric-value - pixels The height of the element which will hold the list (it's overflow will be set to hidden)

width

Numeric-value - pixels The width of the element which will hold the list

listPosition

Value between 0 and 100 : Where abouts the list will be positioned relative to it's container. When 0, the list will appear scrolled right to the top, so the first element will be at the top of the container. When set to 100 the list will be scrolled right to the bottom

panelCssClass

Name of the css class that is added to the container item. Used to style the container.

Dependancies

DraggableList dependancies on:

• jQuery
• ui.core
• ui.draggable

Source

Head across to http://code.google.com/p/draggablelist/ and grab the plugin now.

And if anyone uses the list on one of their projects, I'd love to hear about it and get feedback on how it could be improved...