Building Mobile MVC Apps in Minutes

I am happy to announce our new Mobile MVC Tools powered by Wijmo. We have shipped a new set of tools to help you rapidly develop Mobile Web Apps using MVC. Our tools include a ready-to-use Mobile Project Template and custom Mobile Scaffolding. Let's take a look at how easy it is to build an app with these new tools. We have recently made a Todo list using our MVC4 Tools, so let's build a mobile version of that!

File > New Project

After installing Studio for ASP.NET Wijmo, create a New Project in Visual Studio. Under Web, you will find ASP.NET MVC 4 Wijmo Mobile Application. Now, let's just run the app and see what it looks like out of the box. Notice that it is responsive and adapts to tablet or phone views.

Tablet View

Phone View

Add a Model

Next, let's build a little ToDo List App using the Mobile MVC Scaffolding. To do that, I add the following Model:

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Security;  
using System.ComponentModel.DataAnnotations;  

namespace AmazingWijmoMvcApplication.Models  
{  
    public class TahDoList  
    {  
        [Editable(false)]  
        public int Id { get; set; }  

        [Required]  
        public string Title { get; set; }  

        [Display(Name = "Date Created")]  
        public DateTime? CreatedAt { get; set; }  

        [Range(0, 5),UIHint("NumericSlider")]  
        public int Priority { get; set; }  

        [Range(0, 1000000)]  
        public decimal Cost { get; set; }  

        [DataType(DataType.MultilineText)]  
        public string Summary { get; set; }  

        public bool Done { get; set; }  

        [Display(Name = "Date Completed")]  
        public DateTime? DoneAt { get; set; }  

    }  

}  

Generate Controller and Views

Before we go any further, build your project. This will allow the Scaffolding to inspect our Object Model. Now, right-click on the Controllers folder and choose "Add Controller". Choose the following options and click Add. The Scaffolding will generate a Controller and all of the Views needed for a CRUD application. The great thing about Scaffolding is that it generates a starting point. So it will work right away, but you can always customize it.

Run

Just like that, we have a fully functioning ToDo List Application. Navigate to the /Todo Url and the application will create the Database for your model and server up an empty result set. Start adding items and your List View will look like this:

Tablet View

Phone View

In the Create or Edit Views you will see that there are just standard EditorFor Helpers. But inside the project we have installed custom EditorTemplates. We also added jQuery Mobile Input for the best mobile experience. So when certain types are used (DateTime, Numeric, etc), custom editors will render. Take a look at how nice the forms are when these custom editors are used. You will also get native UI on phones like a DateTime Picker, Dropdowns, etc.

Tablet View

Phone View

The results are a solid starting point for a Mobile CRUD application. The beauty of this approach is that you can extend it yourself. You can easily modify any part of the application from the Views, to the Scaffolding that generates them. You might even want to add some of your own EditorTemplates too. We hope you like our Mobile MVC Tools as much as we do!

Go Get it!

Everything in this post is included in the Studio for ASP.NET Wijmo. So what are you waiting for? Stop reading and start coding!