Creating iOS and mobile friendly ASP.NET MVC web applications using DevExpress DXperience 12.1

How to make iOS friendly ASP.NET MVC web pages.

Introduction

DevExpress is one of the biggest and well-known companies for delivering tools and components for .NET developers. They have been in the business for almost 15 years and have a proven record of delivering solid solutions for developers. In this post I will be looking at the latest DevExpress ASP.NET components and in particular the new iOS theme for their components that was introduced in the 12.1 release.

What’s installed

When you install the ASP.NET controls, a series of Visual Studio templates are added to your New Project dialog:

Amongst them are a standard Web Application, an Empty Web Application, a Table Web Application and last an Outlook Inspired Web Application. All of them in both classic ASP.NET Web Forms and ASP.NET MVC flavors.

iOS theme

In this review I will be focusing on the brand new iOS theme that’s just added to the latest version. In the DXperience 12.1 package, you’ll get a set of predefined themes that allows you to get your web applications a slick professional appearance from the get go. In addition to the iOS theme, you also get Default, Aqua, Black Glass, Dev Ex, Glass, Office2003Blue/Olive/Silver, Office2010 Black/Blue/Silver, Plastic Blue, Red Wine, Soft Orange and finally Youthful.

One thing you will notice is that all graphical user interface elements are much more enlarged and bigger than what you are used to, all intended to make the visual elements easier to use from a touch enabled device such as an iPhone/iPod/iPad as well as Android and Windows Phone mobile devices.

Device-dependent theme

Although the iOS Theme is great for mobile devices, it can be a bit of over spacious for a normal desktop client. One way to solve this problem is to only use the iOS Theme for mobile devices and switch to a more desktop centric theme for others. This can be accomplished by using the User Agent to detect mobile devices. Most, if not all mobile devices, presents a user agent string that contains the word Mobile in it. For example, an iPad would present something like:

Mozilla/5.0 (iPad; U; CPU OS 4_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F191 Safari/6533.18.5

A Windows Phone would typically use:

Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)

And finally a generic Android device running Chrome on Ice Cream Sandwich would have this User Agent string:

Mozilla/5.0 (Linux; Android 4.0.4; SGH-I777 Build/Task650 & Ktoonsez AOKP) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19

The one thing they all have in common is the string “mobile”, so that’s what we are going to check on.

In the global.asax.cs file, simply add code for handling the Application_PreRequestHandlerExecute method.

protected

void Application_PreRequestHandlerExecute(object sender, EventArgs e)
{
  if (Context.Request.UserAgent.ToLower().Contains(“mobile”))
  {
    DevExpressHelper.Theme = “iOS”;
  }
  else
  {
    DevExpressHelper.Theme = “Office2010Black”;
  }
}

Testing with an iPad device

Let’s first browse to our test page using a desktop browser.

A pretty standard looking desktop theme.

Let’s test with the iOS simulator and see if this works.

As you can see, we now have switch to a much more touch friendly theme for our mobile users, and desktop users will experience a more traditional theme.

Conclusion

Mobile devices are a big expanding market; more and more users are consuming content on their mobile phones and their tablets. It’s important that your public facing web sites are offering the best possible user experience. The new iOS theme from DevExpress will help you accomplish this by enabling your ASP.NET web applications delivering a much more touch-friendly experience.

You can download a free trial of the complete DevExpress DXv2 suite of tools from here.

Disclosure of Material Connection: I received one or more of the products or services mentioned above for free in the hope that I would mention it on my blog. Regardless, I only recommend products or services I use personally and believe my readers will enjoy. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

System.Security.SecurityException: Request for the permission of type ‘System.Web.AspNetHostingPermission, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089′ failed

This error can be caused by a variety of reasons. In my case I got it when I published my ASP.NET MVC 2 application to my local IIs instance in IIS 7.5 / Windows 7.

As it turns out, I needed to set the application pool account property “Load User profile” to true:

 

That did the trick.

How to determine setup version from within an ASP.NET page

I read on Stackoverflow that somebody needed the possibility to determine the MSI installer product version used when installing the ASP.NET application. My suggestion is to store the current MSI product version in the web.config file, and later read that from within the web application.

Here are the steps to do this.

Start Visual Studio 2008 and select File->New project.

Select the ASP.NET Web Application template and choose a new for your project. Click Ok.

Open the web.config file and add the following lines within the <appSettings> element:

<?xml version="1.0"?>
<configuration>
...
<appSettings>
<add key="SetupVersion" value="x.x" />
</appSettings>
....
</configuration>

Add a simple Label control in the Default.aspx file to show the version infomation.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CheckSetupVersion._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">



</form>
</body>
</html>

Add code in the Page_Load event to update the Label with the information from the web.config file.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
namespace CheckProdVersion
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
lblVersion.Text += ConfigurationSettings.AppSettings["SetupVersion"];
}
}
}

Add an Install Class to the project by right-clicking on the project in the Solution Explorer and select Add->New Item

Select the Installer Class  and choose a name. Click Add.

Right-click the InstallerHelper.cs file in the Solution Explorer and select  View Code. Add the following code:

using System;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.Configuration.Install;
using System.Xml;
using System.Globalization;
using System.Linq;
using System.IO;
namespace CheckProdVersion
{
[RunInstaller(true)]
public partial class InstallerHelper : Installer
{
public InstallerHelper()
{
InitializeComponent();
}
public override void Install(IDictionary stateSaver)
{
XmlDocument XMLDoc = new XmlDocument();
string XMLFile = string.Format(CultureInfo.InvariantCulture, @"{0}web.config", this.Context.Parameters["TargetDir"]);
XMLDoc.Load(XMLFile);
if (this.Context.Parameters["ProductVersion"] != null)
{
XmlNode Node = XMLDoc.SelectSingleNode("//configuration/appSettings/add[@key='SetupVersion']");
if (Node != null)
{
if (Node.Attributes["value"] != null)
{
Node.Attributes["value"].Value = this.Context.Parameters["ProductVersion"].ToString();
}
}
}
XMLDoc.Save(XMLFile);
base.Install(stateSaver);
}
}
}

Right-click the solution in Solution Explorer and select Add->New Project

From the Project Type, select Other Project Types->Setup and Deployment and choose the Setup Wizard template. Enter a name for the Setup Project and click Ok.

Click Next.

Select Create a Setup for a web application and click Next.

Select Content Files and Primary Output files. Click Finish

 

Click on the Web Application Folder and edit the Virtual Directory to set the name of your Web application. Right-click the Setup Project and select View->Custom Actions.

Right-click the Custom Actions node and select Add Custom Action.

Select the Web Application Folder and select Primary Output. Click Ok. 

Click on the Primary output from CheckProdVersion (Active) node and edit the property CustomActionData to contain this line:

/TargetDir="[TARGETDIR]" /ProductVersion="[ProductVersion]"

Build the solution. Right click on the Setup project and select Build.

Right-click on the Setup project and select Install. Follow the installation wizard and browse to your web application: http://localhost/CheckProdVersion

When you are updating the product version in the setup project, you will get this question:

Click Yes.

Set the Setup Project property RemovePreviousVersions to True, rebuild the Setup and re-install to verify that the version can be updated.

Using ASP.NET Development server with NOD32

So, you have installed Microsoft Visual Studio 2005/2008, created a Web Project using the ASP.NET Development server, hit F5 and you are greeted with this:

Internet Explorer cannot display the webpage.

This is NOD32’s fault.

Set the NOD32’s control panel to advanced mode.

Go to Setup->Antivirus and antispyware…

and click on Web Access protection->Configure…

Select "HTTP and POP3 ports" in the Protocol Filtering section.

Done!