How to add attribute on each blazor component automatically by rule? - html

Question

For testing purpouses I want to have custom attribute on each, for example, button each page of my app without any manual adding.
Let's say I have page:
#page "/mypage"
<h1>This is page</h1>
<button class="btn btn-primary" #onclick="IncrementCount">Click me</button>
<button class="btn btn-primary" #onclick="IncrementCount">NO, click ME</button>
#code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
and, eventually, after some kind of additional rendering step, I want to see this html in my browser:
<h1>This is page</h1>
<button class="btn btn-primary" my-custom-attribute="button-click-me">Click me</button>
<button class="btn btn-primary" my-custom-attribute="button-no-click-me">NO, click ME</button>
So, the rule for makeing my-custom-attribute content comes from component content itself. It can be described as "component name + dash + text from component to lower case" => button(component name) + - + click-me(text from component to lower case with dashes instead spaces). Rule should be described somewhere in C# code and should "targeting" on list of components(buttons, divs, etc).
Is there any way to achieve that? Maybe there is a way to tweak Blazor rendering process somehow?

Answer 1

I can see no other solution than using a custom generic component. Someone may come up with a better answer. If so, I'll happily delete this one.
Here's a basic custom component to render html elements:
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;
namespace BlazorApp1.Pages
{
public class MyComponentBase : ComponentBase
{
[Parameter] [EditorRequired] public string Tag { get; set; } = "div";
[Parameter] public string MyAttributeValue { get; set; } = string.Empty;
[Parameter] public string? Content { get; set; }
[Parameter] public RenderFragment? ChildContent { get; set; }
[Parameter(CaptureUnmatchedValues = true)] public IDictionary<string, object> UserAttributes { get; set; } = new Dictionary<string, object>();
private string myAttribute => string.IsNullOrWhiteSpace(Content) ? this.MyAttributeValue : this.Content.Replace(" ", "-");
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
builder.OpenElement(0, Tag);
builder.AddMultipleAttributes(1, UserAttributes);
if (!string.IsNullOrWhiteSpace(this.myAttribute))
builder.AddAttribute(2, "my-attribute", this.myAttribute);
if (ChildContent is not null)
builder.AddContent(3, ChildContent);
else if (!string.IsNullOrWhiteSpace(Content))
builder.AddMarkupContent(4, Content);
builder.CloseElement();
}
}
}
And a Demo:
#page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<MyComponentBase Tag="button" MyAttribute="Blazor-Component" class="btn btn-primary" #onclick=this.OnClick Content="My Blazor Button" />
<MyComponentBase Tag="div" MyAttributeValue="Survey-Prompt-Div" class="m-2">
<SurveyPrompt Title="How is Blazor working for you?" />
</MyComponentBase>
<div>
#this.message
</div>
#code {
private string message = string.Empty;
private void OnClick()
{
this.message = $"Hello Blazor at {DateTime.Now.ToLongTimeString()} ";
}
}
While this sort of works, it highlights some issues with what you are trying to do.
You can't just get the "content" between the opening and closing tags of an element. The content is a RenderFragment, not a string that you can parse and use for your attribute. Therefore anything like the second block in the example requires a manual setting of the attribute (you may as well define it directly!).
The complexity of the component depends on what type of content you want to apply your attribute to.
Anyway, the component demonstrates the basic principles of how to capture parameters and attributes and use them to construct elements.