Blazor :如何将可为空的对象绑定到<select>?



我希望使用<select>能够在多个值之间进行选择,或者不选择任何值。

我的组件是这样的:

<select @bind="SelectedValue">
<option value="null">Null</option>
@for (int i = 0; i < 10; i++)
{
<option value="@i">Value : @i </option>
}
</select>
<hr />
@if (SelectedValue.HasValue)
{
<p>The selected value is : @SelectedValue.Value</p>
}
else
{
<p>the value is null</p>
}
@code {
private int? SelectedValue = null;
}

我可以将<select>值绑定到int对象,但不能绑定null值。是否有我应该使用的特殊语法,或者只是不支持它?

为什么不使用-1而不是null?

<select @bind="SelectedValue">
<option value="-1">Null</option>
@for (int i = 0; i < 10; i++)
{
<option value="@i">Value : @i </option>
}
</select>
<hr />
@if (SelectedValue>-1)
{
<p>The selected value is : @SelectedValue.Value</p>
}
else
{
<p>the value is null</p>
}
@code {
private int? SelectedValue = -1;
}
我创建了一个自定义组件来绑定到可为null的int。这是类对象:
public class NullableSelect : InputSelect<int?>
{
protected override bool TryParseValueFromString(string value, out int? result, out string validationErrorMessage)
{
if (string.IsNullOrWhiteSpace(value))
result = null;
else if (Int32.TryParse(value, out int itemVal))
result = itemVal;
else
{
validationErrorMessage = "Invalid Value";
result = null;
return false;
}
validationErrorMessage = null;
return true;
}
protected override string FormatValueAsString(int? value)
{
if (!value.HasValue)
return "";
else
return value.Value.ToString();
}
}

以下是如何在剃刀文件中使用它:

<NullableSelect @bind-Value="BoundID" >
<option value="">(none)</option>
<option value="1">One</option>
<option value="2">Two</option>
</NullableSelect>
private string SelectedValue;
private void SelectionChanged(ChangeEventArgs args)
{
if (args.Value is { })
{
SelectedValue = $"The selected value is :{args.Value}";
}
else
{
SelectedValue = "the value is null";
}
}
<select @onchange="SelectionChanged">
<option value="null">Null</option>
@for (int i = 0; i < 10; i++)
{
<option value="@i">Value : @i </option>
}
</select>
<hr />
<p>@SelectedValue</p>

使用MudBrazor(MudSelector(的用户可以使用以下内容:

public class NullMudselect : MudSelect<int?>
{
int itemVal;
protected override Task SetValueAsync(int? value, bool updateText = true)
{
if (value == null)
return base.SetValueAsync(null, updateText);
else
{
if (Int32.TryParse(value.ToString(), out itemVal))
return base.SetValueAsync(itemVal, updateText);
else
return null;
}
}
protected override Task SetTextAsync(string text, bool updateValue = true)
{
try
{
if (string.IsNullOrEmpty(text) || string.IsNullOrWhiteSpace(text))
return base.SetTextAsync(null, updateValue);
else if (Int32.TryParse(text, out itemVal))
return base.SetTextAsync(text, updateValue);
else
{
return base.SetTextAsync(null, updateValue);
}
}
catch (Exception ex)
{
return base.SetTextAsync(null, updateValue);
}
}
}

最终用途:

<Column T="T" Field="MyField" Title="MyTitle">
<EditTemplate>
<NullMudselect @bind-Value="context.Item.staff_sick_days_typesysid" Margin="@Margin.Dense">
<MudSelectItem Value="@(new int?())">Please select</MudSelectItem>
@for (int r = 0; r < data_source.Rows.Count; r++)
{ 
var value_member = data_source.Rows[r]["sysid"] == null || data_source.Rows[r]["sysid"] == DBNull.Value ? new int?() : Convert.ToInt32(data_source.Rows[r]["sysid"]);
var dislsplay_member = data_source.Rows[r]["description"] == null || data_source.Rows[r]["description"] == DBNull.Value ?
string.Empty : data_source.Rows[r]["description"].ToString();
<MudSelectItem Value="@value_member">@dislsplay_member</MudSelectItem>
}
</NullMudselect></EditTemplate></Column>

作为一种变通方法,制作第二个属性进行翻译。

此外,您不能使用空字符串代替"null",尽管您可以使用不同的字符串。如果使用空字符串,则Text属性,而不是Value属性作为选定的价值

//On Entity
public int? ProductID { get; set; }
/// <summary>
/// Only used to bind to select
/// </summary>
public string ProductIDAsString
{
get => ProductID?.ToString()?? "null";
set => ProductID = value == "null" ? null :(int?)int.Parse(value);
}
//In component
<label>Product</label>
<select @bind="@Model.ProductIDAsString" >
<option value="null">None</option>
@foreach (var product in AvailableProducts)
{
<option value="@product.ProductID">@product.Label</option>
}
</select>

相关内容

  • 没有找到相关文章

最新更新