asp.net-core - 我想在按钮单击时动态调用 blazor 组件
问题描述
我有 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>
如何为按钮单击编写通用和动态显示方法?
解决方案
我昨天学到了这个,我只发布这个以防它对某人有帮助。
我在我的 Blazor 聊天中显示了一个用户列表,名称实际上是按钮:
@foreach (SubscriberCallback callback in Names)
{
<button class="listbutton" @onclick="(Action<EventArgs>) (args =>
SendPrivateMessageClicked(args, callback.Id))">@callback.Name</button><br />
}
我有一个名为 SendPrivateMessageClicked 的方法,我需要传入要向谁发送消息的 Id (Guid)。
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;
}
我爱布雷泽!
推荐阅读
- windows - 在 tcl 中如何获取可用的 RAM 内存量
- generics - Rust 返回泛型特征的已知类型
- mysql - MySQL如何创建一个视图来处理查询参数
- netflix-eureka - server.context-path 在 springboot admin /Eureka 的健康端点中附加了两次
- java - 在 Java 中有没有办法在异常期间知道方法参数的值?
- typescript - TypeScript 映射类型更改值函数的返回类型
- javascript - 将函数的进度输出到执行 Promise 内部的控制台
- angular - 如何修复这些漏洞?(npm audit fix 无法修复这些漏洞)
- spring - 将war部署到tomcat并出现错误(java.lang.NoSuchMethodError:org.slf4j.spi.LocationAwareLogger)
- firebase - 云功能 Firebase 无法正常工作