Designing Layout

We have to add design in our page.

1. Get a basic design template using bootstrap in this link. https://drive.google.com/open?id=0Bz2kPdGo45obQzVLUXoxc2pMeVE
2. Extract it to our comicbookgallery root folder.
3. Take a look at those folders.
4. Click "Show All Files" in SOlution Explorer.
5. Right-click and choose "Include in Project".

Let's take a look at _Layout.cshtml inside Shared Folder in View Folder.

1. It uses ViewBag.Title in Title div.
2. It uses @Html.ActionLink. The action link method is one of the collections of HTML helper methods that we can use in our view to generate HTML markup.
3. Moving down, we can see a function called RenderBody(). This method used to tell MVC where we'd like to have the content included. This allows us to separate layout that is common to all views from layout that is specific to a single view.

Now, let's link our work with _Layout class.

1. Inside Detail in View class, change the Layout to Layout = "~/Views/Shared/_Layout.cshtml";
2. Add ViewBag.Title="Comic Book Detail"; below those line.
3. Remove all html main tags.

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Comic Book Detail";
}

<h1>@ViewBag.SeriesTitle</h1>
<h2>Issue #@ViewBag.IssueNumber</h2>

<h5>Description:</h5>
<div>@Html.Raw(ViewBag.Description)</div>

@if (ViewBag.Artists.Length > 0)
{
    <h5>Artist:</h5>
    <div>
        <ul>
            @foreach (var artist in ViewBag.Artists)
            {
                <li>@artist</li>
            }
        </ul>
    </div>
}