目录
介绍
使用代码
Startup.cs
App.razor
_Host.cshtml
ConfirmationCheckBox.razor
ConfirmationCheckBox.razor.cs
如何使用？
ConfirmCheckBox.razor
- 从GitHub下载示例代码
在我使用Blazor.net的一项作业中，很少有表单将输入控件作为复选框。根据要求，在更改事件之后在EditForm或中使用InputCheckBox组件处理复选框值是很困难的。下面列出了一些限制使用默认组件的逻辑：
- 点击确认模态弹窗后恢复复选框的值
- 以最少的代码句柄来处理上述功能
为了实现上述功能，需要创建一个自定义组件来单独处理复选框并避免代码重复。该组件使用第三方包，即Blazored Modal，它是免费提供的Nuget包管理器。他们网站上提供的详细配置可以参考，以便在应用程序中集成。这可以根据应用程序中的用法进行替换。
下面是相同的代码以及如何在不同场景中使用它的解释。
使用代码代码就像一个简单的插件，只需配置组件并在应用程序中使用它。下面是相同的代码。
Startup.cs将服务引用添加到blazored modal。Blazored模态相关配置。
services.AddBlazoredModal();用CascadingBlazoredModal包裹路由器标签。Blazored模态相关配置。
.....
提供对Blazored Modal脚本和样式表的参考。Blazored模态相关配置。
根据以下代码在项目的共享UI文件夹中创建一个razor组件。例如，BlazorApp/Pages/Component。
在razor组件所在的文件夹中创建与上述相同的razor.cs类。以下代码充当创建的Razor页面的后端代码。
#region System References
using System;
using System.Threading.Tasks;
#endregion
#region BlazorApp Reference
using BlazorApp.Pages.Modal;
using Blazored.Modal;
using Blazored.Modal.Services;
#endregion
#region Microsoft References
using Microsoft.AspNetCore.Components;
#endregion
namespace BlazorApp.Pages.Components
{
public partial class ConfirmationCheckBox
{
#region Parameter
// Parameter for div that wraps the input checkbox
[Parameter] public string Class {get;set;}
// Parameter for Checkbox name
[Parameter] public string Name {get;set;}
// Parameter to defined message on popup when checkbox is checked
[Parameter] public string PopupMessageForTrue {get;set;}
// Parameter to defined message on popup when checkbox is unchecked
[Parameter] public string PopupMessageForFalse {get;set;}
// Parameter to defined event call back on Popup button action
[Parameter] public EventCallback OnPopupClicked {get;set;}
// Parameter to make the checkbox readonly
[Parameter] public bool ReadOnly {get;set;}
// Parameter to define id of the checkbox
[Parameter] public string Id {get;set;}
// Parameter to bind the value of checkbox
[Parameter] public bool? Value{
get=>_value;
set{
if(_value==value) return;
_value=value;
ValueChanged.InvokeAsync(value);
}
}
// Parameter to handle two way binding
[Parameter] public EventCallback ValueChanged {get;set;}
#endregion
#region Inject
[Inject] IModalService Modal {get;set;}
#endregion
bool? _value;
string Message;
#region Protected Method
protected override void OnInitialized(){
Class=string.IsNullOrEmpty(Class)?"checkbox":Class;
}
#endregion
#region Private Method
///
/// Method to change the Check box change event
///
/// ChangeEventArgs
///
private async Task OnChecked(ChangeEventArgs args){
bool argsValue=Convert.ToBoolean(args.Value);
Message= !argsValue ? PopupMessageForTrue : PopupMessageForFalse;
Message = string.IsNullOrEmpty(Message) ? "Are you sure ?" : Message;
var options= new ModalOptions()
{DisableBackgroundCancel=true,HideCloseButton=true};
ModalParameters parameter = new ModalParameters();
parameter.Add("Body", Message);
var formModal = Modal.Show("Confirm", parameter,options);
var result= await formModal.Result;
if(!result.Cancelled){
if(Convert.ToBoolean(result.Data))
await ValueChanged.InvokeAsync(argsValue);
else
await ValueChanged.InvokeAsync(!argsValue);
await OnPopupClicked.InvokeAsync(Convert.ToBoolean(result.Data));
}
StateHasChanged();
}
#endregion
}
}下面是每个变量和函数的描述：
组件属性
描述
Value
要传递的模型属性
Name
名称与复选框组件对齐
ValueChanged
在值更改时设置模型属性的事件回调。有助于双向绑定
Id
要设置的组件的id属性
Class
包装输入复选框的div类属性
ReadOnly
要设置的禁用属性，即如果true，其他启用则禁用
PopupMessageForTrue
如果选中复选框，将在模态弹出窗口中显示消息
PopupMessageForFalse
如果未选中复选框，将在模态弹出窗口中显示消息
方法
描述
OnInitializedAsync
在组件初始化时执行的方法
OnChecked
在输入字段的复选框检查中调用的方法
如何使用？下面是一组示例代码，展示了如何使用双向绑定来使用上述组件。
ConfirmCheckBox.razor下面是显示如何使用能够组件的示例代码。
@page "/ConfirmationCheckBox"
CheckBoxValue : @CheckBoxValue
Popup Value : @PopupValue
@code{
private bool? CheckBoxValue{get;set;}
private bool? PopupValue {get;set;}
///
/// Method to be invoked on popup action by ConfirmationCheckBox component
///
/// bool
///
private void PopupClicked(bool value){
PopupValue=value;
}
}示例代码可在GitHub 上获得。
https://www.codeproject.com/Tips/5304619/Blazor-Confirmation-Checkbox-Component
