在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组件中使用如此简单,直接可以拿来用。无需任何获取操作

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/910200.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/910200.shtml
英文地址,请注明出处:http://en.pswp.cn/news/910200.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式学习 51单片机01

一、框架 1、CPU&#xff08;Central Processing Unit&#xff0c;中央处理单元&#xff09;‌是计算机的核心部件&#xff0c;负责执行计算机指令和处理数据。 2、MCU&#xff08;Microcontroller Unit&#xff0c;微控制单元&#xff09;‌是一种将中央处理器、内存、输入输出…

C语言之内存对齐

一、为什么要内存对齐 Arm对内存的访问支持字&#xff08;4byte&#xff09;、半字&#xff08;2byte&#xff09;、字节&#xff08;1byte&#xff09;的直接访问&#xff0c;但是呢他们是有一定的要求的&#xff1a; 存取字时要求地址按字对齐&#xff0c;也就是地址要是4的…

Python 基础语法 -----函数

一、函数 1、函数是什么 编程中的函数和数学中的函数有一定的相似之处。 数学上的函数&#xff0c;比如 y sin x&#xff0c;x 取不同的值&#xff0c;y 就会得到不同的结果。 编程中的函数是一段可以被重复使用的代码片段。 &#xff08;1&#xff09;求数列的和&#x…

Windows/Linux系统 Ollama部署deepseek 大模型

Ollama 是一个开源工具&#xff0c;专门用于在本地计算机上运行和操作大型语言模型&#xff08;LLM&#xff09; 官方下载网站&#xff08;https://ollama.ai/&#xff09; Windows系统安装方法 建议命令行安装&#xff08;默认安装会直接安装到C盘&#xff09; OllamaSetu…

用Tensorflow进行线性回归和逻辑回归(一)

这一章告诉你如何用TensorFlow构建简单的机器学习系统。第一部分回顾构建机器学习系统的基础特别是讲函数&#xff0c;连续性&#xff0c;可微性。接着我们介绍损失函数&#xff0c;然后讨论机器学习归根于找到复杂的损失函数最小化的点的能力。我们然后讲梯度下降&#xff0c;…

java/.net跨平台UI浏览器SDK,浏览器控件开发包分析

在 Linux 系统中&#xff0c;虽然没有完全等同于安卓 WebView 的内置浏览器 SDK&#xff0c;但存在多种基于开源浏览器引擎的解决方案&#xff0c;支持通过 Java 代码控制网页加载和执行 JavaScript。以下是具体实现方案和技术细节&#xff1a; 一、核心技术方案对比 方案名称…

Taro 状态管理全面指南:从本地状态到全局方案

在跨端应用开发中&#xff0c;状态管理是构建可维护、可扩展应用的核心环节。作为京东凹凸实验室推出的多端统一开发框架&#xff0c;Taro 支持 React/Vue 等主流前端框架&#xff0c;自然也继承了丰富的状态管理生态。本文将全面剖析 Taro 中的各种状态管理方案&#xff0c;从…

记录一下jar做成windows服务问题

1、打包好jar 2、把jdk防止到和jar同一目录下 3、下载winsw-x64.exe 和 sample-minimal.xml https://github.com/winsw/winsw/releases/download/v2.12.0/WinSW-x64.exehttps://github.com/winsw/winsw/releases/download/v2.12.0/WinSW-x64.exe sample-minimal.xmlhttps://…

【Dify 案例】【MCP实战】【二】【超级助理】

我们创建一个工作流。你是一个超级助理,能够根据输入的指令,进行推理和自主调用工具,完成并输出结果。 注意,需要判断是否调用高德MCP来获取对应工具协助你完成任务。 1.开始 2.策略大脑 2.1 AEGNT策略 2.2 工具列表 2.3 指令

Qt Quick 与 QML(二)qml中的顶级窗口

一、前言 在QML中&#xff0c;‌顶级窗口不是绝对必需的‌&#xff0c;但它在大多数应用场景中扮演着关键角色。 需要顶级窗口的典型场景&#xff1a; 1.独立桌面/移动应用‌ 必须使用Window或ApplicationWindow作为根元素。 2.多窗口应用 每个独立窗口都需要一个顶级窗口实例…

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 免费服务开通全流程与Rest API和OpenAI SDK调用详解

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 免费服务开通全流程与Rest API和OpenAI SDK调用详解 前言 本文将详细介绍DeepSeek-V3/R1 免费服务开通全流程&#xff0c;并且详细讲解通过本地方式Rest API和OpenAI SDK两种方式调用DeepSeek-V3/R1 前提准备 1、访问 Mod…

Qt 连接信号使用lambda表达式和槽函数的区别

1. 语法与代码结构 成员函数 需在类中显式声明槽函数&#xff08;public slots: 或 Qt 5 后的任意成员函数&#xff09;&#xff0c;并在连接时指定接收对象。 class Receiver : public QObject {Q_OBJECT public slots:void handleSignal(int value) { /* ... */ } };// 连接…

学习笔记丨AR≠VR:透视沉浸式技术的“虚实象限”法则

AR&#xff08;增强现实&#xff09;和VR&#xff08;虚拟现实&#xff09;是沉浸式技术的两大分支&#xff0c;核心区别在于虚拟与现实的融合程度。以下是两者的详细对比&#xff1a; 对比维度 AR&#xff08;增强现实&#xff09; VR&#xff08;虚拟现实&#xff09; 技术…

本地使用 modelscope 大模型 来进行文本生成视频(Text-to-Video)

1. ✅ 创建并激活 Conda 环境&#xff08;Python 3.8&#xff09; conda create -n modelscope python3.8 -yconda activate modelscope 2.✅ 安装了 PyTorch&#xff08;CPU 版本&#xff09; 如果你是 CPU-only 用户&#xff08;没有 NVIDIA 显卡 或不想用 GPU&#xff0…

文生视频(Text-to-Video)

&#x1f552; 生成时间&#xff1a;每张图大概 10–60 秒&#xff08;取决于设备&#xff09; ✅ 二、文生视频&#xff08;Text-to-Video&#xff09; 以下项目中&#xff0c;很多都基于 SD 模型扩展&#xff0c;但视频生成复杂度高&#xff0c;生成时间一般 超过 30 秒&am…

CLion + STM32环境配置,亲测有效(2025.06.19记)

CLion STM32环境配置 遇到的问题描述&#xff1a; > "moniton" command not supported by this target. > You cant do that when your target is exec > 上传完成&#xff0c;但存在问题 > monitor reset > "monitor" command not …

借助ChatGPT快速开发图片转PDF的Python工具

一、开发背景与适用场景 随着数字文档处理需求的激增&#xff0c;图片转PDF的需求日益广泛。从学生提交图像化作业&#xff0c;到教师整合扫描试卷等资料&#xff0c;再到行政人员归档证件照片&#xff0c;工作中的方方面面都离不开图片的处理。如何高效、批量地将多个图片文件…

SuGAR代码精简解读

目录 一、全流程训练脚本 train_full_pipeline.py 二、核心训练逻辑 train.py 粗优化 (coarse_density_and_dn_consistency.py) 网格提取 (extract_mesh_from_coarse_sugar) 精优化 (refined_training) 两次优化&#xff08;粗优化和精优化&#xff09;中使用的损失函数及…

大模型安全关键技术研究

​ 引言 随着人工智能技术的迅猛发展&#xff0c;大模型已成为推动各行业变革的核心力量。从智能客服、医疗影像识别到金融风险预测&#xff0c;大模型的应用场景不断拓展&#xff0c;深刻改变着人们的生产生活方式。大模型已经转变为AI领域的基础设施&#xff0c;为解决各种…

java面试题04成员变量和局部变量的区别

成员变量(Member Variable)和局部变量(Local Variable)是面向对象编程中两种作用域和生命周期不同的变量,主要区别体现在以下几个方面: 1. 声明位置 成员变量: 声明在类内部、方法/构造器/代码块外部。 例如: public class Person {// 成员变量(实例变量)private Str…