ASP.Net MVC4 Mobile Tutorial - Part 1

Summary

The ASP.NET MVC 4 Developer Preview introduces also new template for mobile web applications which use jQuery Mobile – a special jQuery library for building mobile user interfaces.

In this posting I will show you how to build a new mobile web application based on my real world experience of tracking the feeding activities of my 4 month old baby.

The Design

We have a 4 month old baby and wanted to keep track of his feeding sessions so we do not wake each other up, especially late at night and to also make sure that the baby was feeding regularly. I have an iPhone, my wife has a HTC phone and we also own a Kindle Fire and a Windows tablet (running Windows 8 Developer Preview), 2 laptops and a home server/multimedia system. I wanted to write an app for this, but it would be too difficult writing an maintaining an iPhone app, a Metro app and windows applications separately. That's why I decided to write a single web application leveraging the SQL Azure database.

Getting Started

You will need one of the following emulators to test the code:

• Windows Phone Emulator (RC)
• Opera Mobile Emulator
• Apple Safari with the user agent set to iPhone. Click here for instructions.
• FireFox with FireFox User Agent Switcher

Building the Solution

• Install ASP.Net MVC 4 from here
• Start Visual Studio 2010, choose new Project, then choose Web and select the "ASP.Net MVC 4 Web Application"
• 
• In the project template box, choose "Mobile Application", leave the View engine as Razor and leave the checkbox for HTML5 semantic markup
• 
• You will get a default mobile app with forms authentication ready to go

The Database

We will need to create a database and the schema for this demo next.

• On your local instance, create a SQL Server 2008 R2 (SQL 2005+ will do) database and call it BabyLog
• We need two tables in the database for our application, one to hold records for feeding logs and the other for diaper changes. Run the following SQL to create those

• CREATE TABLE [dbo].[FeedingLog](
      [ID] [uniqueidentifier] NOT NULL CONSTRAINT [DF_Log_ID]  DEFAULT (newid()),
      [UserID] [varchar](255) NOT NULL,
      [FeedType] [varchar](255) NOT NULL,
      [FeedAmount] [decimal](18, 1) NOT NULL,
      [DateCreated] [datetime] NOT NULL,
   CONSTRAINT [PK_Log] PRIMARY KEY CLUSTERED 
  (
      [ID] ASC
  )WITH (STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF)
  )
  GO

• CREATE TABLE [dbo].[DiaperLog](
      [ID] [uniqueidentifier] NOT NULL CONSTRAINT [DF_DiaperLog_ID]  DEFAULT (newid()),
      [UserID] [varchar](255) NOT NULL,
      [DiaperType] [varchar](255) NOT NULL,
      [DateCreated] [datetime] NOT NULL,
   CONSTRAINT [PK_DiaperLog] PRIMARY KEY CLUSTERED 
  (
      [ID] ASC
  )WITH (STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF)
  )
  GO

• Next we need to create tables to support Forms authentication. Open the Visual Studio command prompt and type: aspnet_regsql
• 
• Click next, select "Configure SQL Server for application services", provider the server name, credentials and the database name and click next.
• Once the wizard finishes, you will see your database tables
• 

The Database Model

Next we will create the Entity Model for our database as well as the WCF uses that our website will use to enter data into the database.

• In the ASP.Net MVC project, right-click on the Models folder and select "Add New Item"
• Select the Data template and choose "ADO.Net Entity Data Model
• 
• Select "Generate from Database", then click Next
• Supply the connection details for your database and name your connection string
• Select the FeedingLog and DiaperLog tables and leave the Model namespace as BabyLogModel
• 
• You should now have a model with the required tables
• 

We will look at the service layer in the next post.

Keywords: ASP.Net MVC Mobile jQuery Azure