Lundeful
Lundeful
PostsComments
CC#
Created by Lundeful on 5/8/2024 in #help
What is the equivalent of this react component if made using C# and Blazor?
Cool stuff! Looks like you've been going down that rabbithole a lot more than me 😄 Does sort of feel like we're working against the framework when doing this, but if it works it works.
13 replies
CC#
Created by Lundeful on 5/8/2024 in #help
What is the equivalent of this react component if made using C# and Blazor?
Extracted it to a utility class and put the project into a public repo so it doesn't get lost https://github.com/Lundeful/reusable-blazor-components Hopefully we'll get a better solution for this soon
13 replies
CC#
Created by Lundeful on 5/8/2024 in #help
What is the equivalent of this react component if made using C# and Blazor?
@mg Got it working in a simple example here. Also using tailwind, which is where I think this can be a huge win. I'm basically just checking to see if the class is there, kinda wonky since it can be null Kinda wonky since the attributes is a nullable readonly dictionary and there isn't exactly an upsert for dictionary. That part can just be taken out as a utility function/extension method or something and then it can look quite clean in usage Definition 
C#
public class MyInputText : InputText
{
    private const string BaseClass = "mx-24";

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        var attributes = AdditionalAttributes?.ToDictionary() ?? new Dictionary<string, object>();
        if (attributes.TryGetValue("class", out var existingClass))
        {
            attributes["class"] = $"{BaseClass} {existingClass}";
        }
        else
        {
            attributes.Add("class", BaseClass);
        }

        AdditionalAttributes = attributes;
        base.BuildRenderTree(builder);
    }
}
C#
public class MyInputText : InputText
{
    private const string BaseClass = "mx-24";

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        var attributes = AdditionalAttributes?.ToDictionary() ?? new Dictionary<string, object>();
        if (attributes.TryGetValue("class", out var existingClass))
        {
            attributes["class"] = $"{BaseClass} {existingClass}";
        }
        else
        {
            attributes.Add("class", BaseClass);
        }

        AdditionalAttributes = attributes;
        base.BuildRenderTree(builder);
    }
}
Usage 
<MyInputText @bind-Value="_formModel.MyString" class="mx-64 my-12" />
<MyInputText @bind-Value="_formModel.MyString" class="mx-64 my-12" />
And it works fine by overriding the base value as I do here. Only problem is this does not work well with MudBlazor since all of their utility clases have !important on them 💀 The specificity got weird it seems like. With Tailwind you can use the @apply directive to reuse styles, but this method can do more than just template the styles
13 replies
CC#
Created by Lundeful on 5/8/2024 in #help
What is the equivalent of this react component if made using C# and Blazor?
I see that the components, such as InputText, are just classes that I can inherit and perhaps edit and override what I need from there. Seems like I can do this just using code and not bother with the html syntax at all. Seems a lot easier and more maintainable. I'll have to experiment, but seems like it will be easier than I feared 😄 Back to reading the source code
13 replies