DEV Community

Cover image for Commitment to improvement
Karen Payne
Karen Payne

Posted on

Commitment to improvement

#aspdotnet #csharp #tutorial #softwaredevelopment

Introduction

Becoming a professional developer requires a commitment to continuous improvement and to thinking ahead.

This means that developers, regardless of their years of experience, should always evaluate new features of their primary programming language, which in this case is C#. Evaluating new features allows a developer to grow, and means using a new feature just because it's new.

While learning new features, a developer needs to learn how to consolidate code to reduce the need to copy it from project to project or from one class to another.

Intent

The goal is to teach how to reduce code repetition by showing the development environment for an ASP.NET Core project.

Written using

Microsoft Visual Studio 2026, Framework NET10

ASP.NET Core: Show environment

Unless a project is a single page, a novice developer will copy the following across pages. If requirements change, this means a developer must change the code in each page.

Microsoft docs Environment Tag Helper

<environment include="Development">
    <div class="row">
        <div class="col-auto badge bg-success ms-3">
            Development
        </div>
    </div>
</environment>

<environment include="Staging">
    <div class="row">
        <div class="col-auto badge bg-warning  ms-4">
            Staging
        </div>
    </div>
</environment>

<environment include="Production">
    <div class="row">
        <div class="col-auto badge bg-danger  ms-4">
            Production
        </div>
    </div>
</environment>
Enter fullscreen mode Exit fullscreen mode

Better evolution

A better idea is to centralize code in a single location using a partial page/view so that code changes are all in one place.

  • Same code as above
  • Same usage: front end code
  • 💡 Hold the control key and clicking on the view traverses to the view code.
  • Partial views are usually located under the Pages\Shared folder

Shows folder structure

Best solution

Create a custom TagHelper in a class project so one or more projects can use it, ensuring consistency across projects.

💡 Consider using an AI tool to create the custom TagHelper. The custom TagHelper below was generated with AI.

Prompt: Create an ASP.NET Core TagHelper for a label showing the current environment.

The resulting code turned out to be greater than expected.

Create a new class project named WebClassLibrary in a Microsoft Visual Studio solution and add the following FrameworkReference to the project file.

WebClassLibrary Source code 

<Project Sdk="Microsoft.NET.Sdk">

   <PropertyGroup>
      <TargetFramework>net10.0</TargetFramework>
      <ImplicitUsings>enable</ImplicitUsings>
      <Nullable>enable</Nullable>
   </PropertyGroup>

   <ItemGroup>
      <FrameworkReference Include="Microsoft.AspNetCore.App" />
   </ItemGroup>

</Project>
Enter fullscreen mode Exit fullscreen mode

Create the TagHelper to meet the requirements above, along as shown below are class style override.

using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Razor.TagHelpers;

namespace WebClassLibrary.TagHelpers;


[HtmlTargetElement("environment-label")]
public class EnvironmentLabelTagHelper(IWebHostEnvironment environment) : TagHelper
{
    public string? Class { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        var environmentName = environment.EnvironmentName;

        output.TagName = "span";
        output.TagMode = TagMode.StartTagAndEndTag;

        var cssClass = string.IsNullOrWhiteSpace(Class)
            ? GetDefaultCssClass(environmentName)
            : Class;

        output.Attributes.SetAttribute("class", cssClass);
        output.Attributes.SetAttribute("title", $"Current environment: {environmentName}");

        output.Content.SetContent(environmentName);

    }


    private static string GetDefaultCssClass(string environmentName)
    {
        return environmentName switch
        {
            "Development" => "badge bg-success",
            "Staging" => "badge bg-warning text-dark",
            "Production" => "badge bg-danger",
            _ => "badge bg-secondary"
        };
    }
}
Enter fullscreen mode Exit fullscreen mode

Build the project to ensure there are no errors.

Next, add a project reference to an ASP.NET Core project to the class project.

Frontend Source code

Open _ViewImports.cshtml and add @addTagHelper line below.

 @addTagHelper WebClassLibrary.TagHelpers.*, WebClassLibrary
Enter fullscreen mode Exit fullscreen mode

@addTagHelper

Add the following to a page:

<div class="container">
    <div class="row">
        <div class="col-2">
            <environment-label></environment-label>
        </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Try with a custom style:

<div class="container">
    <div class="row mt-2">
        <div class="col-2">
            @* 
            provide a custom class which overrides the default style  
            env-label is defined in wwwroot/css/site.css
            *@
            <environment-label class="env-label"></environment-label>
        </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

view results

Perhaps in the footer in _Layout.cshtml

<footer class="border-top footer text-muted">
    <div class="container">
        &copy; @DateTime.Now.Year - Environment Application <environment-label></environment-label>
    </div>
</footer>
Enter fullscreen mode Exit fullscreen mode

Summary

The ideas presented will result in easier-to-maintain code and a consistent user interface. To go one step further, package class projects as local NuGet packages.

See also

Top comments (0)