Change markup content with variable in Blazor-CodePudding

I want to change the child content of a button after click, but I got some error when I try.

This code work but, obviusly, don't render the icon passed:

<TelerikButton OnClick="@RevealPassword"
                   Class="pass-btn"
                   Primary="true"
                   ButtonType="ButtonType.Button"
                   Id="btnShowPwd"
                   Title="Show">
                       @EyeIcon
</TelerikButton>



@code {
    [Parameter]
    public string EyeIcon { get; set; } = "<i class='fal fa-eye fa-lg'></i>";

    public async Task RevealPassword()
    {
        EyeIcon = "<i class='fal fa-eye-slash fa-lg'></i>";
        StateHasChanged();
        HidePassword = false;
        await Task.Delay(2000);
        HidePassword = true;
        EyeIcon = "<i class='fal fa-eye fa-lg'></i>";
        StateHasChanged();
    }

    [Parameter] public EventCallback<string> OnTypePassword { get; set; }
}

Button work and change correclty the child content after click

But when I try to convert with @((MarkupString)myVariable) I got an error:

<TelerikButton OnClick="@RevealPassword"
                   Class="pass-btn"
                   Primary="true"
                   ButtonType="ButtonType.Button"
                   Id="btnShowPwd"
                   Title="Show">
                       @((MarkupString)@EyeIcon)
</TelerikButton>

Why?

CodePudding user response：

Change type of EyeIcon from string to RenderFragment:

[Parameter] public RenderFragment EyeIcon {get; set;}

In parent create var string to hold you css:

string CssStyle= "fal fa-eye-slash fa-lg";

In you method RevealPassword() change the value of you CssStyle.

In TelerikButton you need to write EyeIcon like this:

<TelerikButton ...>
  <EyeIcon>
    <i class='@CssStyle'></i>
  </EyeIcon>
</TelerikButton>

CodePudding user response：

The Telerik button is wanting a RenderFragment of which a MarkupString is not able to be converted into.

Instead, try something like

private RenderFragment EyeIcon => @<i class='fal fa-eye fa-lg'></i>;

with whatever switching logic you want in there. See more details here.

That said, I think Telerik has an option to specify an icon as part of the component so you may want to try that path first as that's a bit cleaner.