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

【问题标题】：Change markup content with variable in Blazor在 Blazor 中使用变量更改标记内容
【发布时间】：2021-11-30 06:28:24
【问题描述】：

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

这段代码可以工作，但很明显，不渲染传递的图标：

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

为什么？

【问题讨论】：

标签： c# asp.net telerik blazor blazor-server-side

【解决方案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>

【讨论】：

感谢您帮助我。我尝试了您的解决方案，但标签出现错误。 “发现具有意外名称'EyeIcon'的标记元素。如果这是一个组件，请为其命名空间添加@using指令。”代码和视图在同一个文件（password.razor）中。如何包含此 RenderFragment？
我尝试创建一个名为 EyeIcon 的新组件并将其放入 RenderFragment 中，但此解决方案不起作用。点击后图标不变。
抱歉，我的解决方案没有提到 Telerik，我认为您需要查看 @Ben Sampica 所说的内容！

【解决方案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，因此您可能想先尝试该路径，因为这样更简洁。

【讨论】：

嗨 Ben，Telerik Icon 的属性非常有限，只接受来自 Telerik 列表 (docs.telerik.com/blazor-ui/common-features/…) 的图标。对于另一个解决方案，EyeIcon => @...，我如何修改我的函数 RevealPassword？单击按钮后我尝试更改值，但该项目是只读的。
更新为使用 setter 和 getter 来制作私有变量。
另外，Telerik 确实支持第三方图标。从该页面 - 第三方字体图标 - IconClass 参数允许您设置一个 CSS 类，为 ::before 伪元素提供所需的字体名称、字体大小和内容。
感谢 Ben，IconClass 正确接受 Fontawsome 但如果我在单击运行时后尝试使用变量更改类，例如IconClass="@Icon"，它被阻止到第一个分配。中的 RenderFragment 变量，点击后会产生一些错误（我的帖子也一样）。因此，很遗憾，此解决方案不适用于 Telerik。

【解决方案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;
    }
}

这不是最好的解决方案，但它工作正常。

【讨论】：