03-Step03.md

Step 3 - Adding a View

Let's customise the look and feel of our Music Store.

1. Open the _Layout.cshtml file in the Views\Shared folder and find the below code snippet.

<ul class="navbar-nav flex-grow-1">
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
    </li>
</ul>

2. Go ahead and write a prompt after the Privacy link that inserts a link to the StoreController's Index action. The resulting code should look similar to this sample.

<ul class="navbar-nav flex-grow-1">
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Store" asp-action="Index">Store</a>
    </li>
</ul>

3. Go ahead and run the solution and check that the Store link appears and works as expected.

Styling our website

Now we've modified the view, let's style our site. We don't use Copilot for this - we could, but let's not not ask Copilot to do CSS for us 😂.

You can open the site.css file from the GitHub MVC-Music-Store repository.

Once open, copy the contents and paste them into the the site.css file that you can find in the solution at wwwroot\css\site.css.

Next, let's add the images required by the CSS.

Create a new images subfolder in the wwwroot folder.

Copy the image files from the GitHub-Music-Store repository.

Find the two image references in the CSS by searching in the site.css file for "/Content/Images/image-filename" and replace the path with just "images/image-filename".

Your CSS should look similar to the below

#header {
    float: left;
    width: 100%;
    border-bottom: 1px dotted #5D5A53;
    margin-bottom: 10px;
}

    #header h1 {
        font-size: 18px;
        float: left;
        background: url(images/logo.png) no-repeat;
        padding: 45px 0px 5px 0px;
    }

#promotion {
    height: 300px;
    width: 700px;
    background: url(images/home-showcase.png) no-repeat;
}

You can save any open files and then close the tabs you have open.

---

Previous - Securing your code | Next - Adding a Model