报告本地时间而不是服务器时间从UTC开始

Question

我创建了一个页面，用户可以在该页面上查看由服务器报告的天气数据。时间保存为UTC，如何在Blazor Server应用程序中显示本地用户或浏览器的时间？

- nogood

---

由于您想通过浏览器检查用户的本地时间，因此您确实需要使用javascript在客户端上实现它，因为**c#**是用于服务器端代码的。一篇可以给您更详细信息的文章是服务器端和客户端编程是否相同？。 - tontonsevilla

@PinBack非常感谢您展示了那个...它看起来很棒（乍一看;))，也许因为您的帖子告诉我如何从blazor调用JS，所以我会更深入地研究JS。我现在已经避免太长时间了。 - nogood

这里有一篇教程：使用服务器端 Blazor 将 DateTime 转换为用户的时区 - Flimtix

Answer 1

我遇到了类似的问题，并创造了一个名为Blazor Time的库来解决这个问题。

要安装BlazorTime，请运行Install-Package BlazorTime

然后将<script src="_content/BlazorTime/blazorTime.js"></script>添加到您的主机或索引文件中

之后，您可以使用<ToLocal>标签以用户本地时间显示值。

<p>
  @*UTC to browser time*@
  <ToLocal DateTime="testUtcTime" Format="ddd mmm dd yyyy HH:MM:ss"></ToLocal>
</p>

<p>
  @*server time to browser time*@
  <ToLocal DateTime="testServerTime" Format="default"></ToLocal>
</p>

<p>
  @*display as iso example 2021-05-10*@
  <ToLocal DateTime="testUtcTime" Format="yyyy-mm-dd"></ToLocal>
</p>

<p>
  @*display as time example 2pm*@
  <ToLocal DateTime="testUtcTime" Format="htt"></ToLocal>
</p>

<button @onclick="Update">Update Time</button>

@code {
  private DateTime testUtcTime = DateTime.UtcNow;
  private DateTime testServerTime = DateTime.Now;

  private void Update()
  {
    testUtcTime = DateTime.UtcNow;
    testServerTime = DateTime.Now;
  }
}

- Dustin Gamester

---

这个答案解决了将服务器/UTC时间转换为本地时间的部分，但无法在Blazor代码中获取本地时间。 - Vu Nguyen

这是正确的，所以如果你想知道距离午夜还有多少时间，那么这不是适合你的正确库。你可能需要考虑使用 @inject IJSRuntime JSRuntime 来获取用户当前时间，然后通过这种方式进行计算。 - Dustin Gamester

Answer 2

如果不使用JavaScript，无法获取用户的时间。
如果您使用 Blazor 服务器端，则 C# 代码在服务器上运行。但是您可以调用 JavaScript 函数。
请参阅 https://learn.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-3.1。

以下是一个用于获取用户日期和时间偏移量的 JavaScript（将脚本标签添加到 _Host.cshtml 的头元素中）：

<script>
    window.localDate = () => {
        var ldCurrentDate = new Date();
        return ldCurrentDate.getFullYear() +
            "-" + String(ldCurrentDate.getMonth() + 1).padStart(2, '0') +
            "-" + String(ldCurrentDate.getDate()).padStart(2, '0') +
            "T" +
            String(ldCurrentDate.getHours()).padStart(2, '0') +
            ":" + String(ldCurrentDate.getMinutes()).padStart(2, '0') +
            ":" + String(ldCurrentDate.getSeconds()).padStart(2, '0');
    };
    window.utcDate = () => {
        var ldCurrentDate = new Date();
        return ldCurrentDate.getUTCFullYear() +
            "-" + String(ldCurrentDate.getUTCMonth() + 1).padStart(2, '0') +
            "-" + String(ldCurrentDate.getUTCDate()).padStart(2, '0') +
            "T" +
            String(ldCurrentDate.getUTCHours()).padStart(2, '0') +
            ":" + String(ldCurrentDate.getUTCMinutes()).padStart(2, '0') +
            ":" + String(ldCurrentDate.getUTCSeconds()).padStart(2, '0');
    };
    window.timeZoneOffset = () => {
        return new Date().getTimezoneOffset() / 60;
    };
</script>

来自 C# 的调用：

@page "/dates"
@inject IJSRuntime JSRuntime;

<button type="button" @onclick="GetDates">
    Get Dates
</button>

<p>
    <span>
        User Date: @string.Format("{0:G}", this.UserDate)
    </span>
</p>
<p>
    <span>
        Utc Date: @string.Format("{0:G}", this.UTCDate)
    </span>
</p>
<p>
    <span>
        TimeZoneOffset: @string.Format("{0}", this.TimeZoneOffset)
    </span>
</p>
<p>
    <span>
        ServerDate: @string.Format("{0:G}", this.ServerDate)
    </span>
</p>


@code {

    private DateTime UserDate { get; set; }
    private DateTime UTCDate { get; set; }
    private DateTime ServerDate { get; set; }
    private int TimeZoneOffset { get; set; }


    private async Task GetDates()
    {
        this.ServerDate = DateTime.Now;
        this.UserDate = await JSRuntime.InvokeAsync<DateTime>("localDate");
        this.UTCDate = await JSRuntime.InvokeAsync<DateTime>("utcDate");
        this.TimeZoneOffset = await JSRuntime.InvokeAsync<int>("timeZoneOffset");
    }
}

- PinBack

Answer 3

您可以更简单地从JS中读取本地和UTC时间，并接收.NET DateTime类型：

• 本地时间：new Date().toISOString();
• UTC时间：new Date().toUTCString();

此外，请注意，在.NET 5中，JS Interop发生了很多变化。请查看新的IJSRuntime接口以及JS隔离文档。

通过使用.NET 5 JS隔离（调用JS函数非常相似但略有变化，请参见上面的文档）：

export function localDate() {
  return new Date().toISOString();
}
export function utcDate() {
  return new Date().toUTCString();
}

- Major