Tut # 03: Views in ASP.NET MVC

Hello friends, I hope you all are doing great. In today’s tutorial, we are gonna have a look at What are Views in ASP.NET MVC. It’s our third tutorial in ASP .NET MVC series and in our first tutorial, we have seen How to Setup Your First Project in ASP.NET MVC and in our second tutorial, we have seen What is Model in ASP.NET MVC and I have told you about Views as well in previous tutorial. So, now we are gonna have a look at it in detail:

Views in ASP.NET MVC

• In MVC Framework, we don’t have pages or path to some html file as in php.
• Instead, We have to use Views in ASP.NET MVC for front end designing.
• We can use Html, Css, Javascript, Jquery or any other front end language in Views.
• There are two types of Views, we use in ASP, which are:
  • Specific Views ( These Views are associated with specific Controllers ).
  • Generic Views ( These Views are associated with all the Controllers ).
• You can find the Views folder in your Solution Explorer, click to expand.
• In Views folder, you will find 4 more folders named as:
  • Account.
  • Home.
  • Manage.
  • Shared.
• In these folders, we have to click on Home to expand and you will find 3 files in it, which are:
  • About.cshtml
  • Contact.cshtml
  • Index.cshtml

• If you remember thaat we also have same 3 pages on our demo ASP Web App.
• So, let’s open Index file which is our home page View file and I have changed the H1 Tag from Asp.Net to The Engineering Projects, shown in below figure:

• Now let’s refresh our web app, and you will get something as shown in below figure:

• Now you can see in above figure that our H1 Tag has now changed to The Engineering Projects.
• One important thing to note here is that we don’t need to stop the visual studio server / execution because now we are making changes in the front end interface.
• When we were working on Models in MVC, we have to stop the Visual studio execution on every change because that was Server Side Programming.
• But as Views are Client Side Interface so we don’t need to restart our server.

Specific Views in ASP.NET MVC

• As I have said earlier, there are two types of view and in this section we will first discuss the Specific Views in ASP.NET MVC.
• These Views are specific to certain Controllers, we will discuss Controllers in the next chapter.
• For now when a user enters the webpage, the controllers get the respective View and show it to the user.
• In the above section, we have seen the code for index file and you must have noticed that this index file only contains the html code for the body.
• This is a Specific View as all it’s data is used only for Home Page, we can’t use it our About or Contact Page.
• So, all the three Views in Home Folder are all Specific Views and are attached to specific Controllers.
• Now let’s have a look at the Generic Views: ( Btw these are not their actual names, I have given these names to Views according to their functionality ).

Generic Views in ASP.NET MVC

• Let’s have a look at the interface of our demo Web App:

• You can see in the above figure that we have a Menu Tab in our Home Page where we have placed the links of our 3 Pages.
• But in our Index View, we haven’t seen any code for Menu Tabs.
• Now if you check all pages of your Web App then you will notice that they all have this same Menu Bar.
• Such Views are called Generic Views which are used in almost every page and decides the nature of your web design.
• Sidebar, Footer & Headers etc. comes in Generic Views category.
• So, now question is where we have the code for Menu Bar.
• Such Generic Views are placed in Shared Folder as shown in right side figure:
• If we have to apply some Generic Terms in Front End like Menus, Footer, Siderbars, Menu Layouts etc. then we will add their codes in _Layout.cshtml.
• All these other files are partial views, which will specifically render with specific controllers.
• We will discuss them in our coming tutorials but for now the file you should be interested in is _Layout.cshtml.
• So, open this Layout File and it will look like something as shown in below figure:

• Now you can see here, this file is in proper HTML Format having both Head & Body tags.
• This is our Main Layout View in which we can add all our generic styling items with proper placement.
• You have noticed a RenderBody() here and that’s the place where our Index View file is appearing.
• So, when this View File is called then it checks which controller command is coming, if it’s home then RenderBody will get Index View.
• If its About Controller then RenderBody will get the About View.
• How Controller is accessing these Views that we will check in our coming tutorial.
• Here’s a video where one of our Team Member has explained Views in detail, it will give better understanding:

So, that was all about View in ASP.NET MVC. In my coming tutorial, I will give you a detailed overview of Controllers in ASP.NET MVC. So, take care and have fun !!! 🙂