Easy Way to Implement Mobile Site in ASP.NET

• Download sample website (VB) - 59 KB

Introduction

The most common way of accessing the web today has turned out to be mobile devices. Carrying the web along with us everywhere we go, it's easy to access internet features like mails, e-commerce, entertainment and others. This means websites should be fully optimised to allow users accessing via mobile to have pleasure and comfort surfing through them.

Mobile websites are very technical since they will be viewed from numerous types of devices.

This tip entails how to easily implement a mobile site functionality to your existing or new websites/apps. Going straight to the point without much to handle. I had to put this up when I created a large web application which sometimes will be viewed from mobile, seeing that the pages are too large to view on mobile. I have implemented this technique in different websites which actually works fine for me.

Background

Good knowledge of CSS is needed to implement this, a good command of ASP.NET as well. I use VB for my codes.

To use your desktop browser as a mobile browser, you will need an Extension, like in Mozilla Firefox, I am making use of User Agent Switcher. The browser will be seen as mobile depending on the option you've selected. You can download it by searching for "User Agent Switcher" in Mozilla Extensions and Plugins page.

Using the Code

First, in my website, I have to create two (2) masterpages and two (2) CSS files which will work hand-in-hand to serve all the pages in the website. This will eliminate the stress of building another website from scratch just for mobile.

Step 1

How do we implement this faster?

1. Create a masterpage for the desktop view as Master_pc.master.
2. Make sure you are done creating the masterpage, then duplicate the master_pc and rename to Master_mobile.master .
3. Rename the class of the mobile masterpage in code-behind to Master_mobile.
4. Change the inherit value in the HTML section of the page to Master_mobile.
5. Duplicate the Style_pc.css file and rename to Style_mobile.css.

Step 2 (Manipulating the CSS Files)

This is where the main work lies, because we need it to do the transformation in appearance needed by the pages. The website is having two CSS files with same classes/ids, this consistency is done so that when we switch masterpages and CSS, it will still apply in the pages that have used them.

The values of the elements are changed to fit a mobile device while the unwanted ones or the one that can't be displayed by a mobile browser will be removed.

Step 3

Now, we create a class file MainClass.vb which has two (2) public methods and a variable. The SwitchToMobileSite method allows the user to select a view type when the website pages comes up while the MobileSiteDefault is used to set the website pages to mobile by default.

Cookies are used to save the user site preference to the browser, the value will be used until the session expires. The value of the cookie will be Desktop Site or Mobile Site.

How Do We Detect the Device Type?

We can do this by using the request class which contains various methods. From a web page code-behind, we can just use Request.Browser.IsMobileDevice, in a class file we have to call it from the HttpContext class as HttpContext.Current.Request.Browser.IsMobileDevice which is a boolean property of the browser.

Imports Microsoft.VisualBasic

Public Class MainClass

    Public Shared SiteType As String

    Public Shared Sub SwitchToMobileSite(ByVal CurrentPage As Page)
        If SiteType = "Mobile Site" Then
            'If HttpContext.Current.Request.Browser.IsMobileDevice Then
            'Swap MasterPage to Mobile
            CurrentPage.MasterPageFile = "~/Master_mobile.master"
            'End If
        End If
    End Sub

    Public Shared Sub MobileSiteDefault(ByVal CurrentPage As Page)
        If HttpContext.Current.Request.Browser.IsMobileDevice Then
            'Swap MasterPage to Mobile
            CurrentPage.MasterPageFile = "~/Master_mobile.master"
        End If
    End Sub
End Class

Step 4

Master_pc.master (HTML section)

<link href="Styles/Site_pc.css" rel="stylesheet" type="text/css" />

vb code-behind

Partial Class Master_pc
    Inherits System.Web.UI.MasterPage

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Try
            'Create SiteType Cookie on first load event
            If IsNothing(Response.Cookies("SiteType").Value) Then
                Response.Cookies("SiteType").Value = "Desktop Site"
                SiteType = Response.Cookies("SiteType").Value
            End If
        Catch ex As Exception

        End Try
    End Sub

    Protected Sub lnkMobileSite_Click(ByVal sender As Object, ByVal e As System.EventArgs) _
        Handles btnMobileSite.Click
        Try
            If SiteType = "Desktop Site" Then
                Response.Cookies("SiteType").Value = "Mobile Site"
                SiteType = "Mobile Site"

                'Refresh site immediately
                Response.Redirect(Request.Url.ToString)
            End If
        Catch ex As Exception

        End Try
    End Sub
End Class 

On click of the MOBILE SITE LinkButton at the top right corner of the page, the SwitchToMobileSite(Me) method will be executed. The method will be executed in the Page_PreInit Event because a page masterpage can only be set dynamically from the PreInit.

Page code-behind (VB)

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit
        SwitchToMobileSite(Me)
    End Sub
End Class

Step 5

Master_mobile.master (HTML section)

This time around in the mobile masterpage, the CSS file will be changed to Style_mobile.css.

<link href="Styles/Site_mobile.css" rel="stylesheet" 
type="text/css" media="all" />

Step 6

web.config

The class is being referenced as a namespace so it can be easily used in all pages.

<configuration>
  <system.web>
    <compilation debug="true" strict="false" 
    explicit="true" targetFramework="4.0"/>

    <pages maintainScrollPositionOnPostBack="false">
      <namespaces autoImportVBNamespace="true">
        <add namespace="MainClass" />
      </namespaces>
    </pages>
    </system.web>
</configuration>

Point of Interest

The pattern used in accomplishing this task can be implemented easily without stress. Feel free to explore, modify and implement the code.