Lesson 7 - Modifying the MVC template in ASP.NET Core

In the previous lesson, Data processing and validations in ASP.NET Core MVC, we explained how to process form data and validations. From today's ASP.NET Core tutorial, we're going to start working on a simple blog with an article database and administration.

Creating a project

We already know that, besides the empty project, we can also create a Visual Studio project where basic things such as templates, MVC folders, or the infamous cookie message are already prepared. Today, we're going to even further.

Create a new ASP.NET Core Web Application named AspBlog. At the top of the window, you can set the ASP.NET Core version you want to use. The course is written for versions 2.1 and higher. When selecting the template, we'll choose Web Application (Model-View-Controller) and set the authentication method using the "Change Authentication" button to Individual User Accounts.

The ASP.NET Core MVC template structure

In the Solution Explorer, we see a relatively complicated project structure. The structure may differ slightly and will likely vary depending on the particular Visual Studio version. Let's describe it roughly at least.

The wwwroot folder contains the static (invariant) content of the website. Visual Studio has copied Bootstrap to the lib folder (the CSS framework for simple styling using pre-made styles) and the popular jQuery JavaScript framework that ASP.NET Core uses mainly for validations. We can save our own JavaScript files to the js folder. In the css folder, there's a site.css file, which is already styling our specific page, we'll add our styles there. There's also the images folder for our images.

And for the individual pages, we have HomeController there again with views for the homepage, contact page, and about page.

We'll store our view models in the Models folder. You may already remember that these are object data containers that we then pass to the View. Compared to the ViewData and ViewBag collections, view models have the advantage of static typing, we'll use them especially for logging users in and registering new users, see further in the course.

In the Views folder, we have a Home subfolder for controller views as well as shared parts of the web template. You can notice the _Layout.cshtml template, which contains a common HTML template and wraps individual subpages. When we have multiple controllers in our app, each of them will also have its own folder for its views.

The application looks like it did last time:

There's a home page with a carousel ready, a cookie notification, navigation menu below it, and more. The website is even responsive. Although we could change the appearance of the website quite easily with a ready-made scheme, in practice, you'll usually get a finished design from a coder/graphic designer and you'll have to use it for your project. This is what we'll do in the rest of today's lesson.

By the way, you've certainly noticed that Microsoft uses quite a lot of open-source technologies in the project and doesn't come up with its own alternatives, which is probably good.

Changing the template

We won't go far for the template, but borrow it from the Websites step by step course. Download the finished website from the last lesson (Uploading the website to the Internet). It's a simple static website in HTML 5 and CSS 3. If there's anything you don't understand in the code, see this course for more details.

At least, we'll adjust the website for our purposes by replacing "About me" in the navigation menu with "Articles". You can even modify the content and appearance slightly as you like. I've done the following:

We'll set this content and appearance to our ASP.NET Core project now, step by step.

Copying files

Copy the images from the images folder in the template to the images folder in the wwwroot folder of the project.

We'll go to the site.css file also in the wwwroot folder in the ASP.NET Core project, where we delete the body tag's styling (2 selectors), and leave the rest. We'll now add all the styles from the style.css file from the HoBi website to this file. In site.css, it's now necessary to overwrite the image paths, such as the line:

background: url('images/gray_background.png') #1c2228;

will become:

background: url('../images/gray_background.png') #1c2228;

We have to add two dots because the style is in the css folder and the images folder is one folder above (one dot indicates the current folder, two dots the parent folder). There are about 4 similar lines so edit them all.

Finally, in the styles, we'll extend the template so the default content from the ASP.NET template would fit there. In the #centerer selector, we'll set width: 1200px and on the contrary, remove the width setting in the article section selector.

Modifying the layout

Let's move to Views/Shared/_Layout.cshtml. We already know that this layout contains a basic HTML structure (header, menu, footer). Inside, the active View is rendered, i.e. a contact page. This functionality is achieved using the _ViewStart.cshtml file where the layout file is specified.

We'll now modify _Layout.cshtml so that it looks like index.html from the HoBi's template. We'll only edit the <body> part, remove <nav> with the navigation menu in it, <footer> and other visible content (<hr> and so on).

We'll now paste the <body> contents from the HoBi's template (from index.html) into <body>. We mustn't forget to move the RenderBody() call to the part where the content is rendered. In a similar way, we can also print the title to <h1> heading using @ViewData["Title"] and links to the menu.

The <body> element will now look like as follows in the layout:

...
<body>
    <partial name="_CookieConsentPartial" />
    <header>
        <div id="logo"><h1>HoBi</h1></div>
        <nav>
            <ul>
                <li><a asp-controller="Home" asp-action="Index">Home</a></li>
                <li><a asp-controller="Articles" asp-action="Index">Articles</a></li>
                <li><a asp-controller="Home" asp-action="Skills">Skills</a></li>
                <li><a asp-controller="Home" asp-action="References">References</a></li>
                <li><a asp-controller="Home" asp-action="Contact">Contacts</a></li>
            </ul>
        </nav>
    </header>

    <article>
        <div id="centerer">
            <header>
                <h1>@ViewData["Title"]</h1>
            </header>

            <section>
                <div class="container body-content">
                    @RenderBody()
                </div>
            </section>
            <div class="clear"></div>
        </div>
    </article>

    <footer>
        Created by &copy;HoBi for <a href="https://www.ict.social">ICT.social</a>
    </footer>


    ...
    Keep the loading of the scripts here as Visual Studio has generated it into the template.
    It starts probably with <environment include="Development"> ...
    ...
</body>

Note that the navigation links to controller methods use the asp-controller and asp-action attributes. When we run the app now, we'll see that the subpages are actually being rendered into our template:

Modifying content pages

First, let's move to Views/Home/Index.cshtml where we'll delete everything except the title setting at the beginning of the file. We'll set the title to About Me. Now we'll move here the contents of the <section> element from the HoBi's template. Don't forget to change the image paths. Index.cshtml looks like this:

@{
    ViewData["Title"] = "About me";
}

<p>My name is John Bittner and this is my personal blog. Currently, I work as an HTML/JS developer for a web studio. Moreover, I work as an editor for the ICT.social social network.</p>

<p class="center"><img src="~/images/avatar.png" alt="HoBi the programmer" /></p>

<p>The blog is programmed in C# .NET using the ASP.NET Core MVC web framework. It communicates with the database using EntityFramework and this is how the articles are displayed. You can try it in the Articles tab. It also contains a simple administration with logging in.</p>

<p>The blog has been created as an example for a programming course on the <a href="https://www.ict.social">ICT.social</a> social network, where you can find a detailed tutorial how to create it. It's an extension of a static portfolio made by HoBi the web designer.</p>

Notice we use a tilde (~) to get the path to wwwroot where the image folder is located.

The result:

Similarly, edit the Contact.cshtml contact page:

@{
    ViewData["Title"] = "Contact";
}

<p>
    <img src="~/images/email.png" alt="email" class="left" />
    If you have any comments, please email me at <strong>hobi (at) hobi (dot) com or use the form below</strong>.
</p>

<p class="center">
    <iframe frameborder = "0" scrolling = "no" width = "500px" height = "220px"
            src = "https://www.ict.social/api/Service-MailForm/5b5a8cdab989b5e4833544f23501910b"></iframe>
</p>

We won't need the About.cshtml and Privacy.cshtml pages, so we'll remove them from Views, as well as their methods in HomeController.

Let's add 2 new Views to the Home folder: References.cshtml and Skills.cshtml and fill them with the contents from the template.

The contents of References.cshtml will be as follows:

@{
    ViewData["Title"] = "References";
}

<p>Below, you can find examples of my work. I can offer you custom software development services. </p>

<div id="reference">
    <a href="~/images/calculator_java.png" title="Calculator in Java"><img src="~/images/calculator_java_thumbnail.png" alt="Calculator in Java" /></a>
    <a href="~/images/mines_pascal.png" title="Mines in Pascal" rel="lightbox[reference]"><img src="~/images/mines_pascal_thumbnail.png" alt="Mines in Pascal" /></a>
    <a href="~/images/hobi_web.png" title="Website in HTML and CSS" rel="lightbox[reference]"><img src="~/images/hobi_web_thumbnail.png" alt="Website in HTML and CSS" /></a>
</div>

And in the Skills.cshtml page, the code will be as follows:

@{
    ViewData["Title"] = "Skills";
}

<table id="skills">
    <tr class="center">
        <td>
            <img src="~/images/html.png" alt="HTML" />
        </td>
        <td>
            <img src="~/images/csharp.png" alt="C#" />
        </td>
        <td>
            <img src="~/images/aspnet.png" alt="ASP.NET" />
        </td>
    </tr>
    <tr>
        <td>
            <h2>HTML and CSS</h2>
            <p>I have perfect knowledge of HTML 5, CSS 3, and good knowledge of the jQuery JS framework. I can optimize websites for mobile devices.</p>
        </td>
        <td>
            <h2>C# .NET</h2>
            <p>I have very good knowledge of C# .NET, object-oriented programming and working with relational databases in MS-SQL.</p>
        </td>
        <td>
            <h2>ASP.NET</h2>
            <p>I'm learning the ASP.NET Core MVC technology upon which this blog is built. I know how to work with EntityFramework and create dynamic websites.</p>
        </td>
    </tr>
</table>

We won't deal with the articles yet. Add the following methods for these views to HomeController:

public IActionResult Skills()
{
    return View();
}

public IActionResult References()
{
    return View();
}

You can try clicking through the navigation menu, all but the articles should work.

So we have the template ready. In the next lesson, Scaffolding and Entity Framework in ASP.NET Core MVC, we'll display articles from the database. The project with the source codes is, as always, attached to download.

 

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.