[英]How do I read and write to the local storage in Blazor server side using Blazored?
[英]Blazor Server Side: How can I read out the local time of the user/browser not of the server (using only c#)
我创建了一个页面,其中为用户显示天气数据(我通过 api 调用获取数据)。 我有来自 api 调用的数据的 UTC 时间戳。
我的问题是,如果我通过 ToLocalTime() 转换 UTC 时间,则显示的是我服务器的本地时间而不是用户浏览器的本地时间。
有没有办法只使用 C# 和 Blazor 向用户显示“他们的”时间:UTCTime.ToUserTimeZone()?
我对 JS 等零知识,或者这是唯一的方法。 我用谷歌搜索并找到了很多答案,我必须实现 JavaScript 来“获取”用户本地化。
感谢您的帮助和时间
没有 javascript 就不可能获得用户时间。
如果使用 Blazor 服务器端,则 C# 代码在服务器上运行。 但是你可以调用javascript函数。
请参阅https://docs.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");
}
}
您可以更简单地读取本地和 UTC 时间并从 JS接收 .NET DateTime 类型:
new Date().toISOString();
new Date().toUTCString();
还要注意 .NET 5 JS Interop 发生了很大变化。 请查看新的IJSRuntime Interface以及JS Isolation文档。
通过使用 .NET 5 JS 隔离(调用 JS 函数非常相似但略有变化,请参阅上面的文档):
export function localDate() {
return new Date().toISOString();
}
export function utcDate() {
return new Date().toUTCString();
}
我遇到了类似的问题,并创建了一个名为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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.