ASP.Net MVC View

Introduction: In my previous article we have seen: 

1. How to get 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 receding output screen is nothing but a view. You can see that we are rendering a 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 a 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 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, provide 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. 

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:

 

 

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.

 

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 a 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 Rezor View Engine. An ASP.Net view engine generates a 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.