本示例是AntDesign Blazor的入门示例，在学习的同时分享出来，以供新手参考。

示例代码仓库：https://gitee.com/known/BlazorDemo

1. 学习目标

  • 创建Modal表单编辑数据
  • 创建Table操作列

2. 创建Modal表单

1）新增按钮和Modal组件

打开天气页面Weather.razor文件，按照如下步骤添加新增按钮和Modal组件

  • 在查询按钮后面添加新增按钮，使用flex布局，将新增按钮放在右侧
  • 在Table后面添加Modal组件，设置Title和绑定Visible属性
  • 添加Visible属性的变量
  • 添加新增按钮的点击事件，将Visible属性的变量设为true

  • 点击运行按钮查看效果

2）WeatherForm组件

在Page文件夹中添加WeatherForm组件，添加日期，温度和摘要3个字段

  • 使用Form组件，添加Model和LabelColSpan属性
  • 日期字段使用DatePicker组件
  • 温度字段使用InputNumber组件
  • 摘要字段使用TextArea组件
  • 添加组件参数Model传递天气数据

  • 打开天气模型类WeatherForecast，添加必填字段特性和提示信息

3）实现表单功能

下面再次修改Weather页面，实现编辑数据功能

  • 将Modal内容换成WeatherForm组件
  • 添加绑定表单的Model对象
  • 修改新增方法，添加默认天气数据
  • 添加Modal组件的OnOk事件保存数据

  • 打开WeatherService类，添加保存天气方法

  • 点击运行按钮查看效果

3. 创建Table操作列

接下来，我们在Table中添加操作列，显示编辑和删除操作

  • 在Table的ChildContent中添加ActionColumn，设置Title、Fixed和Width属性
  • 在ActionColumn中添加编辑和删除两个按钮
  • 添加编辑按钮事件方法
  • 添加删除按钮事件方法

  • 打开WeatherService类，添加删除天气方法

  • 点击运行按钮查看效果

4. 视频

https://www.bilibili.com/video/BV1Vc411C7iz/

AntDesignBlazor示例——Modal表单的更多相关文章

  1. 3、Ext.NET 1.7 官方示例笔记-表单

    表单[Form],就是向客户收集资料的窗口,用户在表单填写好各种信息,然后提交到服务器,服务器接收并保存到数据库里. 表单的字段类型很多,我们从最简单的开始吧. 1.1 .先开始组合框吧(ComboB ...

  2. JavaWeb -- Struts1 使用示例： 表单校验 防表单重复提交 表单数据封装到实体

    1. struts 工作流程图 超链接 2. 入门案例 struts入门案例: 1.写一个注册页面,把请求交给 struts处理 <form action="${pageContext ...

  3. .net erp（办公oa）开发平台架构概要说明之表单设计器

    背景:搭建一个适合公司erp业务的开发平台.   架构概要图: 表单设计开发部署示例图    表单设计开发部署示例说明1)每个开发人员可以自己部署表单设计至本地一份(当然也可以共用一套开发环境,但是如 ...

  4. 表单和iframe的使用

    图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果.示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容.示例: 网页的拼接: 在一个网络页面 ...

  5. 基于Extjs的web表单设计器 第六节——界面框架设计

    基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extj ...

  6. Day17 表单验证、滚动菜单、WEB框架

    一.表单验证的两种实现方式 1.DOM绑定 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. HTML静态网页（图片热点、网页划区、拼接及表单的使用）

    图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例:   网页的拼接: 在一个 ...

  8. 从零开始学 Web 之 HTML（三）表单

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  9. Day5 JavaScript（三）事件、表单验证以及初识jQuery

    事件 1)鼠标事件 mousedown mouseup 2)键盘事件 a) keydown:键被按下 b) keyup:键抬起 c) keypress:按下可打印字符的键时. document.onk ...

  10. HTML表单提交总结

    概述:随着HTML5的兴起,前端越来越多样化,比如表单的提交,现在就有多种方式可以选择,下面总结一下常见的表单提交方式. 1.最基本的表单提交. <!DOCTYPE html> <h ...

随机推荐

  1. Android 编译介绍

    一.需求 Android的源码非常的庞大,编译Android系统往往会占用我们很长的时间,我们需要了解下Android的编译规则,以期能提高我们的开发效率,达到程序员按时下班的伟大理想. 二.环境 平 ...

  2. Spring Cache + Caffeine实现本地缓存

    Caffeine简介 Caffeine是一个高性能,高命中率,低内存占用,near optimal 的本地缓存,简单来说它是 Guava Cache 的优化加强版 依赖 <dependency& ...

  3. 熟练掌握并充分利用CSS3的新特性，更新完毕。

    1.1  尝试新颖的CSS3特性 首先,我们来看一个具体的案例.  https://code.juejin.cn/pen/7277536985772720139   1.2  CSS3新特性简介和浏览 ...

  4. 研发三维GIS系统笔记/实现wgs84投影-001

    1. 工作内容,改造引擎,支持wgs84投影 改造原因:目前投影是墨卡托投影(与Google Map一致) 目前的GIS系统是二维的采用这个坐标系是没有问题的 但不支持wgs84瓦片数据以及高程数据, ...

  5. CSE 2023 混合年度回声周末

    CSE 2023 混合年度回声周末(2023 年 4 月 13 日至 15 日)25 周年银周年纪念版 近 900 名参与者参加.又是成功的伟大一年.明年 2024 年 4 月在多伦多见.敬请关注全年 ...

  6. 手撕Vue-编译指令数据

    经过上一篇的分析,完成了查找指令和模板的功能,接下来就是编译指令的数据了. 所以本章节主要处理的方法则是 buildElement 方法,我们先分析一下我们所拿到的数据在进行编码,这样会更加清晰一些. ...

  7. SpringBoot + 自定义注解 + AOP 高级玩法打造通用开关

    前言 最近在工作中迁移代码的时候发现了以前自己写的一个通用开关实现,发现挺不错,特地拿出来分享给大家. 为了有良好的演示效果,我特地重新建了一个项目,把核心代码提炼出来加上了更多注释说明,希望xdm喜 ...

  8. 「CSP-2023」我曾璀璨星空，星月相伴，致远方，致过往。

    Day -1   像往常一样去上学.虽然身在学校但感觉心还在比赛上.在一个上午课间准备去上厕所时遇见了信息老师.她在教我们班信息之前我的一些奖状的指导教师就是写的她,之前就认识了,每次碰到她都会朝我笑 ...

  9. 虹科技术｜Redis企业版数据库：实现金融服务IT现代化！

    随着新冠肺炎和技术创新推动企业进入新的数字时代,金融行业客户现在需要一种快速.简单且根据需求量身定制的数字银行体验.这就需要银行进行转型,以提供更加数字化的服务,但无论战略.方法,还是满足消费者极高期 ...

  10. JVM SandBox 的技术原理与应用分析

    https://www.infoq.cn/article/tsy4lgjvsfweuxebw*gp https://blog.csdn.net/qq_40378034/article/details/ ...