本示例是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. CodeIgniter 视图篇

    什么是视图 简单来说,一个视图其实就是一个 Web 页面,或者页面的一部分,像页头.页脚.侧边栏等. 实际上,视图可以很灵活的嵌在另一个视图里,然后这个视图再嵌在另一个视图里,等等, 如果你想使用这种 ...

  2. web组态可视化编辑器

    随着工业智能制造的发展,工业企业对设备可视化.远程运维的需求日趋强烈,传统的单机版组态软件已经不能满足越来越复杂的控制需求,那么实现web组态可视化界面成为了主要的技术路径. 行业痛点 对于软件服务商 ...

  3. skynet的timer似乎有问题

    skynet.timeout 传进去 number 范围内的数值但是会溢出, 调查发现 skynet.timeout 调用的是 c 的方法: c.intcommand("TIMEOUT&qu ...

  4. 浅入深出的微前端MicroApp

    前言: 本文是由最近做的一个项目有感而发,因为之前做了一些技术栈的统一,为了用ant Design的pro-table,PC统一使用react,但是我们有一些老的项目是vue的,本次新页面较多,老页面 ...

  5. What is Lambda?

    根据我的观察,Lambda是一种比较灵活的形式,需要多看几个案例才能明白它. Lambda是一种简化代码的技术手段,主要用于简化匿名实现类,允许把函数作为一个方法的参数传递进方法中.它本身并不会创造出 ...

  6. ArcGIS地图投影与坐标系转换的方法

      本文介绍在ArcMap软件中,对矢量图层或栅格图层进行投影(即将地理坐标系转为投影坐标系)的原理与操作方法.   首先,地理坐标系与投影坐标系最简单的区别就是,地理坐标系用经度.纬度作为空间衡量指 ...

  7. flask出现This is a development server. Do not use it in a production deployment. Falsk WSGI两种解决办法

    WARNING: This is a development server. Do not use it in a production deployment. Falsk WSGI "这个 ...

  8. Required request body is missing缺失请求体

    今天在写项目的时候前台传的参数后台一直接收不到,在网上搜了一些东西试了也没效果.后来发现是因为加了@RequestBody 去掉之后再次尝试就可以了.

  9. 【干货】前端开发VUE实例

    最近公司招聘前端开发----VUE方向. 技术面试是必不可少的,发现大多数人应该没有掌握其开发技术,今天就大概总结一下 一.准备工作 需要用到VSCODE最新版,nodejs,vue2.0(现在vue ...

  10. Vue之交互

    1.get() <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...