BootstrapBlazor组件库,组件方法的表达式传参
BootstrapBlazor组件库,组件方法的表达式传参
有时候我们在循环中创建组件的时候,可能想把item的值也一并传入组件的方法事件中去处理,有很多小伙伴就不知道如何去调用事件了。
下面是一段实例代码,通过循环遍历来创建图片,并且创建一个删除图片的按钮,这个按钮的OnConfirm
方法需要把图片本身也给带进去。
这个时候就可以使用表达式来传参OnConfirm="@(async()=>await DeleteImages(img))"
。
@foreach (var img in images)
{
<div class="col-auto">
<Card IsShadow="true">
<HeaderTemplate>
<div class="container">
<div class="row">
<div class="col-auto">
<PopConfirmButton Placement="Placement.Top"
Color="Color.Danger" Size="Size.ExtraSmall"
ConfirmIcon="fa-solid fa-triangle-exclamation text-danger"
ConfirmButtonColor="Color.Danger"
Text="删除照片"
Content="是否确认删除?"
IsAsync="true"
OnBeforeClick="OnBeforeDeleteImages"
OnConfirm="@(async()=>await DeleteImages(img))" />
</div>
<div class="col-auto">
<code>@img.FileNum</code>
</div>
</div>
</div>
</HeaderTemplate>
<BodyTemplate>
<ImageViewer style="width:150px;"
Alt="@img.Test"
Url="@img.Url"
PreviewList="@(new List<string>() { img.Url! })"
ShowPlaceHolder="true" />
</BodyTemplate>
</Card>
</div>
}
private async Task DeleteImages(Images image)
{
await ...
}
这样我们就实现了这么一个需求,那如果我需要在传参的同时把组件本身的参数也给传过去,可以用下面的语法
OnConfirm="@(async(x)=>await DeleteImages(x,img))"
private async Task DeleteImages(object sender,Images image)
{
await ...
}
表达式括号里面的x,就是组件本身的参数了,这样就实现了组件传参的一个灵活性。
标签:
BootstrapBlazor
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!