Question

你好，我有2类型的int变量，我想绑定到min类型的max的{{1}}和input值1}}。
我该怎么办？

我不知道要在time字段中放置什么，因为有2个不同的变量。还有bind和min属性。

max

我应该在<input type="time" min="@model.min" max="@model.max" bind=?/>中放什么？

更新经过更彻底的分析，我决定需要2个bind类型的变量，并将它们绑定到2个Timespan类型的输入。

Answer 1

您不能将TimeSpan直接绑定到Blazor中的输入，但是可以使用属性将其转换为字符串或从字符串转换。

<input type="time" min="@model.min" max="@model.max" bind="@TimeProxy" />

和

@functions
{
  string TimeProxy { get => model.Time.ToString(); set => TimeSpan.TryParse(value,out model.Time); }
}

Answer 2

以前的解决方案不适用于.net Core 3.1，因此我将添加一个更新的解决方案：

使用Blazor：

<EditForm Model=@model OnValidSubmit="Submit">
    <InputText type="time" @bind-Value="TimeProxy" />
</EditForm>

代码更改也是必要的。

@code {
    // This field is required as you can not use property in out statement
    private TimeSpan LocalTime = TimeSpan.FromHours(0);
    private string TimeProxy { 
        get => model.Time.ToString();
        set => TimeSpan.TryParse(value,out LocalTime);
    }
    private void Submit() {
        model.Time = LocalTime;
        // following submit logic...
    }
}

Answer 3

我为此编写了一个小组件，它利用数据绑定并使用正确的数据类型。

用法：

<LabeledTime @bind-Value="shutdownDelay"></LabeledTime>

组件：

<label class="form-label" for="@LabelId">
    @ChildContent
</label>
<input id="@LabelId" type="time" value="@ValueInternal.ToString("hh\\:mm")" step="60" @onchange="InternalValueChanged"/>

@code {

    private long LabelId = DateTime.Now.Ticks;

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public TimeSpan Value { get; set; }

    [Parameter]
    public EventCallback<TimeSpan> ValueChanged { get; set; }

    private TimeSpan ValueInternal { get; set; }

    protected override void OnParametersSet()
    {
        ValueInternal = Value;
        base.OnParametersSet();
    }

    private void InternalValueChanged(ChangeEventArgs obj)
    {
        if (!TimeSpan.TryParseExact(obj.Value.ToString(), "hh\\:mm\\:ss", null, out var result))
            return;

        ValueInternal = result;
        Value = result;
        ValueChanged.InvokeAsync(result);
    }
}

如何用blazor绑定时间类型的输入

3 个答案: