C# Blazor 和數據綁定到日期時間？

Question

我必須為現有的Asp.net Core 3.1 Blazor項目的日期和時間輸入字段添加數據驗證； 這是我第一次與 Blazor 合作。

我在日期輸入字段（它有一個日期選擇器和綁定到 DateTime 變量的數據）上設置了數據綁定，沒有問題。 但是，時間輸入的情況不同（它有一個時間選擇器並綁定到另一個 DateTime 變量。）

簡而言之，當用戶使用時間選擇器設置時間並關閉它時，輸入字段中的時間將回到最初設置的時間。 例如，如果時間輸入當前設置為上午 12:00，然后用戶從時間選擇器中選擇一個新時間（假設是下午 2:00），則用戶單擊確定並關閉時間選擇器，即輸入中的時間回到 12:00 AM。 我在同一頁面上有另一個時間輸入，但數據綁定到一個字符串而不是 DateTime，如果在時間選擇器中再次設置時間，時間將被保留。

我寫了一個很短的程序來演示這個問題。 我的示例頁面有三個輸入字段：日期、時間和另一個時間，但它的數據綁定到一個字符串。

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<div class="wrapper">
  <section class="createevent">
    <EditForm EditContext="@_editContext" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">
      <DataAnnotationsValidator />
      <div class="form-group">
        <p>
          <label>
            Date:
          </label>
          <input id="txtDate" type="date" required @bind-value="_timeSample.date" />
          <ValidationMessage For="@(() => _timeSample.date)" />
        </p>
      </div>
      <div class="form-group">
        <p>
          <label>
            Time:
          </label>
          <input id="txtTime" type="time" required @bind="_timeSample.time" />
          <ValidationMessage For="@(() => _timeSample.time)" />
        </p>
      </div>
      <div class="form-group">
        <p>
          <label>
            Time2:
          </label>
          <InputText id="txtTime2" type="time" required @bind-Value="_timeSample.text" />
          <ValidationMessage For="@(() => _timeSample.text)" />
        </p>
      </div>
    </EditForm>
  </section>
</div>

@code
{
  public class TimeSample
  {
    public DateTime date { get; set; }
    public DateTime time { get; set; }
    public string text { get; set; }
  };

  private EditContext _editContext;
  private TimeSample _timeSample = new TimeSample();

  protected override void OnInitialized()
  {
    _editContext = new EditContext(_timeSample);
  }

  private void HandleValidSubmit()
  {
  }

  protected void HandleInvalidSubmit()
  {
  }

}

Answer 1

你使用的是什么瀏覽器 ？ 我使用 Chrome 運行了您的代碼，但無法重現該問題...我認為這與 Blazor 無關，而是與您使用的瀏覽器有關。 請用其他瀏覽器試試你的代碼

希望這可以幫助...