网页是网站的什么颜色好看,做的网站怎么让百度收索时搜,长沙模板建站平台,生物医药网站建设在winform中首次使用net8做页面。列表页想使用Ant Design组件的弹窗组件实现。但第一次在winform项目中使用ant design组件#xff0c;列表页面#xff0c;点击新增#xff0c;或者编辑操作实现弹窗页面#xff0c;弹窗页面想使用模板页razor页来实现#xff0c;而不是用m…在winform中首次使用net8做页面。列表页想使用Ant Design组件的弹窗组件实现。但第一次在winform项目中使用ant design组件列表页面点击新增或者编辑操作实现弹窗页面弹窗页面想使用模板页razor页来实现而不是用modal组件弹窗的时候直接写各种表单组件组合实现。但由于是第一次使用。弹窗根本实现不了弹不出来。网上在github上能找出弹窗实现的开源项目但是写的太复杂并不适用我的首次使用。最终为了赶工期。我用razor中内置的NavigationManager类实现了列表页跳转到新增页面。提交成功后再回转到列表页。
但心心念念的弹窗实现我并未放弃。趁着星期天研究了几次。最终实现了这一功能。
在列表页要实现点击新增或者编辑弹窗打开一个编辑页面。在编辑页面操作新增或者修改然后成功后关闭窗口刷新列表页实现父页面的更新。 这个在父页面弹窗的时候有2个点需要实现。由于ant design组件的modal实现弹窗其底部默认是有确认和取消按钮的。而这里是不需要的。因为新增按钮点击后把数据存入数据库后只需要自动关闭窗口并更新列表页就可以了。
ModalRef? _modalRef;/// summary/// 弹出模板编辑页面/// /summary/// returns/returnsprivate 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 id0?新增桥地址:编辑桥地址,Width 800,DestroyOnClose true,Footer null,AfterClose () {Console.WriteLine(AfterClose);InvokeAsync(StateHasChanged);return Task.CompletedTask;} };_modalRef modalService.CreateModalBlazorUI.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设置Footernull就可以。
这个弹窗只需实现两个事件其一打开弹窗。其二在关闭弹窗事件 OnClose中数据源要重新读取并调用更新方法刷新列表页
页面点击新增或者编辑按钮调用这个方法。
Button Stylewidth:100px;height:30px;border:solid 1px #0000ff;top:20px;font-size:15px; OnClick()OpenTemplate(0) 新 增/Button
在子组件弹窗中的razor页面中关键代码如下
inherits FeedbackComponentBridgeAddress
Form Model_model
LabelColnew ColLayoutParam { Span 4 }
WrapperColnew ColLayoutParam { Span 15 }
OnFinishOnFinish
OnFinishFailedOnFinishFailed FormItem Label桥址编码 Input bind-Value_model.CodeHex Placeholder请输入桥址编码 Prefix0X/PrefixSuffix16进制/Suffix/Input/FormItemFormItem Label备注TextArea bind-Value_model.Remark //FormItemGridRowGridCol Span4/GridColGridCol Span15 Classright1Button Classbtn HtmlTypesubmit (_model.Id0?新增:修改)/Button/GridColGridCol Span4/GridCol/GridRow/Forminherits 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组件中使用如此简单直接可以拿来用。无需任何获取操作
