Question 88306 in ASP.NET Question posted in
The official documentation can be found here.

Change markup content with variable in Blazor – Asp.net

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

enter image description here
enter image description here

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>

enter image description here

enter image description here

Why?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I found a workaround to solve my problem. Here is the code:

    View:

    <TelerikButton OnClick="@RevealPassword"
                   Class="@passBtnState"
                   Primary="true"
                   ButtonType="ButtonType.Button" Id="btnShowPwd" Title="Show password">
                       <i id="passBtnIconShow" class='fal fa-eye fa-lg'></i>
                       <i id="passBtnIconHide" class='fal fa-eye-slash fa-lg'></i>
</TelerikButton>

    @Code:

    private string passBtnState = "pass-btn passBtnShow";
public bool HidePassword { get; set; } = true;
public string Password { get; set; }


public async Task RevealPassword()
{
    passBtnState = "pass-btn passBtnHide";
    StateHasChanged();
    HidePassword = false;
    await Task.Delay(2000);
    HidePassword = true;
    passBtnState = "pass-btn passBtnShow";
    StateHasChanged();
}

    CSS:

    .passBtnShow {
    #passBtnIconHide {
        display: none;
    }

    #passBtnIconShow {
        display: inline;
    }
}

.passBtnHide {
    #passBtnIconHide {
        display: inline;
    }

    #passBtnIconShow {
        display: none;
    }
}

    It's not the best solution, but it's work fine.


  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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 {get; set;} = @<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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search