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


Download 47.54 Kb.
NameMvc 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
A typeDocumentation

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. MVC model is basically a C# or VB.NET class

  2. A model is accessible by both controller and view

  3. A model can be used to pass data from Controller to view

  4. A view can 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 to view (ASPX page) can be made only from a controller’s action method

What is a Controller?

  1. Controller is basically a C# or VB.NET class which inherits system.mvc.controller

  2. Controller is a heart of the entire MVC architecture

  3. Inside Controller’s class action methods can be implemented which are responsible for responding to browser OR calling views.

  4. Controller can access and use model class to pass data to views

  5. Controller uses ViewData to pass any data to view


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 a Global.asax file in root folder, and a web.config like 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:

http://www.codeproject.com/kb/applications/683417/image001.png

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.

http://www.codeproject.com/kb/applications/683417/image002.jpg

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

http://www.codeproject.com/kb/applications/683417/image003.jpg

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 select Internet Application template.

Next comes View Engine drop down.

http://www.codeproject.com/kb/applications/683417/image004.png

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 comes Create a unit test project checkbox. 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 –

http://www.codeproject.com/kb/applications/683417/image005.png

http://www.codeproject.com/kb/applications/683417/image006.png

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.css file 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.

http://www.codeproject.com/kb/applications/683417/image007.jpg

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

  • Controllers – Each Controller’s class name ends with Controller suffix. 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.cs and add the properties –

http://www.codeproject.com/kb/applications/683417/image008.png

DepartmentModels.cs –

http://www.codeproject.com/kb/applications/683417/image009.png

CityModels.cs –

http://www.codeproject.com/kb/applications/683417/image010.png

StateModels.cs –

http://www.codeproject.com/kb/applications/683417/image011.png

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 that EmployeeController. We will be asked for Controller Name, name that as EmployeeController.

http://www.codeproject.com/kb/applications/683417/image012.jpg

Scaffholding Options - Scaffholding in ASP.NET MVC will generate Create, 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 select MVC Controller with read/write actions and views, using Entity Framework. In Models drop down, we will select our EmployeeModels. For the DataContext class, when we click on it and select a pop up will come –

http://www.codeproject.com/kb/applications/683417/image013.png

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 are ActionResult methods. Name of ActionResult method must be same as that of name of view. And name of Folder of View that contains that View must be same as that of Controllers name without controller suffix.

http://www.codeproject.com/kb/applications/683417/image014.jpg

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

http://www.codeproject.com/kb/applications/683417/image015.png

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 through Index View.

http://www.codeproject.com/kb/applications/683417/image016.jpg

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 write Controller/View. A controller has many ActionResult methods. So, the question is how the controller knows which ActionResult to 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 ofActionResult method 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.cshtml View will get the call.

http://www.codeproject.com/kb/applications/683417/image017.jpg

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 –

http://www.codeproject.com/kb/applications/683417/image018.png

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

http://www.codeproject.com/kb/applications/683417/image019.jpg

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



Instructor: Muhammad Saddam Khokhar

Share in:

Related:

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 iconModel-View-Controller (mvc) is a design pattern put together to help...

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 iconAdvanced vb. Net: Building Web Applications with mvc 4

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 iconCreating Web api using asp. Net mvc 6

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 iconAsp net core 0 mvc 6 using web api and AngularJs

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 iconAsp net 5 0 C# mvc, wcf, sql server

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 iconWeb Browsers While Sitecues is cross browser compatible, we currently...

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 iconWhich nucleons in a nucleus are involved in the Coulomb interaction...

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 iconBasic of mvc in-Depth

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 iconRunning head: mvc software

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 iconAsp net mvc 4 Mobile Features




forms and shapes


When copying material provide a link © 2017
contacts
filling-form.info
search