Question

我有如下所示的TemplateSlide.razor组件

<div class="slide-panel">
  <div class="contact-form-content">
          @Content

 </div>
@code
{
[Parameter] public RenderFragment Content { get; set; }
}

我有如下剃须刀组件Comp.razor

<TemplateSlide>
<div>Other comp</div>
</TemplateSlide>

我还有其他菜单组件，可在单击按钮时调用Comp.razor

 <div class="page-header-buttons">
        <ul>

            <li class="page-header-buttons-items can-add">
                <MainMenuLink Href="" ActiveClass="page-header-active" HrefMatch="MainMenuLinkMatch.Exact">
                    Dashboard
                </MainMenuLink>

                @*<a class="page-header-plus contact" href="#"><i class="fas fa-plus add-new-contact-icon"></i></a>*@
            </li>
            <li class="page-header-buttons-items can-add">
                <MainMenuLink Href="contacts" ActiveClass="page-header-active">
                    Contacts
                </MainMenuLink>
                <a class="page-header-plus contact"   @onclick="@(()=>Show<Comp>())"><i class="fas fa-plus add-new-contact-icon"></i></a>

            </li>
<li class="page-header-buttons-items can-add">
                <MainMenuLink Href="contacts" ActiveClass="page-header-active">
                    Others
                </MainMenuLink>
                <a class="page-header-plus contact"   @onclick="@(()=>Show<Others>())"><i class="fas fa-plus add-new-contact-icon"></i></a>

            </li>
</ul>
    </div>

如何为按钮单击编写通用和动态的Show方法？

Answer 1

我是昨天学到的，我只是在发布它以防他人帮助。

我在Blazor聊天中显示了一个用户列表，名称实际上是按钮：

@foreach (SubscriberCallback callback in Names)
{
    <button class="listbutton" @onclick="(Action<EventArgs>) (args => 
    SendPrivateMessageClicked(args, callback.Id))">@callback.Name</button><br />
}

我有一个称为SendPrivateMessageClicked的方法，我需要传递将消息发送给谁的ID（向导）。

private void SendPrivateMessageClicked(EventArgs args, Guid toId)
{
    // Attempt to find the subscriber
    SubscriberCallback subscriber = SubscriberService.FindSubscriber(toId);

    // Send Private Message Code Removed, but you get the point
}

链接按钮的CSS：

.listbutton
{
    background:none;
    border:none;
    margin:0;
    padding:0;
    cursor: pointer;
    border: none;
    color: limegreen;
    height: 2.4vh;
    font-size: 2vh;
}
.listbutton:focus
{
    outline: none;
}

我爱Blazor！

我想在单击按钮时动态调用blazor组件

1 个答案: