MVC Tutorials

MVC is a framework which is used for developing web applications using MVC Design
Mvc Tutorials

MVC Tutorials

MVC is a framework which is used for developing web applications using MVC Design

  • The Model represents the application core.
  • The View displays User Interface.
  • The Controller handles the input.
  • The MVC model supports HTML, CSS, and JavaScript.
Mvc Model
  • The Model represents logic for the application data. Often model objects access data from database.
  • The View is the parts of which is displayed to the user.
  • The Controller is the part of the application that handles user interaction. Typically controllers read data from a view, control user input, and send input data to the model.

Steps to create a sample MVC application

  • Open visual studio, go to new project and click on it, click on web, asp.net application.
Steps To Create A Sample MVC Application1

Select MVC and press ok. If you want u can select Add unit test also but I recommend you to select it. Click on to Change Authentication and select No Authentication since this example doesn’t require any authentication.

Steps To Create A Sample MVC Application2

When your project loads, then you solution explorer looks something like this. Before you start the development, it’s very important to understand what do these folders represent and which files has to be stored in which folders. I have explained clearly about that below.

Steps To Create A Sample MVC Application3

View: In this folder you will add MVC views which can be HTML, Razor or Webform pages

Model: In this folder you will add model classes. Models are simple .NET classes which provides data and probably also contain validations. So in this folder you will add Customer class, Supplier class etc.

Controller: In this folder you will add controller and controllers can have actions. this takes request from the user and performs specific actions.

Script: Here you add your JavaScript files. You will find JQuery and angular JavaScript files by default as they are included by visual studio itself.

App_Start: Lot of objects has to be activated and initialized before it comes to the live like routing, bundling etc.

Content: This folder contains CSS (Cascading style sheet).

App_Data: App_Data is for file based data store. Files which are related to data are stored.

Fonts: Fonts which you are using in web application you can put them here.

Click on run. Then your first application will be hosted in local.

Now let’s make some changes in the code so that we will display some information in the website page. Go to a folder called as Controller and open the file “Homecontroller.cs”, it looks something like below screen shot.

Steps To Create A Sample MVC Application4

Now let us display text as “this is home page” in home page. To do this, change Actionresult to string since we will be passing string and instead of returning view(), return string as “this is home page” as shown below and run the application.

When the application runs, it first calls the home controller by default. Then if you want to go to about page then type as shown below and click on enter, it goes to about page. The same u need to change for contact page. Instead of about, change it to contact and press enter, it leads to contact page.

Steps To Create A Sample MVC Application5

Now let’s go further and see how to add a new controller. Right click on controller’s folder, click on controller, select empty controller and give some controller name. But remember, Controller name has to start from Capital letter and Controller has to be there at the end of the controller name something like HomeController, XyzController, AbcController etc. so let’s name it as XyzController and add it. When the page is opened, we can see a set of predefined codes. Let’s change those codes as below and run the application.

Steps To Create A Sample MVC Application6

When the application is loaded, you need to give the controller name followed by “/” followed by the method which has to be called. In this case my controller name is Xyz and method name is also Xyz, so I will type something like below.

Steps To Create A Sample MVC Application7

Suppose if you don’t give method name, then it shows error, because by default it searches for method name as “Index”. So specifying method name is very much necessary. If there is any method name Index, then by default it will be called when u don’t give method name after controller name

Now let’s discuss about Models and Views. Let us create a class inside model folder. That can be done by right click on model folder and add class. In my case I am going to create a class called as employee and I have declared some of the variables

Steps To Create A Sample MVC Application8

Now in my XyzController, I will going to create an object of employee and will return the view. We need to change couple of things in Homecontroller to Actionmethod since we had changed to string and return View().

Steps To Create A Sample MVC Application9

Now we need to create a view for action method Xyz. To do that, right click on Xzy and Add View. We can leave the view name as it is and click on add, and then we can see Xyz.cshtml. Open that file and we can see some of the tags. We need to call that Employee Object here in this Xyz.cshtml page as shown below.

Steps To Create A Sample MVC Application10

Run the application. Then the output will be something like this.

Steps To Create A Sample MVC Application11

You MVC sample is working