Expand the Views folder, and then expand the Home folder. Note the three files with the .cshtml file extension.

When the View() method is called in a controller's action method, ASP.NET Core MVC looks in the Views folder for a subfolder with the same name as the current controller, that is, Home. It then looks for a file with the same name as the current action, that is, Index, About, or Contact.

In the Index.cshtml file, note the block of C# code wrapped in @{ }. This will execute first and can be used to store data that needs to be passed into a shared layout file:

    @{ 
      ViewData["Title"] = "Home Page"; 
    } 

Note the static HTML content in several <div> elements that uses Bootstrap for styling.

There is a file named _ViewStart.cshtml that gets executed by the View() method. It is used to set defaults that apply to all views.

For example, it sets the Layout property of all views to a shared layout file:

    @{ 
      Layout = "_Layout"; 
    } 

In the Shared folder, open the _Layout.cshtml file. Note that the title is being read from the ViewData dictionary that was set earlier in the Index.cshtml view.

Modify the title to have the suffix, My First ASP.NET Core App, as shown in the following markup:

    <title>@ViewData["Title"] - My First ASP.NET Core App</title> 

Note the rendering of common styles to support Bootstrap and the two sections. During development, the fully commented and nicely formatted versions of CSS files will be used. For staging and release, the minified versions will be used:

    <environment names="Development"> 
      <link rel="stylesheet"
    href="~/lib/bootstrap/dist/css/bootstrap.css" /> 
      <link rel="stylesheet" href="~/css/site.css" /> 
    </environment> 
    <environment names="Staging,Production"> 
      <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/ 
                 bootstrap/3.3.5/css/bootstrap.min.css"  
        asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"  
        asp-fallback-test-class="sr-only"  
        asp-fallback-test-property="position"  
        asp-fallback-test-value="absolute" /> 
      <link rel="stylesheet"  
            href="~/css/site.min.css"  
            asp-append-version="true" /> 
    </environment> 

Note the rendering of hyperlinks to allow users to click between pages using the navigation bar at the top of every page. The <a> elements use "tag helper" attributes to specify the controller name and action name that will execute when the link is clicked:

    <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
        <li><a asp-controller="Home" asp-action="Index">Home</a></li> 
        <li><a asp-controller="Home" asp-action="About">About</a></li> 
        <li><a asp-controller="Home"  
               asp-action="Contact">Contact</a></li> 
      </ul> 
    </div> 

Note the rendering of the body:

    @RenderBody() 

Note the rendering of script blocks at the bottom of the page so that it doesn't slow down the display of the page:

    <environment names="Development"> 
      <script src="~/lib/jquery/dist/jquery.js"></script> 
      <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> 
      <script src="~/js/site.js" asp-append-version="true"></script> 
    </environment> 
    <environment names="Staging,Production"> 
      <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-
    2.1.4.min.js" asp-fallback-src="~/lib/jquery/dist/jquery.min.js" 
                  asp-fallback-test="window.jQuery"> 
      </script> 
      <script
    src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min
    .js" asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js" 
    asp-fallback-test="window.jQuery && window.jQuery.fn &&
    window.jQuery.fn.modal"> 
      </script> 
      <script src="~/js/site.min.js" asp-append-version="true"> 
      </script> 
    </environment> 

You can add your own script blocks into an optional defined section named scripts:

    @RenderSection("scripts", required: false) 

In the wwwrootcss folder, open the site.css file.

Add a new style that will apply to an element with the newspaper ID like this:

    #newspaper { 
      column-count: 3; 
    } 

To improve the IntelliSense when writing a view, you can define the type the view can expect using a @model directive at the top.

Back in the Index.cshtml view, enter the following code as the first line of the file:

    @model Packt.CS7.HomeIndexViewModel 

Now, whenever we enter @Model in this view, the IntelliSense will know the correct type and will provide IntelliSense.

In Index.cshtml, delete all the <div> elements and replace them with this markup:

    <div class="row"> 
      <div class="col-md-12"> 
        <h1>Northwind</h1> 
        <p class="lead">We have had @Model.VisitorCount
           visitors this month.
        </p> 
        <h2>Products</h2> 
        <div id="newspaper"> 
          <ul> 
          @foreach (var item in @Model.Products) 
          { 
            <li><a asp-controller="Home"  
                   asp-action="ProductDetail"  
                   asp-route-id="@item.ProductID"> 
                @item.ProductName costs  
                @item.UnitPrice.Value.ToString("C") 
            </a></li> 
          } 
          </ul> 
        </div> 
      </div> 
    </div> 

Note how easy it is to mix static HTML elements such as <ul> and <li> with C# code to output the list of product names.

Note the <div> element with the id attribute of newspaper. This will use the custom style that we defined earlier, so all the content in that element will display in three columns.

In Visual Studio 2017, press Ctrl + F5.

In Visual Studio Code, enter the command dotnet run, and then run Chrome and navigate to http://localhost:5000/.

The home page will look as shown in the following screenshot: