DEV Community

Cover image for Footer TagHelper
Karen Payne
Karen Payne

Posted on

Footer TagHelper

#aspdotnet #aspnet #csharp #webdev

Introduction

Learn how to use a custom TagHelper for producing a consistent footer with properties for the application name, author name, and copyright year.

Source code

example of custom footer

Hard-coded properties

<app-footer app-name="Payroll System" author-name="John Doe" year="2025" />
Enter fullscreen mode Exit fullscreen mode

Read from appsettings.json

<app-footer app-name="@FooterOptions.Value.ApplicationName"
            author-name="@FooterOptions.Value.AuthorName"
            year="@FooterOptions.Value.CopyrightYear">
</app-footer>
Enter fullscreen mode Exit fullscreen mode

Other options

<app-footer app-name="Payroll System" include-author="false" />
<app-footer app-name="Payroll System" author-name="John Doe" year="2030" />
<app-footer app-name="Payroll System" author-name="John Doe" />
Enter fullscreen mode Exit fullscreen mode

AppFooterTagHelper

AppFooterTagHelper is in a class project, which makes TagHelper available to any ASP.NET Core project. If needed for more than one Visual Studio solution, consider creating a local NuGet package.

[HtmlTargetElement("app-footer", TagStructure = TagStructure.NormalOrSelfClosing)]
public sealed class AppFooterTagHelper : TagHelper
{
    private const string DefaultAppName = "TODO"; // Replace "TODO" with your default application name
    private const string DefaultAuthorName = "Karen Payne"; // Replace "Karen Payne" with your default author name

    public string? AppName { get; set; }
    public bool IncludeAuthor { get; set; } = true;  // defaults to true
    public string? AuthorName { get; set; }
    public int? Year { get; set; }
    public string Class { get; set; } = "footer border-top text-muted";
    public string ContainerClass { get; set; } = "container";

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "footer";
        output.TagMode = TagMode.StartTagAndEndTag;

        // classes
        output.Attributes.SetAttribute("class", Class);

        var year = Year ?? DateTime.UtcNow.Year;

        // Resolve AuthorName fallback
        var author = string.IsNullOrWhiteSpace(AuthorName) ? DefaultAuthorName : AuthorName;
        var authorHtml = IncludeAuthor
            //? $" <span style=\"margin-left: 5px;\">by <strong>{HtmlEncoder.Default.Encode(author)}</strong></span>"
            ? $" <span style=\"margin-left: 5px;\">by {HtmlEncoder.Default.Encode(author)}</span>"
            : string.Empty;

        // Resolve AppName fallback
        var app = HtmlEncoder.Default.Encode(
            string.IsNullOrWhiteSpace(AppName) ? DefaultAppName : AppName
        );

        output.Content.SetHtmlContent(
            $"<div class=\"{ContainerClass}\">&copy; {year}{authorHtml} - {app}</div>"
        );
    }
}
Enter fullscreen mode Exit fullscreen mode

Before using

Add a project reference to a front-end project for FooterLibrary

In _ViewImports.cshtml add the following line

@addTagHelper *, FooterLibrary
Enter fullscreen mode Exit fullscreen mode

Change DefaultAuthorName which can be the author name or company name.

Add the following rule to site.css

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

Reading values from appsettings.json 

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "FooterDetails": {
    "ApplicationName": "Demo",
    "AuthorName": "John Doe",
    "CopyrightYear": 2024
  }
}
Enter fullscreen mode Exit fullscreen mode

Add the following two lines at the top of _Layout.cshtml

@using Microsoft.Extensions.Options
@inject IOptions<FooterLibrary.FooterDetails> FooterOptions
Enter fullscreen mode Exit fullscreen mode

Which is required for:

<div class="container">
    <main role="main" class="pb-3">
        @RenderBody()
    </main>
</div>

@* see style in site.css *@
<app-footer app-name="@FooterOptions.Value.ApplicationName"
            author-name="@FooterOptions.Value.AuthorName"
            year="@FooterOptions.Value.CopyrightYear">
</app-footer>
Enter fullscreen mode Exit fullscreen mode

In Program.cs add builder.Services.Configure<FooterDetails> to read values from appsettings.json

public class Program
{
    public static void Main(string[] args)
    {
        var builder = WebApplication.CreateBuilder(args);

        // Bind FooterDetails from appsettings.json
        builder.Services.Configure<FooterDetails>(
            builder.Configuration.GetSection(nameof(FooterDetails)));
Enter fullscreen mode Exit fullscreen mode

Project template

  1. Consider creating a local NuGet package for FooterLibrary
  2. Create a base ASP.NET Core project which has a dependency to FooterLibrary`
  3. Set up the footer
  4. Add the CSS rule to site.css as described above

Create a project template which has the footer set up.

Microsoft documentation

Summary

A custom TagHelper has been provided to create a consistent footer, along with sample source code. Feel free to make changes if needed, for example, modifying the code to include an email address for perhaps a help desk.

Top comments (0)