在 C# 代碼隱藏中使用 HTML 的 Blazor RenderFragment

Question

我專門使用 Radzen Blazor 的Tooltip 。 看來這會讓我得到我需要的東西。 但是，我有一個表，其中許多（但不是全部）行都會有這個工具提示。 此工具提示還將包含一組動態的簡單數據，我需要在其中呈現。 其中一部分只是普通的 HTML 標記，另一部分是 onclick 事件。

該鏈接顯示您可以使用 HTML 執行此操作：

<RadzenButton Text="Show tooltip" MouseEnter="@(args => ShowTooltipWithHtml(args, new TooltipOptions(){ Style = "color: yellow", Duration = null }))" />

然后在頁面上編碼：

@code {
  void ShowTooltipWithHtml(ElementReference elementReference, TooltipOptions options = null) => tooltipService.Open(elementReference, ds =>
    @<div>
      Some <b>HTML</b> content
    </div>, options);
}

這在他們的演示中效果很好，但我有一個代碼隱藏，似乎無法弄清楚如何在我的方法中執行@<div>... HTML 部分。 我以為我可以向它拋出一個包含我所有 HTML 的大字符串，但這只是愚蠢的文本（沒有事件處理程序可以工作。）然后我做了一個RenderFragment但它與Open方法不兼容，因為它需要一個RenderFragment<TooltipService>我不知道如何轉換或轉換為它。

這就是我想要做的，我只需要讓它在代碼隱藏而不是頁面上的@code片段中工作。 僅供參考， VirtualizedCell只是具有 foreach 循環的EquivalentTests內容項的對象：

@code {
  void ShowTooltipWithHtml(ElementReference elementReference, VirtualizedCell cell, TooltipOptions options = null) => tooltipService.Open(elementReference, ds =>
    @<div style="font-size: 11px">
      <ul class="no-bullets ps-1 mb-0">
        @foreach (var eqTest in cell.EquivalentTests)
        {
          <li class="link-hover">
            <a href="{eqTest.Key}"
               @onclick="@(() => VirtualizedJump({eqTest.Key}))"
               @onclick:preventDefault="@true"
               class="px-1 text-decoration-none">{eqTest.Value}</a>
          </li>
        }
      </ul>
    </div>, options);
  }
}

這是觸發它的 HTML：

<RadzenButton Text="Show tooltip" MouseEnter="@(args => ShowTooltipWithHtml(args, cell, new TooltipOptions() { Style = "color: yellow", Duration = null }))">

Answer 1

非常感謝@mrc-aka-shaun-curtis（對不起，它不認識這個名字），我能夠讓它工作。 對於那些將來需要這個的人，這里是調用該方法的 HTML/Razor 代碼：

<RadzenButton Text="Show tooltip" class="popover-icon" MouseEnter="@(args => RenderTooltip(args, cell)">
  <Icon Name="IconNames.Information" height="12" />
</RadzenButton>

這是讓它工作的代碼隱藏：

public void RenderTooltip(ElementReference elementReference, VirtualizedCell cell, TooltipOptions options = null)
{
  var index = 1;

  tooltipService.Open(elementReference, ts => (builder) =>
  {
    builder.OpenElement(index++, "div");
    builder.AddAttribute(index++, "style", "font-size: 11px");
    builder.OpenElement(index++, "ul");
    builder.AddAttribute(index++, "class", "no-bullets ps-1 mb-0");

    foreach (var eqTest in cell.EquivalentTests)
    {
      builder.OpenElement(index++, "li");
      builder.AddAttribute(index++, "class", "link-hover");
      builder.OpenElement(index++, "a");
      builder.AddAttribute(index++, "href", $"{eqTest.Key}");
      builder.AddAttribute(index++, "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, () => VirtualizedJump(eqTest.Key)));
      builder.AddEventPreventDefaultAttribute(index++, "onclick", true);
      builder.AddAttribute(index++, "class", "px-1 text-decoration-none");
      builder.AddContent(index++, eqTest.Value);
      builder.CloseElement();
      builder.CloseElement();
    }

    builder.CloseElement();
    builder.CloseElement();
  }, options);
}