Single Page Application Frameworks are gaining popularity in the ever evolving web community with lot of libraries such as JavaScriptMVC, Backbonejs and many other libraries. ASP.NET MVC 4 introduces experimental support for building single page application (SPA) through a template. Much of the plumbing work of wiring up the client side scripts, javascript modelviews and the controllers is automated, making it a quick start to develop SPAs relatively easier. Lets examine a scenario where we are building a Northwind Store using SPA.

I installed the ASP.NET MVC 4 Beta for Visual Studio 2010 and the Northwind Sample Database for SQL Server

Post that I did a “File – New Project – ASP.NET MVC 4 Web Application”



In MVC 3 we are used to see a screen with 3 options i.e. Intranet, Internet and Empty templates. In MVC 4 we have additional templates as you can see below and I chose the “Single Page Application” template and created the project template.



In MVC 3 we are used to see a screen with 3 options i.e. Intranet, Internet and Empty templates. In MVC 4 we have additional templates as you can see below and I chose the “Single Page Application” template and created the project template.



Next, the important folder is the Scripts folder and there I found that it creates a <Modelname>ViewModel.js file that holds all the observer pattern script required. In addition, this folder contains a truckload of JavaScript files including jQuery, Knockout, upshot and modernizr.



Finally, inside the “Views” folder, it creates the necessary Partial Views and Index View for Tasks. Once you build and run, you can experience all of this SPA for your TodoItem Model without having written a single line of JavaScript code yet.

So, you learn

1. The ContextName that you select when creating the TasksConroller (inour case it is MVCApplication126Context)is important for you to work with other Databases. By default when you run this solution, Visual Studio would create a SQL Express Database in C:\Program Files\Microsoft SQL Server\MSSQL10.SQLEXPRESS\MSSQL\DATA folder with the name MVCApplication126Context.

The way I see the SPA framework identifies is, if you don’t have a connectionstring by the name of the Context, it defaults to creating a database in SQL Express with the ContextName in the above mentioned path.

If you have a connectionstring mentioned with the same contextname, it tries and uses that Database (SQL Express, SQL Server). However, when you are running for the first time, if you create a Database and point it in the connectionstring, it would expect that the Table (mapped to the model i.e. TodoItems) need to exist. Otherwise, it throws an exception. So best, is to either use a Model for which there is a Table that already exists in the Database or provide a new Database name in which case, VS would create the Database with the TodoItems Table as well. There must be someplace to configure all of these, but for the lack of time I didn’t delve deep into these things for now.

So, coming to our Northwind Sample. Northwind has been Developers’ best friend to experiment new things and the saga continues here.

I had to do a couple of things though. First I removed the TodoItem.cs class and also removed the TasksController, Views since we don’t need them. So, for all practical purposes, it is now a plain MVC 4 Application with the default Home & Account Controllers and their respective Views. I also removed the Contextfiles created inside the Controllers Folder.

A bit of analogy on how I built this Northwind App before I explain the actual steps.

The TodoItem is a simple class file and can be hand wired. However, in real world, or for that matter, a simple Northwind database table has a lot of columns and hence properties to be wired up. Also, it requires to map foreign relationships and other things. So, I decided to use the ADO.NET Entity Data Model first to create a model class for the Northwind Database. This would help me in generating DbContext classes using EF CodeFirst Template, which are much simpler than the complex EDMX file that is created by the ADO.NET Entity Model. Thereafter, I can use the class files generated to create the Controller, View and JS ViewModels.

This blog post shows how to validate models containing complex types such as Objects and Lists in ASP.NET MVC 3.

In a first step we modify the properties of the model ( Models/ValidationModel.cs) and add some complex types:

public class ValidUserNameAttribue : ValidationAttribute
{
  public override bool IsValid(object value)
  {
    return (value != null &amp;&amp; value.ToString() == "Bob");
  }
}

public class User
{
  [Required]
  [StringLength(8, MinimumLength = 3)]
  [ValidUserNameAttribue(ErrorMessage = "User name != 'Bob'")]
  [Display(Name = "User name")]
  public string UserName { get; set; }

  [Required]
  [StringLength(8, MinimumLength = 3)]
  [Display(Name = "Display name")]
  public string DisplayName { get; set; }
}

public class ValidationModel
{
  public User User { get; set; }

  public List Users { get; set; }
}

In a second step we modify the form ( Views\Home\Partial\_Form.cshtml) to add input element for the new model properties:

@model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel

@DateTime.Now: Partial/_Form.cshtml rendered
< hr/>

@using (Html.BeginForm("Form", "Home"))
{
  <h1><em>User</em> object</h1>

  <p>
    @Html.LabelFor(m => m.User.UserName):
    @Html.EditorFor(m => m.User.UserName)
    @Html.ValidationMessageFor(m => m.User.UserName)
  </p>

  <p>
    @Html.LabelFor(m => m.User.DisplayName):
    @Html.EditorFor(m => m.User.DisplayName)
    @Html.ValidationMessageFor(m => m.User.DisplayName)
  </p>

  <h1>List of <em>User</em> objects</h1>

  for (var i = 0; i <= 1; i++)
  {
    <h2>User @i</h2>

    <p>
      @Html.LabelFor(m => m.Users[i].UserName):
      @Html.EditorFor(m => m.Users[i].UserName)
      @Html.ValidationMessageFor(m => m.Users[i].UserName)
    </p>

    <p>
      @Html.LabelFor(m => m.Users[i].DisplayName):
      @Html.EditorFor(m => m.Users[i].DisplayName)
      @Html.ValidationMessageFor(m => m.Users[i].DisplayName)
    </p>
  }

  <input type="submit" value="Submit" />
}

In a last step we adapt the “success-view” ( Views\Home\Partial\_Success.cshtml) that is shown after the data have been successfully validated on the server side:

@model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel

< p><strong>Model is valid :)</strong></p>

< p>
  Model.User.Username: '@Model.User.UserName'<br />
  Model.User.DisplayName: '@Model.User.DisplayName'<br />
  Model.Users[0].Username: '@Model.Users[0].UserName'<br />
  Model.Users[0].DisplayName: '@Model.Users[0].DisplayName'<br />
  Model.Users[1].Username: '@Model.Users[1].UserName'<br />
  Model.Users[1].DisplayName: '@Model.Users[1].DisplayName'
</ p>

As you can see in the source code above, there is no magic; model binding and validation of complex objects and lists work out of the box in ASP.NET MVC 3.