Adding a View Page in ASP.Net Core MVC 6

In this tutorial you will learn:
  1. What is View in MVC?
  2. How to add and design View Page?

What is View Page?

View page or View Template is pure HTML page that generates HTML response to client. It is a designer page that gets rendered on the user screen. Basically View Page contains all the design and layouts. A view page may include Razor syntax to implement small c# code direct in the page. In this tutorial I will explain all these things with complete programming example.

Note
It is recommended you to read this page carefully and do all the examples as described. Based on this view page I will add Controller and Model in the next chapter so at the end you will have a small ASP.NET CORE MVC project in hand.

Adding a View Page

I am going to start from very beginning and if you are here means you haven’t lost anything. I am going to create a New ASP.NET Core Project StudentManagement in which there will be a form to accept user data and save it to database. In this chapter I will design only View Page. Coding will be described in next chapter.

Note
This is basic chapter of adding view. Your goal should be to add a new View Page in your project and see this page in output browser window. You will learn more about View Template later.

 
1. Start Visual Studio 2015 > New Project

2. Select Web in the left pane and then choose NET Core Web Application (.NET Core) from center pane.

3. Enter Project Name as StudentManagement and click OK.


4. A template window will appear. Choose Web Application from Template section. Set Authentication to No Authentication and click OK.


5. Visual Studio will open with a default Home page. Press Ctrl + F5 to run the project.

F5 and Ctrl + F5 : F5 allows you to run your project in debug mode. It means you cannot make any modification while running your project. Ctrl + F5 run your project without debugging, so you can simply change your code and save then refresh the output page for result. Most of the programmers prefer to use Ctrl + F5 to run the project and Ctrl + Shift + B for build the project.


6. When you run your program your output will be like this. You will see the default navigation at the top of the page Home, About and Contact.

7. Now add a more navigation item Registration. I will add a ViewPage in a Home Folder.


8. Right click on Home folder > Add > New Item


9. Select MVC View Page, Name it Registration.cshtml and click Add button.


10. A blank page Registration.cshtml will be added to Home folder. Open this file and copy paste highlighted code to make a form.

@{
    ViewData["Title"] = "Student Registration";
}

<h1>Welcome to Student Registration Form.</h1>
<strong> Enter the Student Details</strong><br />

@using (Html.BeginForm())
{
    <table>
        <tr>
            <td>Name : </td>
            <td><input id="SName" type="text" /></td>
        </tr>
        <tr>
            <td>Age : </td>
            <td><input id="SAge" type="text" /></td>
        </tr>        
        <tr>
            <td>City : </td>
            <td><input id="SCity" type="text" /></td>
        </tr>
        <tr>
            <td>Subject : </td>
            <td><input id="SSub" type="text" /></td>
        </tr>
        <tr>
            <td>Mob No : </td>
            <td><input id="SMob" type="text" /></td>
        </tr>
        <tr>
            <td colspan="2"><input id="Submit" type="button" value="Save Details" /></td>
        </tr>
    </table>
}
11. Open HomeController.cs from Solution Explorer and add the following code. It will be under Controller folder. You will learn more about Controller in next chapter. View Page doesn't work until you write action method in controller.

using Microsoft.AspNetCore.Mvc;

namespace StudentManagement.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult About()
        {
            ViewData["Message"] = "Your application description page.";

            return View();
        }

        public IActionResult Contact()
        {
            ViewData["Message"] = "Your contact page.";

            return View();
        }

        public IActionResult Registration()
        {
            return View();
        }

        public IActionResult Error()
        {
            return View();
        }
    }
}

12. Open View > Shared > _Layout.cshtml and add the navigation item like this.

<div class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
   <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
   <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
   <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
   <li><a asp-area="" asp-controller="Home" asp-action="Registration">Registration</a></li>
 </ul>
</div>

13. Run your project by pressing Ctrl + F5 and see the output. You will notice that a Registration Navigation Menu added to top. Click on the menu and you will be landed at student registration form.

This is the very basic chapter that teaches you how to add View Page in ASP.NET Core MVC. Just adding a view page is not enough and you must know how to use a controller to write logic and rendering view page. In the next chapter, you will learn about Controller in ASP.Net Core MVC.

 

Share your thought