Building your first ASP.NET MVC 4 application in VS 2012

How many times have you heard about building a well designed web application? 3-4? I mean in your daily work.

How many times have you faced a problem with code written before? Wrong naming, wrong spacing, wrong design, wrong patterns/no patterns, wrong repository, wrong database connection, wrong architecture. There are a lot of mistakes done, before you have first seen the project.

Then, the most common situation is that your boss comes to you with a request, that the previous web application should be redeveloped with the new framework and its benefits. You look into old code and the nightmare begins.

You are not able to reuse the old code. You don’t know what is going on, why there are 4 methods in one class doing the same? Why the code is repeating in 4 different classes? Why everything is mixed up?

Where is the View? Where is the Model? Where is the Controller?

MVC enables you to sort out your code (example built with a code first)

MODEL – is responsible for a business logic. You should put there POCOs (Plain Old CLR Objects) with a primitive and navigation properties. Let’s say that you need to store cars in a table. In a Car class you should put all primitive properties (such as: Brand, ModelName, Engine, etc.) and also navigation properties – to let the table know about relationship with another tables. Model can not be dependent on a VIEW.

VIEW – is responsible for presenting data from model, processed by controller.

CONTROLLER – is responsible for getting the input from user, updating the state of model and then pass the information to the view

When you create a new MVC project in .NET with the EntityFramework you can choose between 3 methods:

CODE FIRST – which I like the most is a method which enables us to first write a model classes and then it automatically creates a database just after the first entry in application.

MODEL FIRST – you already have a database model, then it loads and you have your db created.

DB FIRST – you already have a database prepared by someone else, then it maps tables to POCOs.

I will write another article about which to choose during development. In this project we are going to use a code first.

PRACTICE:

We need an application which enables user to create/update/read/delete (CRUD) the data connected with cars. Let’s create a new project!

1. Open Visual Studio 2012

2. File/New/Project -> select Web/ASP.NET MVC 4 Web Application. Name it MvcCars.

3. When new window appears, please select a template as Internet Application and the vie engine as Razor. For this example, please do not select Create a unit test project.

4. Confirm

Your project structure should look like this:

1

We will start from creating a new model class. To do this, please right click on folder Models, select Add->New Item and choose Class. Name it as Car.cs – it is our first POCO in a project. The next thing is to add primitive properties inside of a class as below:

2

This class represents a Car. Car is an object which will be stored in a Cars table in a database. It means, that one car = one row in a db.

If you have already created this class, please create another one for model, named CarContext.cs -> here we will include DbSet for our Car objects and information about the name of the future database. To add it, please follow steps from Car.cs. The structure of CarContext is shown below:

9

The next thing is to add a Controller for our Model. It will store CRUD methods – Create, Read, Update, Delete. To add this please right click at Controller, then select Add->Controller:

4

Click Add.  As you can see, VS 2012 has automatically added CarController with implemented CRUD methods and also new views:

5

I won’t make a walk through these, because it is a post about steps to build  new MVC 4 application.

The last thing to do is to add a connection string into web.config file. To do this, please open web.config and add this connection string:

6

Name of connection string should be the same in CarContext class ( : base(„Cars”) ).

Please hit F5 to Debug. When new tab appears please insert http://localhost:yourport/car/ and enter. This will open the view folder named Car, where all razor files for CRUD methods are stored. After that you should see your web application.

The next step is to click Create New. The new View will appear (Create.cshtml). Just add a new car with its brand and model name. After that you will see the list of all cars that have been already added. You can edit this, delete or show the details.

That’s all!

This tutorial shows how to create a simple application using ASP.NET MVC 4 and Entity Framework with CRUD methods. You can edit this and add new functionality, new methods, views, models, controllers easily by reusing the existing code.

15 uwag do wpisu “Building your first ASP.NET MVC 4 application in VS 2012

    1. Thanks!
      Unfortunately I don’t remember the name of this theme, but I searched for something similar to „Visual Studio 2010 Dark Expression Blend Color Theme” 🙂

  1. There should be one more layer between Model (or it should be used as a Model) It is called Service layer.
    What if MS (or some other vendor) will give us „Super Extra Framework” which solves all our problems but is absolutely incompatible with MVC? You would be forced to Rewrite all nasty code to new one. If you have Service layer and its interface is quite simple most of that code is hidden in it. Unfortunately this extra layer puts some extra complexity to system so you shouldn’t use it if your system isn’t complex enough.

    1. Solution which you have described is for complex systems – but if you have a simple example like this (showing the basics of creating MVC4 application) it is not a good idea, because it will muddy the issue.

      Secondly, business analysis and system architecture should prepare the background for development what means, that sometimes you should take into consideration that if you choose a pattern like MVC, MVP, MVVM or something else you are taking the risk, because there won’t be a situation that all new frameworks will work as designed with your application.

      That’s why I can agree with you, but I won’t say that this is the only solution.

  2. You wrote (at start of post) about case when boss come to developer and tell him to use new technology in existent project, and it suggest that ASP.Net MVC solves that problem. No it don’t. It just replace one dependency with another. In my opinion this part of post should be skipped.

    1. No it doesn’t solve, but it helps. It is really nice to have your project written with a well-known pattern. Of course there are other solutions for that.

Zostaw komentarz

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj /  Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj /  Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj /  Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj /  Zmień )

w

Connecting to %s