HCG.RazorComponents 0.1.0

hcg-razor-components

This repository contains a RCL (Razor Class Library) that has Harford County Government specific code and assets to be used in Razor Pages based projects

How to use

The library is hosted as a nuget package at https://www.nuget.org/packages/HCG.RazorComponents/ for the time being. This will either be moved to an account on nuget.org that is specific to Harford County Government or will be moved to our Azure DevOps Artifact server.

Follow the instructions on nuget.org to install for your project

Whats indside

• Bootstrap theme
• Custom partials
• HTML Tags

Bootstrap / CSS:

Inside is a custom bootstrap file that is themed to match Harford County Governments colors to an extent.

In _Layout.cshtml

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="./_content/HCG.RazorComponents/favicon.ico" />
<link rel="stylesheet" href="~/_content/HCG.RazorComponents/css/hcg-bootstrap.min.css" />
<link rel="stylesheet" href="~/_content/HCG.RazorComponents/css/hcg-core.css" />

HTML Tags

This is a dependency on the HTMLTags library

Provided is a simple API for creating forms based on a consistent layout via bootstrap

Eventually there will be a version without a dependecy on bootstrap but for the time, it is necessary to utilize bootstrap

Adding to projects:

_ViewImports.cshtml

@using HCG.RazorTest 
@using HtmlTags
@using HCG.RazorComponents.Tags 
@using HCG.RazorComponents.Pages.Config 
@namespace HCG.RazorTest.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, HtmlTags 
@addTagHelper *, HCG.RazorComponents

Register Conventions in midleware

services.AddHtmlTags(new TagConventions());

Using:

<form asp-controller="Example" asp-action="Submit" method="post"> 

  @Html.FormBlock(x => x.FirstName)
  @Html.FormBlock(x => x.LastName)

  @Html.PrimaryButton("Submit")

</form>

The above renders out to the following based on set TagConventions.cs

<form method="post" novalidate="novalidate">
  <div class="form-group">
    <label for="Data_FirstName" class="control-label">First Name</label>
    <input type="text" data-val="true" name="Data.FirstName" id="Data_FirstName" data-val-required="The FirstName field is required." aria-required="true" class="form-control">
    </div>
  <div class="form-group">
    <label for="Data_LastName" class="control-label">Last Name</label>
    <input type="text" name="Data.LastName" id="Data_LastName" class="form-control">
  </div>

  <button type="button" class="btn btn-primary">Submit</button>

  <input name="__RequestVerificationToken" type="hidden" value="CfDJ8DMEs234-VtNmiXVxaF7El469OFuo-06kO2h53AY54HgoeWqeCdADW1kxa0wxFMFoFJIfqwh4X5c91c9JWWccuDJTYXevqdxHp_joFArHCJfOMIoP_U2uhIchXwVyoNCFxocI2uoeP1bUmMwIN9rL8s">
</form>

Screenshot:

Custom Conventions

You can also add on to the conventions by creating a class in your project and inheriting from it. An example of this is found in the tests called CustomTagConventions.cs

If you are going to create your own, all that needs to be done is the inheritance and invoke the base constructor

In your Startup.cs you must change to something like this:

services.AddHtmlTags(new CustomTagConventions());

Page Extensions

To do...