Introducing Our New MVC 4 Tools

We have been supporting MVC for about 2 years in our Studio for ASP.NET Wijmo. I am now proud to announce our new MVC 4 Tools. Our new tools include:

• New MVC 4 Project Templates (C# & VB)
• Responsive Metro theme
• MVC Scaffolding automatically enhanced with Wijmo
• Wijmo-enhanced EditorTemplates like Date Picker, Numeric Input, Slider and more

Getting Started

Let's take a look at getting started with our MVC 4 Tools. The first thing you will need to do is install Studio for ASP.NET Wijmo.

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 Application. Now, let's just run the app and see what it looks like out of the box. It might look familiar to you. That's because we based it on Microsoft's built-in template. We just modified the markup and CSS to our liking and added Wijmo of course.

Add a Model

Next, let's build a little ToDo List App using the Wijmo 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("IntSlider")]  
        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; }  

        public ICollection<TahDoItem> TahDoItems { get; set; }  

    }  

    public class TahDoItem  
    {  
        [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("IntSlider")]  
        public int Priority { get; set; }  

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

        public int TahDoListId { get; set; }  

        public TahDoList TahDoList { 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 /ToDoList 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: 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. 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. The results are a solid starting point for a 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 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!