
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 !!! 🙂