如何使用Ant Design Blazor组件在列表页弹窗增加修改数据

在winform中首次使用net8做页面。列表页想使用Ant Design组件的弹窗组件实现。但第一次在winform项目中使用ant design组件，列表页面，点击新增，或者编辑操作实现弹窗页面，弹窗页面想使用模板页razor页来实现，而不是用modal组件弹窗的时候直接写各种表单组件组合实现。但由于是第一次使用。弹窗根本实现不了，弹不出来。网上在github上能找出弹窗实现的开源项目，但是写的太复杂，并不适用我的首次使用。最终为了赶工期。我用razor中内置的NavigationManager类实现了列表页跳转到新增页面。提交成功后再回转到列表页。

但心心念念的弹窗实现我并未放弃。趁着星期天研究了几次。最终实现了这一功能。

在列表页要实现点击新增或者编辑，弹窗打开一个编辑页面。在编辑页面操作新增或者修改，然后成功后关闭窗口，刷新列表页，实现父页面的更新。

这个在父页面弹窗的时候有2个点需要实现。由于ant design组件的modal实现弹窗，其底部默认是有确认和取消按钮的。而这里是不需要的。因为新增按钮点击后把数据存入数据库后，只需要自动关闭窗口，并更新列表页就可以了。

ModalRef? _modalRef;/// <summary>/// 弹出模板编辑页面/// </summary>/// <returns></returns>private async Task OpenTemplate(int id){var manager = new BridgeAddressManager();BridgeAddress bridgeAddress = new BridgeAddress();if (id != 0){bridgeAddress = manager.GetById(id);}else{bridgeAddress.Id = 0;}var modalConfig = new ModalOptions{Title = id==0?"新增桥地址":"编辑桥地址",Width = 800,DestroyOnClose = true,Footer = null,AfterClose = () =>{Console.WriteLine("AfterClose");InvokeAsync(StateHasChanged);return Task.CompletedTask;} };_modalRef = modalService.CreateModal<BlazorUI.Template.EditBridgeAddress,BridgeAddress>(modalConfig,bridgeAddress);_modalRef.OnOpen = () =>{Console.WriteLine("ModalRef OnOpen");return Task.CompletedTask;};_modalRef.OnClose = () =>{Console.WriteLine("ModalRef OnClose");manager = new BridgeAddressManager();_dataSource = manager.GetList();InvokeAsync(StateHasChanged);return Task.CompletedTask;};}

这里底部去除确认和取消按钮，只需ModalOptions设置Footer=null就可以。

这个弹窗只需实现两个事件，其一，打开弹窗。其二，在关闭弹窗事件 OnClose中，数据源要重新读取，并调用更新方法，刷新列表页

页面点击新增或者编辑按钮，调用这个方法。

<Button Style="width:100px;height:30px;border:solid 1px #0000ff;top:20px;font-size:15px;" OnClick="()=>OpenTemplate(0)" >新 增</Button>

在子组件弹窗中的razor页面中关键代码如下：

@inherits FeedbackComponent<BridgeAddress> 
<Form Model="@_model"
LabelCol="new ColLayoutParam { Span = 4 }"
WrapperCol="new ColLayoutParam { Span = 15 }"
OnFinish="OnFinish"
OnFinishFailed="OnFinishFailed"> <FormItem Label="桥址编码"> <Input @bind-Value="@_model.CodeHex" Placeholder="请输入桥址编码" ><Prefix>0X</Prefix><Suffix>16进制</Suffix></Input></FormItem><FormItem Label="备注"><TextArea @bind-Value="@_model.Remark"  /></FormItem><GridRow><GridCol Span="4"></GridCol><GridCol Span="15" Class="right1"><Button Class="btn" HtmlType="submit" >@(_model.Id==0?"新增":"修改")</Button></GridCol><GridCol Span="4"></GridCol></GridRow></Form>

@inherits FeedbackComponent

这句关键，他直接把桥地址实例和子组件绑定。实现了页面中从数据库读取的数据，绑定到页面相关组件中。

还有一个关键处。实现的颇为曲折。就是在新增数据存入数据库后，调用弹窗的关闭事件

await FeedbackRef!.CloseAsync(); // 操作成功，关闭弹窗

FeedbackRef是父页面中ModalRef实例。但这个modalRef如何从父组件传递到子组件，并能够使用却不大好实现。在搜索引擎中搜索ant design组件这方面的应用，几乎没什么有用信息。用deepseek搜索有两种实现方法。其一，使用[Parameter]参数，或者使用级联参数来实现。但用他那个实现的样例，却获取的都是空值，并不能用。

没办法，只能进行各种尝试。最终在我的孜孜不倦的研究下，终于找到了实现方法，其实很简单。我在modalService的创建弹窗中的反编译代码中发现了这个。

void Child无疑就是指子组件了。

builder.AddAttribute(1, "FeedbackRef", modalRef);

modalRef都赋予给了子组件的FeedbackRef属性。这意味着我只要获取FeedbackRe对象，就是modalRef对象了。

刚开始我以为要以参数获取的形式实现

结果编译运行，却报错了，说FeedbackRef必须唯一。我去除这两行代码。直接使用

await FeedbackRef!.CloseAsync(); // 操作成功，关闭弹窗

这次编译运行，直接成功。原来，这个ModalRef在ant Design组件中使用如此简单，直接可以拿来用。无需任何获取操作