本示例是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. 面霸的自我修养：ThreadLocal专题

    王有志,一个分享硬核Java技术的互金摸鱼侠 加入Java人的提桶跑路群:共同富裕的Java人 今天是<面霸的自我修养>第5篇文章,我们一起来看看面试中会问到哪些关于ThreadLocal ...

  2. 触动精灵生成的APK文件如何加固保护

    触动精灵是一款模拟手机触摸.按键操作的软件,通过制作脚本,可以让触动精灵代替双手,自动执行一系列触摸.按键操作, 深受一些极客开发者喜爱. 触动精灵生成的APK文件自带了一些基础的加密,可以保护APK ...

  3. mysqlbinlog输出sql

    ./mysqlbinlog -v --base64-output=DECODE-ROWS ~/Downloads/tymysql2|grep -A4 'ALTER' >~/Downloads/a ...

  4. 43道Python经典案例题（有答案）

    1.有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? for x in range(0,5): for y in range(0,5): for z in range( ...

  5. 报Bug的礼仪

    不要对1个程序员说:你的代码有Bug.他的第1反应是:1.你的环境有问题吧:2.傻逼你会用吗? 如果你委婉的说:你这个程序和预期的有点不1致,你看看是不是我的打开姿势有问题?他本能的会想:擦,是不是出 ...

  6. Nginx-多功能脚本

    #!/bin/bash #2020年2月16日 #auto_install_nginx_web.v3 #by fly ################################ #NGX_VER ...

  7. Go 如何实现多态

    在 Go 语言中,虽然没有经典的面向对象编程中的继承和多态的概念,但你可以通过接口(interface)来实现多态性.Go 语言鼓励组合和接口多态,这使得代码更加灵活和模块化.下面将详细介绍 Go 语 ...

  8. js前端操作，c#后端下发xml文件

    前端: var xmlLanguageDoc; $.ajax({         url: "/GiveMeXML",//此处可随意定义,不一定是路径.在c# ,请求被捕获后,由c ...

  9. STM32CUBEIDE 如何将变量定义到指定内存地址

    使用场景如下: 我需要将bootloader/APP的版本号和一些字段信息定义到指定FLASH地址. 在STM32CubeIDE中的方法: 截止当前STM32CubeIDE还没有提供图形化的针对FLA ...

  10. vue element ui 组件使用 -form 表单

    表单验证rules 绑定是规则 也可以自定义规则,:model是表单的数据源 el-form-item 标签里面prop的名字要和数据源的名字一致,才能验证生效 ;提交时调用this.$refs[fo ...