In this article, we will learn about Views in MVC 5 and types of Views in ASP.NET MVC 5 with examples. Also, we will learn to create Views in ASP.NET MVC 5 using MVC 5 view template.
In this article, you will learn the following points about Views in MVC 5.
Following are the previous two articles on ASP.NET MVC 5,

What is View in ASP.NET MVC 5?

The view contains the following extension depends on languages.
  1. .aspx
  2. .asp
  3. .html
  4. .cshtml
  5. .vbhtml
Steps to create one ASP.NET MVC application using Visual Studio 2017,
Step 1
First, create an ASP.NET MVC application using Visual Studio 2017 and provide the name “MVC5ViewsDemo”.
Step 2
Go to solution explorer Right-click on “Controller” Folder >> Click on [Add] >> click on “Controller” as follow.
Step 3
Select “MVC 5 Empty Controller” from the window and click on “Add” button.
Step 4
Provide a meaningful name like “HomeController” and Click on "Add" button.

How to create View in ASP.NET MVC 5?

Steps to create the view in MVC 5 as follow.
Step 1
Go to solution explorer => Views Folder => Right-click on “Home” Folder >> go to “Add” >> Click on [New Item] as follow.
Step 2
MVC 5 View Page(Razor) template from "Add New Item" window and provide the required name like "Index.cshtml" click on "Add" button.
Sample default index.cshtml code without layout in MVC 5 View as follows.
  1. @{
  2. Layout = null;
  3. }
  5. <!DOCTYPE html>
  7. <html>
  8. <head>
  9. <meta name="viewport" content="width=device-width" />
  10. <title></title>
  11. </head>
  12. <body>
  13. <div>
  15. </div>
  16. </body>
  17. </html>
Design the Html table using bootstrap CSS as follow.
Html code to create Html table in View using bootstrap as follows.
  1. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta name="viewport" content="width=device-width" />
  6. <title></title>
  7. <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
  8. <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
  9. <script src="~/Scripts/jquery-3.3.1.min.js"></script>
  10. <script src="~/Scripts/bootstrap.min.js"></script>
  11. </head>
  12. <body>
  13. <div>
  14. <h3>Employee Detail</h3>
  15. <table class="table table-bordered table-responsive table-condensed">
  16. <thead>
  17. <tr class="btn-primary">
  18. <th>EmpId</th>
  19. <th>Name</th>
  20. <th>Email</th>
  21. <th>Job</th>
  22. </tr>
  23. </thead>
  24. <tbody>
  25. <tr>
  26. <td>100</td>
  27. <td>Test 1</td>
  28. <td>[email protected]</td>
  29. <td>Software Developer</td>
  30. </tr>
  31. <tr>
  32. <td>101</td>
  33. <td>Test 2</td>
  34. <td>[email protected]</td>
  35. <td>Software Developer</td>
  36. </tr>
  37. <tr>
  38. <td>102</td>
  39. <td>Test 3</td>
  40. <td>[email protected]</td>
  41. <td>QA</td>
  42. </tr>
  43. </tbody>
  44. </table>
  45. </div>
  46. </body>
  47. </html>

How to create a view using layout page in ASP.NET MVC 5

Steps to create a view using layout page in ASP.NET MVC 5 default template.
Step 1
Go to solution explorer => Views Folder => Right-click on “Home” Folder >> go to “Add” >> Click on [New Item] as follow.
Step 2
Select MVC 5 View Page with Layout(Razor) from "Add New Item" window and provide the required name like "ViewPageWithLayout.cshtml" click on "Add" button as follow.
Step 3
Select the "Shared" folder from views folder and select "_Layout.cshtml" page click on the "Ok" button as follows.
Create sample Html table which contains some dummy information.
Add code for HomeController as follows.
  1. namespace MVC5ViewsDemo.Controllers
  2. {
  3. public class HomeController : Controller
  4. {
  5. public ActionResult Index()
  6. {
  7. return View("ViewPageWithLayout");
  8. }
  9. }
  10. }
The View “ViewPageWithLayout” html Code as follow,
  1. @{
  2. Layout = "~/Views/Shared/_Layout.cshtml";
  3. }
  4. <h3>Student Detail </h3>
  5. <table class="table table-bordered table-responsive table-condensed">
  6. <thead>
  7. <tr class="btn-primary">
  8. <th>StudentId</th>
  9. <th>Student Name</th>
  10. <th>Email</th>
  11. <th>Class</th>
  12. </tr>
  13. </thead>
  14. <tbody>
  15. <tr>
  16. <td>101</td>
  17. <td>Madhav S</td>
  18. <td>[email protected]</td>
  19. <td>BCS</td>
  20. </tr>
  21. <tr>
  22. <td>102</td>
  23. <td>Abhijeet </td>
  24. <td>[email protected]</td>
  25. <td>BCA</td>
  26. </tr>
  27. <tr>
  28. <td>103</td>
  29. <td>Arun</td>
  30. <td>[email protected]</td>
  31. <td>MCA</td>
  32. </tr>
  33. </tbody>
  34. </table>

Create view from controller In MVC 5

Step 1
Open the “HomeController” >> Set cursor inside the Action Method >> Right click on inside the action method >> click on [Add View] as follow.
Step 2
Provide the view name and select the appropriate layout and click on the “Add” button as follows.
Add the same above Html code for this view and run the application you will get the same result as above.

How to write C# code on Razor View

Example 1
Print a simple message on View using C# code.
Index.cshtm page code
  1. @{
  2. string strMessage = "Welcome to ASP.NET MVC 5 Tutorials Step By Step";
  3. }
  5. <label>@strMessage</label>
Output 1
Example 2
Addition of two number on View using C# code.
  1. @{
  2. var num1 = 100;
  3. var num2 = 200;
  4. }
  6. <label>Addition of Two No = @(num1 + num2)</label>
Output 2

Type of View in ASP.NET MVC 5

Why View is required in ASP.NET MVC?

  • The view is required to display the UI on the browser.
  • It is required to make your application interactive and user-friendly.
  • To use a client-side framework like AngularJs, ReactJs, etc.

How to call View from the browser?

Syntax
DomainName/ConttrollerName/viewName
Example
localhost/Home/Index

View Hierarchical in ASP.NET MVC 5

In view, hierarchical “View” is a base folder of all subfolders in MVC structure. If you create a controller then automatically a respective folder is created inside the view folder like “Home”, "Student", "Employee", etc. In the above diagram it says that we have created HomeController the "Home" folder is created automatically and same for Employee folder. Each respective controller's view folder can contain any number of view pages inside the view folder.
References
I hope you understand the concepts of view in ASP.NET MVC 5.
Thanks for reading.