INDUS UNIVERSITY Web Engineering

LAB 09

Introduction

This Lab is intended to provide basic concepts and fundamentals of ASP.NET MVC (Model View Controller) architecture workflow for beginners.

“M” “V” “C” stands for “MODEL” “VIEW” “CONTROLLER”. ASP.NET MVC is architecture to develop ASP.NET web applications in a different manner than the traditional ASP.NET web development. Web applications developed with ASP.NET MVC are even more SEO (Search Engine) friendly.

Developing ASP.NET MVC application requires Microsoft .NET Framework 3.5 or higher.

MVC Interaction with Browser

Like a normal web server interaction, MVC application also accepts requests and responds to the web browser in the same way.

Inside MVC Architecture

The entire ASP.NET MVC architecture is based on Microsoft .NET Framework 3.5 and in addition uses LINQ to SQL Server.

What is a Model?
  1. MVCmodelis basically a C# or VB.NET class
  2. Amodelis accessible by bothcontrollerandview
  3. Amodelcan be used to pass data fromControllertoview
  4. Aviewcan use model to display data in page.
What is a View?
  1. View is an ASPX page without having a code behind file
  2. All page specific HTML generation and formatting can be done inside view
  3. One can use Inline code (server tags ) to develop dynamic pages
  4. A request toview(ASPX page) can be made only from a controller’s action method

What is a Controller?

  1. Controlleris basically a C# or VB.NET class which inheritssystem.mvc.controller
  2. Controlleris a heart of the entire MVC architecture
  3. InsideController’s classaction methods can be implemented which are responsible for responding to browser OR calling views.
  4. Controllercan access and usemodelclass to pass data toviews
  5. ControllerusesViewDatato pass any data toview

MVC File Structure & File Naming Standards

MVC uses a standard directory structure and file naming standards which are a very important part of MVC application development.

Inside the ROOT directory of the application, there must be 3 directories each for model, view and Controller.

Apart from 3 directories, there must have aGlobal.asaxfile in root folder, and aweb.configlike a traditional ASP.NET application.

  • Root[directory]
  • Controller[directory]
  • Controller CS files
  • Models[directory]
  • Model CS files
  • Views[directory]
  • View aspx/ascx files
  • Global.asax
  • Web.config

MVC 4 needs the following configuration:

Let us create the application named Employee Information. Open VS 2012 and select File -> New Project. (MVC is a Project template and not a web site). Select ASP.NET MVC 4 Application and give it a name as Employee Information and click OK.

As we click on ok button, it will ask us to select a template –

Project Templates

  • Empty template- it has only basic folder structure and assemblies. Rest all we can develop according to our need.
  • Basic template- it has basic folders, CSS and MVC application infrastructure. If we run the application created with Basic template, it will give us the error. We need to code. It is basically intended for experienced developers who want to configure the things exactly how they want.
  • Internet Application template- it contains the beginnings of MVC application enough that we can run the application immediately after creating it.
  • Intranet Application template- it is just same as internet application template. The difference is that Account management functions run against Windows accounts rather than ASP.NET membership system.
  • Mobile Application template- it is for the development of mobile applications. It includes mobile visual themes, touch optimized UI and support for AJAX navigation.
  • Web API template- ASP.NET web API is a framework for creating HTTP services. It is similar to the internet application template but there is no user account management functionality.

We will selectInternet Applicationtemplate.

Next comesView Enginedrop down.

It contains two different view engines – Razor View engine and web forms view engine. We will select Razor. Razor works with HTML and is to provide the clean, lightweight, simple view engine. It minimizes the amount of syntax and extra characters and puts a little syntax as possible.

Next comesCreate a unit test projectcheckbox. We will select it and unit tests will get created. Click on OK and the solution will get created with two projects – one for the application and the other for unit tests. Automatically, many files and folders will get added into our project as shown below –

We will add all the controllers in controllers folder, Models in Models folder etc. I.e., everything in their respective folders. Scripts folder contains all the necessary javascript files that support JQuery. Content folder containsSite.cssfile through which we can do the designing part.

These default files provide us the basic structure for a working application with Home, About and Login/Logout pages/Registration pages.

Naming Convention- how to name the files to be added in the MVC application:

  • Controllers – Each Controller’s class name ends withControllersuffix. For example: HomeController.
  • Views – there is a single Views Folder in every application. In Views folder, there are Sub folders that are named as the name of Controller without Controller suffix. For example: for HomeController there will be a folder under Views folder named Home.
  • Models -Name of Model will be according to Table name with the Model suffix. For example: Name of Account Model will be AccountModel.

The structure of the project is created. Now we need to add our functionality. We are going to create a project on employee information. This is an Entity framework. So, we need to create Models first of all. Right click on Models folder and add new class named –EmployeeModels.csand add the properties –

DepartmentModels.cs –

CityModels.cs –

StateModels.cs –

We can see that Employee Model consists of two properties against each Department, City and State. We call them navigational properties. Using Employee, we can navigate to Department name, city Name and State name through dot operator.

These Models will interact with the database. Now we will add Controllers for actions –

Right click on Controllers folder and Add New Controller and Name thatEmployeeController.We will be asked for Controller Name, name that as EmployeeController.

Scaffholding Options- Scaffholding in ASP.NET MVC will generateCreate, Read, Update and Delete (CRUD)functionality in an application. Scaffholding knows how to create the Views, how to name the Views and where to place all the things.

So, in Template Drop down, we will selectMVC Controller with read/write actions and views, using Entity Framework.In Models drop down, we will select ourEmployeeModels.For the DataContext class, when we click on it and select <Data Context Type> a pop up will come –

It will add EmployeeController in Controllers folder and automatically add code for Create, Read, Update and Delete functionality and create Views accordingly. In Controllers, there areActionResultmethods.Nameof ActionResult method must be same as that of name of view. And name ofFolder of Viewthat contains that View must be same as that of Controllers name without controller suffix.

As we build the application, it will automatically create the tables in local database –

Now, our application is ready for basic functionality –

Run the application and against the localhost, type – Employee. It is the Controller, that will run. According to Employee table, it will create columns. We can edit them throughIndex View.

How it works- when we run our MVC Application, we have to provide “Controller/View/ID” in the URL, in which ID is optional. As we know that Controller is one who interacts with both, Model and View. So, we need to writeController/View. A controller has manyActionResultmethods. So, the question is how the controller knows whichActionResultto execute when we call a particular controller. The answer is the naming convention of Views. Under Views folder, we need a folder whose name will be same as that of Controller without Controller suffix. And under that folder we have different views whose name will be same as that ofActionResultmethod of that controller. So, in our URL, we provide Controller/View. This is how the controller knows which view to run.

Let us create a record. When we click on Create New,Create.cshtmlView will get the call.

Through this screen shot, we can see that how Create View will get open on clicking on Create New Link. Following screen will get open –

We can add as many records. We can edit the headings of attributes throughCreate.cshtml.

After creating a record, we can edit and delete that record. We can also do modifications at design level.

1

Instructor: Muhammad Saddam Khokhar