在 Blazor 中使用变量更改标记内容

Question

我想在点击后更改按钮的子内容，但尝试时出现一些错误。

此代码有效，但很明显，不呈现通过的图标：

<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; }
}

按钮工作并在点击后正确更改子内容

但是当我尝试使用@((MarkupString)myVariable) 进行转换时出现错误：

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

为什么？

Answer 1

将 EyeIcon 的类型从字符串更改为 RenderFragment:

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

在父级中创建 var 字符串来容纳你 css:

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

在你的方法中 RevealPassword()改变你的值CssStyle。

在TelerikButton 中你需要这样写EyeIcon：

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

Answer 2

Telerik 按钮需要一个 RenderFragment，但 MarkupString 无法转换成。

改为尝试

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

里面有你想要的任何切换逻辑。查看更多详细信息 here。

也就是说，我认为 Telerik 有一个选项可以指定 an icon as part of the component，因此您可能想先尝试该路径，因为它更简洁。

Answer 3

我找到了解决问题的方法。这是代码：

查看：

<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>

@代码:

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;
    }
}

这不是最好的解决方案，但效果很好。

在 Blazor 中使用变量更改标记内容

Change markup content with variable in Blazor

c#

asp.net

telerik

blazor

blazor-server-side