Post
Ask Question

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.

Employee Controller

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

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.
    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.
    Providing the 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. 
    View's folder
  5. Now open the cshtml file. 

In the above example, we have created a form in the controller. We will now remove this complete form's code and put it inside the cshtml file or in the view.

Index. cshtml

@{
    Layout = null;
}
   
<!DOCTYPE html>
   
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        <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='60' 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>
    </div>
</body>
</html>

Now the controller, index action, or index method will not return a string anymore, they will return a ViewResult so now in HomeContoller.cs will be.

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

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

Output

Index

Now after adding the view we can easily manage our form.

Here we are returning ViewResult, but we can also return ActionResult.

Why ActionResult?

We can return an ActionResult because the ViewResult class is inherited from ViewResultBase and the ViewResultBase class is inherited from ActionResult so we can return an ActionResult also.

Action result

ActionResult

A controller's action does not return views only. A controller action returns an ActionResult. An ActionResult is what a controller action returns in response to a browser request.

In ASP.NET MVC ActionResult can return the following several types (Reference).

ViewResult Represents HTML and markup.
EmptyResult Represents no result.
RedirectResult Represents a redirection to a new URL.
JsonResult Represents a JavaScript Object Notation result that can be used in an AJAX application.
JavaScriptResult Represents a JavaScript script.
ContentResult Represents a text result.
FileContentResult Represents a downloadable file (with the binary content).
FilePathResult Represents a downloadable file (with a path).
FileStreamResult Represents a downloadable file (with a file stream).


cshtml Files

A .cshtml file is a C# ("C Sharp") HTML file used by a Razor View Engine. An ASP.Net view engine generates an HTML file for the client. In ASP.NET our complete code is ASP.NET code but Razor reads .cshtml files. In this file, we can write C# code as well as HTML code. The HTML code is sent directly to the client and Razor just renders the C# code. On the server side, the C# code is compiled and sent to the browser. We will discuss the .cshtml file more in my later MVC article.


Similar Articles