ASP.Net MVC View

Introduction

In my previous article, we have seen.

1. How to get a version of our MVC application?
2. How to create our own MVC application?
3. ASP.NET MVC controller

Now this article explains views and why we use views.

View

A view is responsible for displaying all of, or a portion of, data for users. In simple terms, whatever we see on the output screen is a view. Now in the previous article (ASP.NET MVC controller), we have taken the following example.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace DemoMVC.Controllers
{
    public class EmployeeController : Controller
    {
        public string EmployeeNames()
        {
            return @"<ul>
                        <li>Sourabh Somani</li>
                        <li>Shaili Dashora</li>
                        <li>Saloni Choudhry</li>
                        <li>Mahesh Chand</li>
                        <li>DJ</li>
                        <li>Dinesh Beniwal</li>
                    </ul>";
        }
    }
}

In this, we have a Controller named EmployeeController and an action named EmployeeNames that is returning a string. When we run this file we get the following output.

Whatever we have seen in the preceding output screen is nothing but a view. You can see that we are rendering an HTML list. Now instead of rendering this list, we render a beautiful HTML form.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace DemoMVC.Controllers
{
    public class HomeController : Controller
    {
        // GET: /Home/

        public string Index()
        {
            string str = @"
<form>
    <table>
        <tr>
            <td>Name:</td>
            <td><input type='text' name='Name' id='Name' /></td>
        </tr>

        <tr>
            <td>Age:</td>
            <td><input type='number' name='Age' id='Age' /></td>
        </tr>

        <tr>
            <td>Gender:</td>
            <td>
                <input type='radio' name='Gender' id='Gender' value='Male'/>Male
                <input type='radio' name='Gender' id='Gender' value='Female' />Female
            </td>
        </tr>

        <tr>
            <td>Email:</td>
            <td><input type='email' name='Email' id='Email' placeholder='[email protected]' /></td>
        </tr>

        <tr>
            <td>Mobile Number:</td>
            <td><input type='text' name='Mobile' id='Mobile' /></td>
        </tr>

        <tr>
            <td>Qualification</td>
            <td>
                <select id='Qualification' name='Qualification'>
                    <option value=''></option>
                    <option value='B.Tech'>B.Tech</option>
                    <option value='M.Tech'>M.Tech</option>
                    <option value='BCA'>BCA</option>
                    <option value='MCA'>MCA</option>
                    <option value='MBA'>MBA</option>
                    <option value='Diploma'>Diploma</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>Address:</td>
            <td><textarea cols='40' rows='6' name='Address' id='Address'></textarea></td>
        </tr>

        <tr>
            <td colspan='2'>
                <input type='submit' value='Register' />
                <input type='reset' />
            </td>
        </tr>

    </table>
</form>
";
            return str;
        }

    }
}

Output

In the preceding example, we are rendering an HTML form, but this form is on the controller and we are returning a form using a single string. So if we want to manage the code above then it will be very difficult for us. So we create a view.

The following describes how to create a view.

1. To add a view right-click on the action (method) and click on Add View.
   
2. Now a dialog will be opened, providing the name of the view; by default the name will be the same as the action name.
   
3. Now click on the Add button.
4. After adding a view, inside the view's folder, another folder will be created that will be named the same as the controller's name, and inside that, a file will be created that will be a cshtml.
   
5. Now open the cshtml file.