Question

我想使用<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值。我应该使用一种特殊的语法，还是不被支持？

Answer 1

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>

Answer 2

为什么不只使用-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;
}

Answer 3

要解决此问题，请设置另一个要翻译的属性。

尽管您可以使用空字符串代替'null' 可以使用其他字符串。如果使用空字符串，则文本属性，而不是Value属性作为选定对象传递价值。

AAAAAAAAAAAAAAAAAAAAAAAAAAAA75838458
AAAAAAAAAAAAAAAAAAAAAAAAAAAA48234283
BBBBBBBBBBBBBBBBBBBBBBBBBBBB34723643
AAAAAAAAAAAAAAAAAAAAAAAAAAAA64734987
BBBBBBBBBBBBBBBBBBBBBBBBBBBB18741274
CCCCCCCCCCCCCCCCCCCCCCCCCCCC38123922

Answer 4

我创建了一个自定义组件以绑定到可为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>

Blazor：如何将Nullable对象绑定到<select>？

4 个答案: