Blazor/Razor 组件在绑定值更改时执行某些操作答案

【问题标题】：Blazor/Razor Components do something when bound value changesBlazor/Razor 组件在绑定值更改时执行某些操作
【发布时间】：2019-12-04 21:23:05
【问题描述】：

我一直在研究这个问题，但发现了十几个似乎不太正确的答案。我正在尝试做的似乎是一个常见的用例，但我没有找到一个简单的答案。

我在下面有一个 .razor 文件，它的格式很小，有一个开始日期时间和一个持续时间。我想在其中任何一个更改时更新 EndDate 属性——主要是当我卡住时我从 Duration <select> 开始。（暂时忽略 Telerik 的东西，只是要了解它在绑定的 startDate 属性中给了我一个 DateTime 值）。

在<select> 中使用@bind 会排除在同一元素上使用@onchange...所以，好吧，我可能想要一些能够响应属性值变化的东西...好吧，INotifyPropertyChanged用于那个，我开始走那条路，但它似乎与这种预先存在的数据绑定机制格格不入。我在EventCallback 上找到了文档，但这似乎是为组件间通信而设计的，而不是在组件内，我会硬塞进去。我可以在属性上定义设置器，但这在上下文中似乎也过时了......

在 Ember 中，我会为此使用依赖属性。我是否错过了在 Blazor 中执行此操作的预期方式？ INotifyPropertyChanged 是正确的方式吗？

@page "/"

@using System.ComponentModel
@using System.Runtime.CompilerServices
@using Envoi.BlazorApp.Annotations
@using Telerik.Blazor.Components
<h1>Record Encounter</h1>

<TelerikDateTimePicker Min="@Min" Max="@Max" @bind-Value="@startDate"
                       Format="ddMMM yyyy HH:mm:ss" Width="220px"></TelerikDateTimePicker>
Duration: 
<select @bind="Duration">
    <option value="5">5 Minutes</option>
    <option value="15">15 Minutes</option>
    <option value="30">30 Minutes</option>
    <option value="60">1 Hour</option>
    <option value="120">2 Hours</option>
</select>

End: @(endDate.ToShortDateString()) @(endDate.ToShortTimeString())
(@(startDate.ToShortDateString()) @(startDate.ToShortTimeString()) + @Duration minutes)

@code
{

    private DateTime startDate = DateTime.Now;
    public DateTime Min = new DateTime(2006, 10, 1, 0, 0, 0);
    public DateTime Max = new DateTime(DateTime.Now.Ticks + TimeSpan.FromDays(365.25*4).Ticks);
    public int Duration { get; set; } = 5;
    public DateTime endDate;

    private void UpdateEndDate() // How to get this method called?
    {
        endDate = new DateTime(startDate.Ticks + TimeSpan.FromMinutes(Duration).Ticks);
    }

}

【问题讨论】：

标签： c# data-binding blazor-server-side

【解决方案1】：

好吧，这似乎是一个只见树木不见森林的例子。基本上，我只需要使用这组属性定义即可：

private DateTime StartDate { get; set; } = DateTime.Now;
public DateTime Min = new DateTime(2006, 10, 1, 0, 0, 0);
public DateTime Max = new DateTime(DateTime.Now.Ticks + TimeSpan.FromDays(365.25 * 4).Ticks);
public int Duration { get; set; } = 5;
public DateTime EndDate => new DateTime(StartDate.Ticks + TimeSpan.FromMinutes(Duration).Ticks);

所以，我认为有两个问题：

StartDate (nee startDate) 实际上并没有编译为属性...所以我想 Blazor 可能没有正确捕获更改。
我只需要为endDate 提供一个基于 lambda 的属性来计算值...因为我当然做到了。 [不像我可以同时拥有它作为可设置属性和计算属性，对吗？如果我还想要另一种方法来覆盖和设置结束日期，我必须有一个单独的EndDate（可设置）和ComputedEndDate（lambda）来检查EndDate...这是完全合理的。] *

编辑

* 写完这篇文章后我才想起...实际上是的，这正是我想要的：就像外面的许多 right-triangle solvers 和 subnet calculators 一样，我最初设想的是一个界面，您可以在其中设置任何这三个值（StartDate、Duration 或 EndDate）和其他属性之一将更新以匹配......你不能用这种方法真正做到这一点，因为每个属性都是可写的而不是更新的，或更新和只读。

Blazor 似乎没有内置的方法来执行此操作。 This article 讨论了几种方法，主要是我已经提出的选项的变体。因此，虽然我的回答解决了我在单向属性上遇到的具体问题，但更大的问题似乎没有快速简便的解决方案。

【讨论】：