目录

介绍

使用代码

Startup.cs

App.razor

_Host.cshtml

ConfirmationCheckBox.razor

ConfirmationCheckBox.razor.cs

如何使用&＃xff1f;

ConfirmCheckBox.razor

• 从GitHub下载示例代码

介绍

在我使用Blazor.net的一项作业中&＃xff0c;很少有表单将输入控件作为复选框。根据要求&＃xff0c;在更改事件之后在EditForm或<\input type&＃61;"checkbox" />中使用InputCheckBox组件处理复选框值是很困难的。下面列出了一些限制使用默认组件的逻辑&＃xff1a;

1. 点击确认模态弹窗后恢复复选框的值
2. 以最少的代码句柄来处理上述功能

为了实现上述功能&＃xff0c;需要创建一个自定义组件来单独处理复选框并避免代码重复。该组件使用第三方包&＃xff0c;即Blazored Modal&＃xff0c;它是免费提供的Nuget包管理器。他们网站上提供的详细配置可以参考&＃xff0c;以便在应用程序中集成。这可以根据应用程序中的用法进行替换。

下面是相同的代码以及如何在不同场景中使用它的解释。

使用代码

代码就像一个简单的插件&＃xff0c;只需配置组件并在应用程序中使用它。下面是相同的代码。

Startup.cs

将服务引用添加到blazored modal。Blazored模态相关配置。

services.AddBlazoredModal();

App.razor

用CascadingBlazoredModal包裹路由器标签。Blazored模态相关配置。


.....



提供对Blazored Modal脚本和样式表的参考。Blazored模态相关配置。

ConfirmationCheckBox.razor

根据以下代码在项目的共享UI文件夹中创建一个razor组件。例如&＃xff0c;BlazorApp/Pages/Component。

ConfirmationCheckBox.razor.cs

在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&＃61;>_value;set{if(_value&＃61;&＃61;value) return;_value&＃61;value;ValueChanged.InvokeAsync(value);}}// Parameter to handle two way binding[Parameter] public EventCallback ValueChanged {get;set;}#endregion#region Inject[Inject] IModalService Modal {get;set;}#endregionbool? _value;string Message;#region Protected Methodprotected override void OnInitialized(){Class&＃61;string.IsNullOrEmpty(Class)?"checkbox":Class; }#endregion#region Private Method///

下面是每个变量和函数的描述&＃xff1a;

如何使用&＃xff1f;

下面是一组示例代码&＃xff0c;展示了如何使用双向绑定来使用上述组件。

ConfirmCheckBox.razor

下面是显示如何使用能够组件的示例代码。

&＃64;page "/ConfirmationCheckBox"


示例代码可在GitHub 上获得。

https://www.codeproject.com/Tips/5304619/Blazor-Confirmation-Checkbox-Component