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.
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.
Your project structure should look like this:
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:
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:
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:
Click Add. As you can see, VS 2012 has automatically added CarController with implemented CRUD methods and also new views:
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:
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.
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.