Using Code First with an Existing Database

As mentioned, Code First is an approach to using Entity Framework where the model is first developed in code classes. This is an ideal approach for new projects where no database exists; however, from EF 6.1 upward, Code First can also be used with existing databases by generating classes based on the existing database. This topic is covered in depth later in the book.

Viewing the Web Site

From the Visual Studio menu, choose Debug ➤ Start Without Debugging and the web site will open in the browser you have assigned Visual Studio to use, as shown in Figure 1-4. To change the browser, choose a different browser from the drop-down list in the second line of the Visual Studio menu bar.

Figure 1-4. The automatically created MVC web site

How the Home Page Works

The home page in Figure 1-4 is shown because the web site made a request to the URL /Home/Index. Although this is not shown in the web browser’s address bar, it’s used by default when the application launches. If you add /Home/Index to the end of the URL, the page displayed will not change.

The URL tells the MVC web application that a request has been made to the Index action method of the Home Controller. The method is found in the HomeController.cs file, as shown in the following code listing. This method contains a simple line of code return View() and this tells the web site to open the corresponding view file. In this case, the corresponding view file is found under ViewsHomeIndex.cshtml. By convention, this is how ASP.NET MVC projects work with the default view for a controller method found in the ViewsControllerNameMethodName.cshtml path. It is of course possible to make a method open a different view and we will see how to do this later in the book. The contents of the file ControllersHomeController.cs including the Index method is as follows:

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

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

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

The ViewsHomeIndex.cshtml file contains the HTML corresponding to the text shown in the home page. In this file you will see several HTML elements with classes assigned to them. The classes are Bootstrap CSS classes and they control the layout of the home page. I will cover some of the ways to style Bootstrap later in the book plus a comprehensive review of how to restyle the web site completely without Bootstrap.

The About and Contact Pages and ViewBag

Ignoring the links for Register and Login, there are links to two other pages in the web site menu: About and Contact. These links target the URLs /Home/About and /Home/Contact.

These two pages follow the same convention as before, meaning that the About and Contact methods of the HomeController.cs are called and they load the views found in ViewsHomeAbout.cshtml and ViewsHomeContact.cshtml, respectively.

If you examine the two methods for About and Contact in the previous code listing, you will see that there are some additional lines of code that make use of the ViewBag.

The About method includes the code ViewBag.Message = "Your application description page."; and the Contact method includes ViewBag.Message = "Your contact page."; both of which are then displayed in the respective views.

For example, if you look at the code for the About.cshtml file, it contains the code <h3>@ViewBag.Message</h3>, which the view uses to display the contents of the ViewBag’s Message property. When this is displayed by a web browser, the page renders showing the string "Your application description page", as shown in Figure 1-5.

Figure 1-5. The About view displaying information passed from the controller via the ViewBag

ViewBag is a dynamic object and is one way of passing data to a view. It is not recommended for passing several pieces of data into a view because of its dynamic nature. ViewBag is not strongly typed, meaning that it can contain any random data and, therefore, when you’re using it in coding a view, there is no IntelliSense available. The recommended practice is to use a strongly typed view model to pass several pieces of data to a view at once. I cover this in Chapter 3.

Routing: How the Web Site Knows Which Controllers and Methods to Request

ASP.NET MVC uses ASP.NET routing to control how the application translates URLs. It also controls which controllers and methods the incoming HTTP requests target and hence which views to display. To explain how this works we’ll examine the default route that was set up when we created the application.

Open the file RouteConfig.cs file, which is located in the App_Start folder. The code contained in this file defines rules that the application uses to target the correct controller and method depending on the URL entered into the web browser. The code listing is as follows:

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

namespace BabyStore
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id =
                    UrlParameter.Optional }
            );
        }
    }
}

The code that we are interested in is the routes.MapRoute method. This defines a route named “Default” as per line 17. The code url: "{controller}/{action}/{id}" instructs the site to expect the controller name first, followed by the action (which matches up with the method name in the controller), and then a third segment of the URL called id. We’ll cover the id segment shortly but first we’ll focus on the controller and action segments.

The third entry named defaults tells the application what to target when there is no controller or action specified in the URL. This default entry tells the application to target the Index method of the Home Controller, which in turn calls the ViewsHomeIndex.cshtml page. This is why this page loads when the site is run with any additional parameters in the URL.

Using the Optional URL ID Parameter

To complete this very simple overview of the default routing setup, we’ll alter the site to use the optional ID parameter.

Alter the About method of the ControllersHomeController.cs file so that it reads as follows:

public ActionResult About(string id)
{
    ViewBag.Message = "Your application description page. You entered the ID " + id;                

    return View();
}

Here we are telling the method to process a parameter passed into it called id. This corresponds with the name of the optional third parameter in the default route. The ASP.NET MVC model binding system is used to automatically map the ID parameter from the URL into the id parameter in the About method. We will cover model binding in more detail later.

Now start the web site without debugging and navigate to the About page. Now add an ID onto the end of the URL such as http://localhost:58735/Home/About/7.

This will then process 7 as the value of the ID parameter and pass this to the About method, which then adds this to the ViewBag for display in the view. The result should be as shown in Figure 1-6.

Figure 1-6. Applying and processing an optional ID URL parameter

ASP.NET MVC also automatically matches any parameters in the HTTP request to a method parameter if they have the same name. The matching is case insensitive. For example, entering the URL http://localhost:58735/Home/About?id=7 will return the same result as previously, because the id parameter in the query string is automatically mapped to the id parameter in the About method. This is covered in more detail in Chapter 2.

The Purpose of the Layout Page

You will have noticed that when we navigate to different pages, the web site shows the same heading and navigation menu. This is achieved by using a layout page. The layout page used is contained in the file ViewsShared\_Layout.cshtml as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("∼/Content/css")
    @Scripts.Render("∼/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-
                    target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new {
                    @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("∼/bundles/jquery")
    @Scripts.Render("∼/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

If you open this file, you will see that it contains HTML elements containing the site navigation. The @RenderBody() code in the file is responsible for displaying the content of the view being requested.

The web site knows to use the ViewsShared\_Layout.cshtml file as the main layout page because of the contents of the Views\_ViewStart.cshtml. The MVC framework treats this file as if it belongs to each view and therefore effectively adds its contents to the start of every view. The following code listing shows the content of the _ViewStart.cshtml file, which specifies the layout page to use.

@{
    Layout = "∼/Views/Shared/_Layout.cshtml";
}