ASP.NET MVC3 RESTful application tutorial with Backbone.js – Part I

Today’s post is the beginning of a sweet candy recipe for the developers out there. We found out that in the last half-year the community produced a ton of tutorials and how-tos targeting ASP.NET MVC3, but only a few of them with RESTful applications in mind. For this reason, our task today is set on cooking an ASP.NET MVC3 RESTful application.
We will build the application from scratch in 4 phases, each focusing on small tasks. We had trouble finding established best-practices for the process: anyway we will strive to write nice looking code and stay simple in the meanwhile.

We hear already the back row students grumbling noisily: developing a RESTful application is an interesting academical exercise, but what for? For this reason late in the cooking, we will spice our candy with a pleasant aftertaste of Backbone.js. In fact, our project will be a re-visitation of the popular Backbone’s Todo demo for ASP.NET MVC3.

Our recipe will be divided in four parts, roughly related to MVC three-tiered architecture:

1. Project setup
2. Model
3. Controller logic
4. Presentation layer & integration with Backbone

Having laid out our plan, let’s get our hands dirty with the first step!
This first part is pretty much standard operating procedure for most of you, but it’s the ground upon which we will build the next ones.

Requirements

We tested our project with

• Visual Studio 2010 Professional
• .NET Framework 4
• ASP.NET MVC3
• SQL Server 2008 Developer Edition

It may work even with scaled down versions of VS or SQL Server. Please note, anyway, that you should NOT employ SQL Server Compact Edition: this will give you many headaches and in the end it may not work at all ;)

Project Setup

Start your Visual Studo 2010 and choose
File –> New –> Project –> Visual C# –> Web –> ASP.NET MVC3 Web Application.
Below type in “Todo” as project name.

We will start with a basic scaffold in place, so in the next form select Internet Application template and Razor as view engine. You can omit unit test project creation.

You can now run your project: if everything is ok you’ll be greeted by the “Welcome to ASP.NET MVC!” white-blue home page.

Data Layer

The first real stage is to setup the data layer of our project. We opted for Entity Framework 4 as ORM. We ruled out Code-First and selected a Model-First approach. With it, you can design a data layer from ground up: you draw within the Designer tool the conceptual model and then a handy wizard derives for you the database generation script (SSDL) and the correct mapping (MSL).

To do this
(Right click on Todo Project) Add –> New Item –> Visual C# –> Data –> ADO.NET Entity Data Model. Name it “TodoEntities”. Click Add and then select Empty Model.

At this point you should see in your Solution Explorer an .edmx file and be presented with an empty model in the designer.(Single click in the empty area) and then on the property side panel change Pluralize New Objects to true.

Now let’s add an entity for our Todo model.

Please right click in the Designer area and Add New –> Entity. Name it “Todo”. Leave alone the other fields and press Ok.

You have just added your first entity to the model. We will now need to augment the model’s properties.
(Right click on the Todo model) Add New –> Scalar Property . Name it “Order” (from now on pay attention to word capitalization).
On the Properties panel, change the type for the property to Int32.

Do the same for two more properties: “Done” (Boolean) and Text (String). Now save and you will have a Todo Entity with 3 properties defined by you and a primary key, Id. It should look like this

Good! Let our entities bake in the oven and in the meanwhile create the database. First we need a connection to our database server.
(Right click on the designer area) Generate Database From Model. In the wizard choose New Connection and in the Data Source choose Microsoft SQL Server. Then fill in “LOCALHOST” as Server Name (if you have the database server on the development machine, the correct address otherwise) and “Todo” as Database Name like this

When you click Ok you will be asked to create the database, because it does not yet exist. Answer yes and let VS create it for you. In case it is disabled, tick the check-box to save the credentials in your web.config. A couple of Next and Finish should bring you to end of the DDL script generation process. At this point you will be presented in VS with the script to generate your db. If you take a quick look at it, you should note that it’s simple SQL.

The last step of this section is the actual database creation. With the script still opened, select Execute SQL from the toolbar. Simply click Connect on the Connect to Database Engine dialog. Please note that in any authentication case you choose, you should have a credential with the proper permissions to create a database.

If your query will complete successfully, congratulations! You are ready for the next part of the recipe: Model creation.

Stay tuned and don’t let our mix get burned in the meanwhile!

Tags: ado.net, asp.net mvc, backbone, c#, ef4, model-first, mvc3, todo