Blazor-EditForm InputCheckbox 可空布尔问题解决方案
问题描述 投票：0回答：3
我正在尝试为 Blazor 上的编辑表单创建一个从输入库派生的定制输入，但是我很难掌握它，因为我这周才刚刚学习 Blazor，一般来说，这个月才学习 C#。
我发现了 https://www.meziantou.net/creating-a-inputselect-component-for-enumerations-in-blazor.htm（或查找下面粘贴的代码） 并能够将它用于 inputselect 内部的可为空枚举，但是尝试将其复制为可为空的输入复选框却无济于事。我想知道是否有人有链接或知道如何调整它以使其发挥作用。
预先感谢您，我几乎整天都在电脑上，所以请随意提问，尽量不要责备我哈哈。
// file: Shared/InputSelectEnum.cs
using System;
using System.ComponentModel.DataAnnotations;
using System.Globalization;
using System.Reflection;
using Humanizer;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Rendering;
// Inherit from InputBase so the hard work is already implemented 😊
// Note that adding a constraint on TEnum (where T : Enum) doesn't work when used in the view, Razor raises an error at build time. Also, this would prevent using nullable types...
namespace OrderServiceFrontEnd.Shared
{
public sealed class InputSelectEnum<TEnum> : InputBase<TEnum>
{
// Generate html when the component is rendered.
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
builder.OpenElement(0, "select");
builder.AddMultipleAttributes(1, AdditionalAttributes);
builder.AddAttribute(2, "class", CssClass);
builder.AddAttribute(3, "value", BindConverter.FormatValue(CurrentValueAsString));
builder.AddAttribute(4, "onchange", EventCallback.Factory.CreateBinder<string>(this, value => CurrentValueAsString = value, CurrentValueAsString, null));
// Add an option element per enum value
var enumType = GetEnumType();
foreach (TEnum value in Enum.GetValues(enumType))
{
builder.OpenElement(5, "option");
builder.AddAttribute(6, "value", value.ToString());
builder.AddContent(7, GetDisplayName(value));
builder.CloseElement();
}
builder.CloseElement(); // close the select element
}
protected override bool TryParseValueFromString(string value, out TEnum result, out string validationErrorMessage)
{
// Let's Blazor convert the value for us 😊
if (BindConverter.TryConvertTo(value, CultureInfo.CurrentCulture, out TEnum parsedValue))
{
result = parsedValue;
validationErrorMessage = null;
return true;
}
// Map null/empty value to null if the bound object is nullable
if (string.IsNullOrEmpty(value))
{
var nullableType = Nullable.GetUnderlyingType(typeof(TEnum));
if (nullableType != null)
{
result = default;
validationErrorMessage = null;
return true;
}
}
// The value is invalid => set the error message
result = default;
validationErrorMessage = $"The {FieldIdentifier.FieldName} field is not valid.";
return false;
}
// Get the display text for an enum value:
// - Use the DisplayAttribute if set on the enum member, so this support localization
// - Fallback on Humanizer to decamelize the enum member name
private string GetDisplayName(TEnum value)
{
// Read the Display attribute name
var member = value.GetType().GetMember(value.ToString())[0];
var displayAttribute = member.GetCustomAttribute<DisplayAttribute>();
if (displayAttribute != null)
return displayAttribute.GetName();
// Require the NuGet package Humanizer.Core
// <PackageReference Include = "Humanizer.Core" Version = "2.8.26" />
return value.ToString().Humanize();
}
// Get the actual enum type. It unwrap Nullable<T> if needed
// MyEnum => MyEnum
// MyEnum? => MyEnum
private Type GetEnumType()
{
var nullableType = Nullable.GetUnderlyingType(typeof(TEnum));
if (nullableType != null)
return nullableType;
return typeof(TEnum);
}
}
}
Blazor 组合：
<InputSelectEnum @bind-Value="@_Order.IOSAppDetails.PhasedRelease"/>
3个回答
6
投票
投票
您可以继承
InputBase<bool?>在这个例子中，我没有使用“代码隐藏”方法，尽管它看起来或多或少是相同的。
该组件位于名为
NullableBoolCheckBox.razor@inherits InputBase<bool?>
<input type="checkbox" value="@CurrentValue" @attributes="AdditionalAttributes" class="@CssClass" style="width:15px; height:15px;vertical-align:-2px;"
@onchange="EventCallback.Factory.CreateBinder<bool?>(this,OnChangeAction,this.CurrentValueAsBool)" />
<label @onclick="SetValueToNull" style="width:15px;height:15px;">[x]</label>
@code {
bool? _CurrentValueAsBool;
private bool? CurrentValueAsBool
{
get
{
if (string.IsNullOrEmpty(CurrentValueAsString))
_CurrentValueAsBool = null;
else
{
if (bool.TryParse(CurrentValueAsString, out bool _currentBool))
_CurrentValueAsBool = _currentBool;
else
_CurrentValueAsBool = null;
}
SetCheckBoxCheckedAttribute(_CurrentValueAsBool);
return _CurrentValueAsBool;
}
set => _CurrentValueAsBool = value;
}
void SetCheckBoxCheckedAttribute(bool? _currentValueAsBool)
{
bool _isChecked = _currentValueAsBool.HasValue ? _currentValueAsBool.Value : false;
var _attributes = AdditionalAttributes != null ? AdditionalAttributes.ToDictionary(kv => kv.Key, kv => kv.Value) : new Dictionary<string, object>(); ;
if (!_isChecked)
{
_ = _attributes.ContainsKey("checked") ? _attributes["checked"] = false : _attributes.TryAdd("checked", false);
}
else
{
_ = _attributes.ContainsKey("checked") ? _attributes["checked"] = true : _attributes.TryAdd("checked", true);
}
AdditionalAttributes = _attributes;
}
protected override bool TryParseValueFromString(string value, out bool? result, out string validationErrorMessage)
{
validationErrorMessage = null;
if (string.IsNullOrEmpty(value))
{
result = null;
}
else
{
if (bool.TryParse(value, out bool _result))
{
result = _result;
}
else
{
validationErrorMessage = "Unable to parse value!";
result = null;
return false;
}
}
return true;
}
private Action<Nullable<bool>> OnChangeAction { get => (_inputValue) => CurrentValueAsString = _inputValue.HasValue ? _inputValue.Value.ToString() : null; }
void SetValueToNull(MouseEventArgs e)
{
this.CurrentValueAsString = string.Empty;
}
}
它的使用方式与任何其他组件相同。
例如：
<EditForm Model="someModel">
@*.more fields.*@
<label>Nullable value:</label><NullableBoolCheckBox @bind-Value="someModel.SomeNullBoolValue" />
<br />
<strong>value is: @(someModel.SomeNullBoolValue.HasValue?$"{someModel.SomeNullBoolValue}":"null")</strong>
@*.more fields.*@
</EditForm>
链接到表单的模型有一个属性：
public bool? SomeNullBoolValue { get; set; }看起来像这样：
如果您不想使用 [x] 标签重置值，您可以执行点击计数之类的操作来循环显示值
true, false, null3
投票
投票
作为 [x] 标签的替代方案，将值设置为
null如果您喜欢在
true, false, nullOnChangeActionnullfalse利用控件上的
hidden<input><label>@inherits InputBase<bool?>
<input type="checkbox" value="@CurrentValue" @attributes="AdditionalAttributes" class="@CssClass" style="width:15px; height:15px;vertical-align:-2px;"
@onchange="EventCallback.Factory.CreateBinder<bool?>(this,OnChangeAction,this.CurrentValueAsBool)" hidden="@_HideCheckBox" />
<label @onclick="SetValueToTrue" hidden="@(!_HideCheckBox)" style="width:15px;height:15px;margin-left:-5px;">[?]</label>
@code {
bool _HideCheckBox { get; set; } = false;
bool? _CurrentValueAsBool;
private bool? CurrentValueAsBool
{
get
{
if (string.IsNullOrEmpty(CurrentValueAsString))
_CurrentValueAsBool = null;
else
{
if (bool.TryParse(CurrentValueAsString, out bool _currentBool))
_CurrentValueAsBool = _currentBool;
else
_CurrentValueAsBool = null;
}
SetCheckBoxCheckedAttribute(_CurrentValueAsBool);
return _CurrentValueAsBool;
}
set => _CurrentValueAsBool = value;
}
void SetCheckBoxCheckedAttribute(bool? _currentValueAsBool)
{
bool _isChecked = _currentValueAsBool.HasValue ? _currentValueAsBool.Value : false;
var _checkBoxAttributes = AdditionalAttributes != null ? AdditionalAttributes.ToDictionary(kv => kv.Key, kv => kv.Value) : new Dictionary<string, object>(); ;
if (!_isChecked)
{
_ = _checkBoxAttributes.ContainsKey("checked") ? _checkBoxAttributes["checked"] = false : _checkBoxAttributes.TryAdd("checked", false);
if (!_currentValueAsBool.HasValue)
_HideCheckBox = true;
}
else
{
_HideCheckBox = false;
_ = _checkBoxAttributes.ContainsKey("checked") ? _checkBoxAttributes["checked"] = true : _checkBoxAttributes.TryAdd("checked", true);
}
AdditionalAttributes = _checkBoxAttributes;
}
protected override bool TryParseValueFromString(string value, out bool? result, out string validationErrorMessage)
{
validationErrorMessage = null;
if (string.IsNullOrEmpty(value))
{
result = null;
}
else
{
if (bool.TryParse(value, out bool _result))
{
result = _result;
}
else
{
validationErrorMessage = "Unable to parse value!";
result = null;
return false;
}
}
return true;
}
private Action<Nullable<bool>> OnChangeAction
{
get => (_inputValue) =>
{
//ignore input value if previously false, to force it to null
if (this.CurrentValueAsString == bool.FalseString)
{
_inputValue = null;
this.CurrentValueAsString = string.Empty;
}
else
this.CurrentValueAsString = _inputValue.HasValue ? _inputValue.Value.ToString() : string.Empty;
};
}
void SetValueToTrue(MouseEventArgs e)
{
this.CurrentValueAsString = bool.TrueString;
}
}
您可以将
<label><image>然后看起来像这样：
组件的使用保持不变。
@*.other fields.*@
<label>Nullable value:</label><NullableBoolCheckBox @bind-Value="someModel.SomeNullBoolValue" />
<br />
<strong>value is: @(someModel.SomeNullBoolValue.HasValue?$"{someModel.SomeNullBoolValue}":"null")</strong>
<br />
@*.other fields.*@
0
投票
投票
大家好，在 2024 年首次访问此页面进行 blazor 的人。 使用 blazor 四个星期了，需要将其添加到组件中才能使示例正常工作！我仍在尝试了解一切是如何运作的，这可能会帮助其他人节省 4 个小时，而不是像我一样。
@rendermode InteractiveServer
最新问题
- 如何用C++连接ADO.NET和SQL
- 如何在任务管理用例图中表示基于角色的访问控制的约束？
- 为什么这个文件没有被复制到我的 $PATH 中？
- 如何消除在张量流的tape.gradient方法中将虚数转换为实值的警告？
- Jenkins有问题，系统无法运行文件？
- 尝试从.asp页面连接到远程mysql
- 使用 Stripe checkout Laravel Cashier 处理发票. payment_succeeded 事件
- Pytorch 中的 ANN 训练给了我不变的损失函数
- 在 Windows 上 python-docx 中找不到包错误？
- 如何将服务器数据传递到React组件中
- 为什么从不同服务器复制数据库时只复制空行？
- D3DXSaveTextureToFileW 无法正常工作
- Laravel 渲染重复的类。怎么解决？
- 下载二进制格式的字节数组
- 其他工作区帐户不允许通过 API 在 Google Room 资源上创建事件
- 如何在 .NET 中将可空上下文设置为默认禁用？
- 提供了无效的令牌。 Discord.js
- 如何提高GitHub Actions的文件限制？
- 我的先来先服务调度算法的分段错误
- 如何重写django中类或方法的内部读取查询
© www.soinside.com 2019 - 2024. All rights reserved.