Modifying And Extending Website Contents - ASP.NET Core 7 Part 5

ASP.NET Core 7: Modifying And Extending Website Contents

Part 5. ASP.NET Core 7: Modifying and Extending the Website Contents

This is part 5 of the 'Web App Development Beginners Guide' tutorial series. In this tutorial series, we will learn how to build a functional Web Application with individual account user login. 

The previous tutorial can be found here: Part 4. ASP.NET Core 7: Examining The Project Structure  

In this tutorial, we will use the project we created in the first tutorial: 'ASP.NET Core 7: Creating A Razor Pages Web Application - Step-By-Step Guide.'

First, let's take a look at _Layout.cshtml.

. .

Code 1: _Layout.cshtml

For a more detailed explanation of Razor syntax, you can visit the Microsoft documentation.

The actual page content is rendered to line 36 using the @RenderBody() function in the code above. For example, when a user goes to the home page, the Razor engine inserts the content of the index.cshtml file into this line. @RenderBody() is a Razor syntax that renders the content into the layout.

On line 29 of the code above, the element <partial name="_LoginPartial" /> indicates that it is injecting a partial page into this position. The _LoginPartial.cshtml page contains more than 20 lines of code. This approach reduces the number of lines in the _layout.cshtml page, making the code easier to read and manage.

Here <partial> is a Razor tag helper

We will be modifying the footer next. Currently, the footer only displays the project name and privacy link in a single line. We will add additional information to the footer, but instead of adding it directly to this layout, we will create a separate partial page and include it in the footer.

Add _Footer.cshtml Partial Page

Right-click on the Shared folder and select "Add" from the context menu, then select "New Item."

Figure 1: Add new item

The "Add New Item" wizard window will appear. Type "_Footer.cshtml" into the name textbox, then click the "Add" button.

Figure 2: Adding Razor view for partial page

The page will be added to the Shared folder, and the file will open in the editor pane.

Figure 3: Template-generated view code

We do not need this code as shown in Figure 3, for now just delete all and type the following HTML code: 

<div class="row">
    <div class="col-12 col-md-6 col-lg-4">
        <ul class="contact-info">
            <li>Local 12345678</li>
            <li>International +1234567890</li>
            <li><a href="mailto:admin@mydomain.com"> admin@mydomain.com</a></li>
            <li>2 abc Road, MySuburb</li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp; NSW 2570</li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp; Australia</li>
        </ul>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
        <ul class="footer-other-links clearfix">
            <li><a href="#">How much will it cost?</a></li>
            <li><a href="#">Frequently asked questions </a></li>
            <li><a href="#">Customer tesimonials</a></li>
            <li><a href="#">Recent works </a></li>
            <li><a href="#">Help &amp; Support Center</a></li>
            <li><a href="#">Get a free quote </a></li>
            <li>Scalable</li>
        </ul>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
        <ul class="footer-other-links clearfix">
            <li><a href="#">How much will it cost?</a></li>
            <li><a href="#">Frequently asked questions </a></li>
            <li><a href="#">Customer tesimonials</a></li>
            <li><a href="#">Recent works </a></li>
            <li><a href="#">Help &amp; Support Center</a></li>
            <li><a href="#">Get a free quote </a></li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="col">
        <div class="privacy">
            <span class="copyright text-wrap"> &copy; 2022 - @DateTime.Now.Year - Owner's Business Services Pty Ltd </span>
            &nbsp; | &nbsp;
            <a class="TermsCss">Terms Of Use</a>&nbsp; |&nbsp;
            <a class="TermsCss" asp-area="" asp-page="/Privacy">Privacy Statement</a>
        </div>
    </div>
</div>
 

Code 2: _Footer.cshtml

Save the file using the save button on the top toolbar, or use Ctrl + S on the keyboard.

Figure 4: Save the footer file.

Now, back in the _Layout.cshtml file, add the following line just below the copyright line: <partial name="_Footer" />.

Save the file using the save button on the top toolbar or using Ctrl + S on the keyboard. The footer section should now look like this:

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2023 - RazorPages.Core07.Identity - <a asp-area="" asp-page="/Privacy">Privacy</a>
            <partial name="_Footer" />
        </div>
    </footer>

Code 3: Modified footer

Now run the app without debugging using the top toolbar or using Ctrl + F5 on the keyboard.

Figure 5: Website after the modified footer

Now the website looks like it does in Figure 5. However, the footer lists we added don't look very nice. To make them more attractive, we need to use CSS. This tutorial series is not focused on CSS, but we will do a minor decoration to show how it can be done in Visual Studio 2022. To do this, we will adjust the gap between the lines in the footer.

 

  

Figure 6: _Layout.schtml.css

When you click on _Layout.cshtml.css, it will open in the editor pane. Scroll down to the section where the footer CSS class is defined.

    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        white-space: nowrap;
        line-height: 60px;
      }

Change the line-height to 34px and then save the project again. 

Additionally, please note that the original line "© 2023 - RazorPages.Core07.Identity - Privacy" is still present just above the new footer values. To remove it, open the _Layout.cshtml file and delete the line. Save the file and run the app again using either Ctrl + F5 on the keyboard or the toolbar command.

Now the site will look like it does in Figure 7 below.

Figure 7: Modified Website

Note: This CSS file, _Layout.cshtml.css, is not defined in the <head> section or anywhere else in the project. In ASP.NET Core projects, these isolated files are compiled into a single file called projectname.styles.css. In our case, RazorPages.Core07.Identity.styles.css. This new feature is called "CSS Isolation". More detailed information can be found in the following articles: CSS Isolation in ASP.NET Core 6.0   and CSS Isolation In Razor Pages.

In Code 2: _Footer.cshtml above, the contact info, such as the address, telephone number, and business name, are hard-coded. Any time the website owner wants to update those details, they need to contact a developer to modify it. The best way to do this is to store them in a database or configuration file.

Later in this tutorial series, we will learn how to store this information in a database. For now, we will use the second method of storing them in a configuration file. ASP.NET Core already has the appsettings.json file for application configuration purposes, and we will use it to store the business contact information for the owner.

We will learn how to do that in the next tutorial, and once completed, the contact information shown in Figure 5 and Figure 7 above will be populated from the values in appsettings.json. 

This completes the "Part 5: ASP.NET Core 7: Modifying And Extending Website Contents" tutorial.

Summary

In this tutorial, we created a _Footer partial page to display the business contact details, and modified the _Layout page to include the _Footer partial page. We also added some basic CSS styling to make the footer look nicer.

By following this tutorial, you should now have a good understanding of how to use partial pages to extend the website's content in an ASP.NET Core Razor Pages web application using Visual Studio 2022.

Next,  Part 6: ASP.NET Core 7: Modifying And Extending The Application.