MVC Pattern

Day 20a

1
 Objectives

1. MVC pattern Data Using a DataReader

2
 1. MVC pattern

Model-View-Controller (MVC) pattern

The Model-View-Controller (MVC) pattern was introduced in 1970s.
It is a software design pattern that splits an application into three main aspects :
Model, View and Controller.
Moreover, MVC pattern forces a separation of concerns within an application for
example, separating data access logic and business logic from the UI.

3
 1. MVC pattern

Model
The Model represents a set of classes that describes the business logic and data.
It also defines business rules for how the data can be changed and manipulated.
View
The View is responsible for transforming a model or models into UI.
The Model is responsible for providing all the required business logic and
validation to the view. The view is only responsible for displaying the data, that is
received from the controller as the result.
Controller
The Controller is responsible for controlling the application logic and acts as the
coordinator between the View and the Model.
The Controller receive input from users via the View, then process the user's data
with the help of Model and passing the results back to the View.

4
 1. MVC pattern

Advantages of an MVC
It makes it easier to manage complexity by dividing an application into the
model, the view, and the controller.
It does not use view state or server-based forms. This is ideal for developers
who want full control over the behavior of an application.
It provides better support for test-driven development (TDD).
It works well for Web applications that are supported by large teams of
developers and for Web designers who need a high degree of control over the
application behavior.

5
 1. MVC pattern

MVC in ASP.NET
ASP.NET MVC helps us to develop powerful and pattern-based dynamic
websites that enables a clean separation of concerns and also gives you a full
control on a markup. First time it was implemented by Trygve Reenskaug at
1979 and it was implemented on Smalltalk at Xerox labs. Also it includes many
features that help us to develop a sophisticated and modern web application.
The main advantages of ASP.NET MVC are:
Enables the full control over the rendered HTML.
Provides clean separation of concerns(SoC).
Enables Test Driven Development (TDD).
Easy integration with JavaScript frameworks.
Following the design of stateless nature of the web.
RESTful urls that enables SEO.
No ViewState and PostBack events.

6
 1. MVC pattern

Lets see MVC in an example:

The first step is the creation of the skeleton that is going to be used and we start
with the New Project option from the Visual Studio menu.

7
 1. MVC pattern

We get the following screen were we select the ASP.NET MVC 4 Web Application in
Visual C# ,to get this option select the Web option as shown below ,give the
application MVC Documents as name and then Click on the OK button.

8
 1. MVC pattern

In the next screen we select the Internet Application option.

9
 1. MVC pattern

We have created the basic skeleton for application. The next step is writing the
Classes that are needed. We want the Classes in the Models folder, so go to the
Solution, Right Click on that folder and select the Menu Option Add and select
Class from the options. Here is a content of all classes that are needed for this
project.
The Company.cs Class

10
 1. MVC pattern

The Contact.cs Class The Costs_group.cs Class

The Country.cs Class

11
 1. MVC pattern

The Document.cs Class The Function.cs Class

The Mail_category.cs Class

12
 1. MVC pattern

The Payment_status.cs Class The State.cs Class

The Title.cs Class

13
 1. MVC pattern

The MvcDocumentsContext.cs Class

All created Classes will form together the so called Context of application. There is
one more Class we need to create in the Models folder and that is the Context
Class. We call this Class: MvcDocumentsContext.cs :

14
 1. MVC pattern

Creating the Database

The next step will be the creation of the Database based on our
MvcDocumentsContext.cs and the Classes we just wrote.
The first thing we are going to do is adding a line in the Webconfig file and that
should be look like this:

The next step is creating the Database , we have added a Connection String to
work with and we are going to use the Package Manager Console Tool in Visual
Studio. You can find this under the TOOLS menu, look for the NuGet Package
Manager and select that and click on the Package Manager Console to open it.

15
 1. MVC pattern

You see some license information and PM> , after that you type the following line:

PM> Enable-Migrations contexttypename MvcDocuments.Models.MvcDocumentsContext

And you hit the Enter key on you keyboard. If everything is OK you get the
following text in the Console:

But you wont notice that because a new folder is created in your project with the
name Migrations and a File called Configuration.cs also.

16
 1. MVC pattern

In the following part of the Configuration.cs code the AutomaticMigrationsEnabled is

default set to = false; , you have to set it to = true; as shown:

Now Rebuild your Solution and go to the Package Manager Console again and type:

PM> Add-Migration DocumentsDatabaseCreation

17
 1. MVC pattern

After hitting your Enter key a new Migrations file will be created in your Migrations
folder (Digits will be different). Again you won't notice that because the
configuration file just created will be visible but go back to the Console and type:
PM> Update-Database

After hitting the Enter key again the Database will be created:

To see if that
really happened
have a look at
your Server
Explorer under
the VIEW menu
in Visual Studio:
18
 1. MVC pattern

Creating the Controllers and Views

We start with the Controllers folder (two files are already there) and we Right
Click on that folder and Select the Add Controller option:

19
 1. MVC pattern

Now we are going to Add the Controllers for all the Classes we have created so let's
start with the Company.cs Class we have created and name the Controller as shown
before: CompanyController.
Make sure that as the Model class: Company(MvcDocuments.Models) is selected
and that as the Data context class: MvcDocumentsContext (MvcDocuments.Models)
is selected.
Also make sure that under Scaffolding options: Mvc controller with read/write
actions and views, using Entity Framework is selected!
Now you need to create a Controller per Class , so after you click on Add for the
creation of the Company Controller you do the same for all of them except for the
MvcDocumentsContext.cs Class.

20
 1. MVC pattern

When you are done with creating the Controllers you will have noticed that
automatically Views were created during the creation of the Controllers.

21
 1. MVC pattern

Now is left to create a new Controller and call this one: ListController , under
Scaffolding options select the Empty MVC controller and click on the Add button.
You will see the following code on
your screen:

22
 1. MVC pattern

This controller Class will redirect requests for the List page.
Put your cursor at the right side of the return View(); so next to the Comma and
Right Click there and select: The Add View... menu option.

23
 1. MVC pattern

The next thing we are going to do is we are going to find the Shared folder in our
Views folder and open the _Layout.cshtml file, and we are going to look for the
following part in that:

Here, you need to add links to Contact, Company Document and Link pages.
When we hit the F5 button, if everything is OK the application will run and the
Web Page is presented as seen below:

24
 1. MVC pattern

Home page:

25
 1. MVC pattern

List of Companies:

26
 1. MVC pattern

Add new company:

27
Questions???

28