Basic Usage

Static Components are extensions of ASP.NET Core Tag Helpers.

To build a component you will need two files:

A Razor view (.cshtml file) — the component’s template
A code-behind file (.cshtml.cs) — a class that inherits from StaticComponent

Creating a component

using Microsoft.AspNetCore.Razor.TagHelpers;
using TechGems.StaticComponents;

namespace Sample.Views.Components;

public class HelloWorldComponent : StaticComponent
{
    public HelloWorldComponent()
    {
    }

    public string GreetMessage { get; set; }
}

@using Sample.Views.Components;
@model HelloWorldComponent

<div>Hello world! @Model.GreetMessage</div>

You would then be able to use your component like this:

<h2>Component Example</h2>

<hello-world-component greet-message="Hello there!"></hello-world-component>

Customizing tag names and attributes

It is possible to override the default view route, tag name and parameter name by specifying the route to the razor view of your choosing in the base constructor, like this:

using Microsoft.AspNetCore.Razor.TagHelpers;
using TechGems.StaticComponents;

namespace Sample.Views;

[HtmlTargetElement("hello-world")]
public class HelloWorldComponent : StaticComponent
{
    public HelloWorldComponent() : base("~/Views/HelloWorld.cshtml")
    {
    }

    [HtmlAttributeName("message")]
    public string GreetMessage { get; set; }
}

This should in turn be called like this:

<h2>Component Example</h2>

<hello-world message="Hello there!"></hello-world>

Child Content

Let’s now build a more useful component.

using Microsoft.AspNetCore.Razor.TagHelpers;
using TechGems.StaticComponents;

namespace YourAssembly.Views;

public class OutlinedButton : StaticComponent
{
    public OutlinedButton()
    {
    }
}

The html in the view includes a bit of TailwindCSS code, but you can choose not to use it if you like:

@model YourAssembly.Views.OutlinedButtonComponent
@{
    var colorClasses = "text-neutral-900 hover:text-white border-neutral-900 hover:bg-neutral-900";
    var outlinedStyles = "inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide transition-colors rounded-md bg-white border-2 text-neutral-900 hover:text-white border-neutral-900 hover:bg-neutral-900";
}

<button type="button" class="@outlinedStyles @colorClasses duration-100">
    @Model.ChildContent
</button>

and you’d be able to invoke it in your code like this:

<outlined-button>
  <strong>Click Me!</strong>
</outlined-button>

Summary

These examples should cover most use cases for this library. However, you can override default behavior should you need to. Look into Advanced Usage for more information about overriding more defaults.