Blazor - 简单尝试一下弹窗和表单

1.简单介绍

对于Blazor系统的弹窗效果，大家可能会使用js，之前见过一个Blog系统用的是sweetalert。

表单可能会使用EditForm组件, 通过EditContext或者Model属性进行绑定以实现交互。

很多Blazor开源框架也有提供弹窗和表单的功能组件的，这边尝试着使用一下Ant Design Blazor开源框架中的弹窗和表单组件。

2.实现一下

2.1 简单说明

假定有一个Table，当在用户点击行的时候能够弹出一个窗口表单，这样用户可以更改信息了

Olympics Metal Data Table,

        

Olympics Metal EditForm,

        

2.2 实现过程

弹出的窗口，这边尝试用的是Ant Design Blazor框架的Modal组件和Form组件

Modal组件: https://antblazor.com/en-US/components/modal

Form组件: https://antblazor.com/en-US/components/form

2.2.1 Modal 弹窗实现

首先对Table组件的OnRowClick添加一个事件处理函数HandleClick，

private async void HandleClick(RowData<CountryData> eventCallback)
{
	var countryId = eventCallback.Data.CountryId;
	RenderFragment content =@<Title Level="3">修改 Olympics Metal 信息</Title>;
	var options = new ModalOptions
		{
			TitleTemplate = content,                
			Width = "40%",             
			OnCancel = async (MouseEventArgs e) => await OnModalClose(e),
			OnOk = async (MouseEventArgs e) => await OnModalClose(e)
		};

	modalRef = await _modalService.CreateModalAsync<DataDetailComponent, Guid>(options, countryId);
}

上面的 modalRef是对弹窗的引用，可以通过modalRef来进行窗口的关闭的

_modalService.CreateModalAsync<DataDetailComponent,Guid>(options, countryId)

其中DataDetailComponent是一个放在Modal中的组件，这个组件中使用一下表单。

note, 刚开始运行项目，点击行记录，发现弹窗没有出现，后来发现需要在MainLayout.razor页面中，加上组件<ModalContainer/>。

        

2.2.2 Form 实现

按照Ant Design的Form组件的指导，尝试创建一下表单

        

2.3 运行一下

1) 点击第一行奥运会奖牌记录

        

2) 发现有Modal窗口弹出，表单也在里面

        

3) 更改一下信息，点击Submit

        

4) 有数据提交成功的message出现，这个也是尝试了一下Ant Design的Message组件的

        

5）发现数据也更新到数据库中了

        

实现过程中可能还会使用到Ant Design Blazor的其他组件，比如

Table, Title, Message,Result等组件

使用了开源的Blazor框架确实方便了很多

3.总结

以上简单尝试了一下使用开源Ant Design Blazor去实现弹窗和表单的效果。感觉当前Blazor技术的使用者也在逐渐的增加。Blazor开源框架的作者能力都很强，还需要继续向他们多学习学习。

本文如果哪里有错误，麻烦告之，谢谢谢谢