Why Views

In the previous section we have created a simple controller and an action method, the controller action method was returning a string and then the string was being displayed to the browser and there was no UI code was involved into it.


Nowadays almost all the web applications need a nice and interactive UI part which contains the HTML.

The view is responsible for providing the user interface (UI) to the user.


In MVC when we request for a page or URL, the controller takes the action on that request and it executes the appropriate logic on it. Once the operation gets completed the controller displays the appropriate view to the user.

If you are familiar with file-based web frameworks like asp.net, you must have noticed that in asp.net you can access the web pages directly, but in MVC this concept does not work for views. We can not access the views directly by putting the URL of it in the browser. In asp.net MVC the views become available to the user by using controllers.


In the previous section, we have created a simple MVC application. In that application, we got a HomeController a Views section with it. Using that application, let understand a simple view which does not take any information from the controller.

Let's go to /Views/Home and open Index.cshtml file which is shown below.

Example

@{
    ViewBag.Title = "Home Page";
}
 
<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>
 
<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>

If you will notice in the above code, you will find that most part of it contains simple HTML except a tiny part on the top of this page which sets the title of the page.

HomeController.cs

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

Let's browse this page and see the output.

So in this example, we have made a request to the controller and it has returned a view that is really simple and it is containing just some static HTML. Let's understand that how we can pass the data to the view in the next section.