MVC - Views

The MVC Views folder stores the files (HTML files) related to the display of the application (the user interfaces). These files may have the extensions html, asp, aspx, cshtml, and vbhtml, depending on the language content.
The Views folder contains one folder for each controller.


The ASP.NET MVC Framework allows building a Web application as a composition of three roles: Model, View, and Controller. The View role can be implemented in several ways. The popular view engines used in the ASP.NET MVC 3 Framework are the Razor View Engine and the Web Forms (ASPX) view engine. Other than that a View can be implemented by accessing Controller methods using jQuery.
    In this section you're going to modify the HomeController class to use view template files to cleanly encapsulate the process of generating HTML responses to a client.
You'll create a view template file using the Razor view engine. Razor-based view templates have a .cshtml file extension, and provide an elegant way to create HTML output using C#. Razor minimizes the number of characters and keystrokes required when writing a view template, and enables a fast, fluid coding workflow.

Let's change the Index() method in HomeController to return a list of city names. Since city names are strings, return List<string>. Get rid of id and name parameters.public List<string> Index(){
    return new List<string>()
    {
        "Bangalore",
        "New York",
        "Neveda",
        "Tokyo"
    };} 

Run the application and notice that the output is not as expected. System.Collections.Generic.List`1[System.String]
To correct this problem, let's add a view to our project.1. Right click on the Index() function2. Click on "Add View"3. Notice that, the view name in "Add View" dialog box matches the name of the controller action method4. Select "Razor" as the view engine5. Leave the rest of the defaults as is, and click "Add" button
Make the following modifications to the Index() function of the HomeController class, so that, the HomeController returns a view instead of List<string>.// Change the return type from List<string> to ActionResultpublic ActionResult Index(){
    // Store the list of Cities in ViewBag.  
    ViewBag.Cities = new List<string>()
    {
       "Bangalore",
        "New York",
        "Neveda",
        "Tokyo"
    };
    // Finally return a view
    return View();}
We will discuss ViewBag & ViewData, and the differences between them in our next video session. For now, understand that, ViewBag & ViewData is a mechanism to pass data from the controller to the view. 
Please Note: To pass data from controller to a view, It's always a good practice to use strongly typed view models instead of using ViewBag & ViewData. We will discuss view models in a later posts.
Now, copy and paste the following code in "Index.cshtml" view@{
    ViewBag.Title = "Cities List";}
<h2>Cities List</h2>
<ul>
@foreach (string strCity in ViewBag.Cities){
    <li>@strCity</li>}
</ul>
Please Note: We use "@" symbol to switch between html and c# code. We will discuss razor views and their syntax in a later posts.