javascript - 如何在 razor 页面上将 C# Datetime 对象转换为 json 以进行客户端操作-6ren

javascript - 如何在 razor 页面上将 C# Datetime 对象转换为 json 以进行客户端操作

转载作者：行者123 更新时间：2023-12-02 23:27:58

25

4

我正在尝试将存储的日期时间对象从数据库转换为 razor View 页面上的 Json 对象，以便对其进行操作并实时计算用户列表所用的时间。我不知道该怎么做。请帮忙!

我认为最好在 View 页面上转换它，但我不确定这是否是最好的解决方案

@model List<WebApplication1.Models.Attendance>

<html>
<body>
    @foreach (var attendance in Model)
    {
        <table>
            <tr>
                <th> Name </th>
                <th> Time Elapsed </th>
            </tr>

            <tr>
                <td> @attendance.ApplicationUserId  </td>
                <td class="DateTimeObject" data-date="@attendance.DateAndTimeIn.ToString("u")"> @attendance.DateAndTimeIn </td>
            </tr>
        </table>

    }


    <script type="text/javascript">



            var myVar = setInterval(myTimer, 1000);

            const seconds = 1000;
            const minutes = seconds * 60;
            const hours = minutes * 60;
            const days = hours * 24;
            const years = days * 365;


            function myTimer() {

                let dateTimeValue = document.getElementsByClassName("DateTimeObject");

                for (i = 0; i < dateTimeValue.lenght; i++)

                {
                const startDateTime = new Date(dateTimeValue[i].dataset.date);
                const newDateTime = new Date();

                let elapsedMilliseconds = newDateTime - startDateTime;


                document.getElementsByClassName("DateTimeObject").innerHTML =
                        `${formatElapsedTime(elapsedMilliseconds, days)}:${formatElapsedTime(elapsedMilliseconds, hours, 24)}:${formatElapsedTime(elapsedMilliseconds, minutes, 60)}:${formatElapsedTime(elapsedMilliseconds, seconds, 60)}`;

                }


            }



            function formatElapsedTime(elapsedtime, timeunit, base) {
                let time = base ? (elapsedtime / timeunit) % base : elapsedtime / timeunit;
                time = Math.floor(time);
                time = time < 10 ? '0' + time : time;
                return time;
            }

        </script>

</body>
</html>

我希望能够将 @attendance.DateAndTimeIn 转换为 json 对象，以便我可以将它与我的 javascript 函数一起使用并显示耗时，而不是 @attendance.DateAndTimeIn

最佳答案

我认为最简单的方法是将日期时间输出到 universal datetime string然后从该字符串创建一个 js Date 实例:

var dateString = '@Model.YourDate.ToString("u")';
var parsedDate = new Date(dateString);

请参阅此处的示例:https://dotnetfiddle.net/hY1ISw

更新:您可以将日期放入 html 属性中，然后在 js 代码中使用它:

<td class="DateTimeObject" data-date="@attendance.DateAndTimeIn.ToString("u")">@attendance.DateAndTimeIn</td>

<script type="text/javascript">     
    const dateElements = document.getElementsByClassName('DateTimeObject');
    for(let i = 0; i < dateElements.length; i++){
        var dateString = dateElements[i].dataset.date;          
        var parsedDate = new Date(dateString);              
    }
</script>

更新的示例:https://dotnetfiddle.net/fhz8bP

关于javascript - 如何在 razor 页面上将 C# Datetime 对象转换为 json 以进行客户端操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56648374/

25

4

0

文章推荐： javascript - 如何使用 JavaScript 读取 HTML 链接的文件名？

文章推荐： javascript - 使用 RegExp 和使用 javascript getAttribute 的测试

文章推荐： javascript - 将 Syncfusion Dashboard 安装到本地计算机

我可以在 Windows 上将 DVD 读取为单个文件吗？
我知道这在 Linux 上是可能的。我尝试使用 open("E:", 0); 和 open("E:\\", 0); 但它返回为 -1。我想将 DVD 作为一个大文件来读取，而不是将其用作文件系统。最
在 Linux 上将 CUDA 代码编译为静态库 (.a)
我正在尝试编译一个包含 CUDA 代码的小型库。我已成功将其编译为共享库，但我真正需要的是静态库。我有两个源文件: main.c:包含一个用C编写的测试函数。我用gcc编译这个文件 mai
c - 在 Linux 上将 * 作为命令行参数传递时的奇怪行为
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 9 年前。 Improve
在 Windows 上将 EXPAT 编译为静态链接的 .a
我正在使用 MingW 在 Windows 上编写 C 程序，并希望使用 EXPAT XML 库。我想静态编译我的程序，所以我需要静态 .a 库。有什么方法可以将 EXPAT 编译成 Windows
android - 如何在 android 上将 WHERE 子句添加到查询
我想将结果限制为 KEY_HOMEID 等于 journalId 的结果。我已经研究了几天，如有任何帮助，我们将不胜感激。 public Cursor fetchAllNotes(String jou
python - 如何在 Mac 上将 Python 完全恢复为出厂设置
我一直在寻找这个信息，但是由于可以通过 homebrew 和 pip 安装额外的包和 python 版本，我感觉我的环境很乱向上。此外，很久以前，我用 sudo pip install 和 sudo
bash - 如何在 Mac 上将 $PATH 更改为默认值？
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎不是关于 a specific programming problem, a softwar
Ghostscript:如何在 Windows 上将 PDF 与通配符合并
我正在尝试合并目录中的所有 *.pdf : gswin64c -q -dNOPAUSE -sDEVICE=pdfwrite -sOutputFile=Total_Files.pdf -dBATCH *
html - 在移动 View 上将 div 推到新行
所以我有一个简单的图像缩略图着陆页，例如: 在我的网站上，4 个并排显示在桌面上。如何强制它们在移动设备 View 中成对出现在一行中？所以:桌面: #### 手机: ## ## 最佳答案
python - 如何在 Ubuntu 上将 python3 安装恢复为默认设置
我正在使用 Ubuntu 21.04。我已删除 /usr/bin/python3和 /usr/lib/python3/因为某些软件包在二进制文件中出现错误。我的意思是重新安装python3到一个新的状
在 Windows 上将 googles v8 构建为共享库？
是否可以在 Windows 上使用 gyp 将 googles v8 构建为共享库(msvc 2012)？我试过的一切都不起作用。我试过的: python build\gyp_v8 -Dcompone
rubygems - 在 mac 上将 rubygems 更新到特定版本
我需要将 rubygems 从 1.3.5 更新到 1.4.2 但显然 rubygems update 只是将您更新到最新版本如何更新到 1.4.2？最佳答案您可以使用 RVM 安装特定
iphone - 我可以在 iPhone 上将 NSTask 用于我未分发的应用程序吗？
我还没有找到太多关于它的信息，但我看到了一些提示，表明可以在 iPhone 应用程序中使用 NSTask。如果可能的话，我将如何去做？我不想越狱我的 iPhone，但我正在开发的应用程序仅供内部使用
iphone - 如何在 iPhone 上将 UIWebView 的内容居中
我在 UIWebView 中有一个 map 图像。它默认加载在左上角。我希望它在 UIWebView 的中心初始化。有人知道怎么做吗？谢谢! 最佳答案如果 map 图像是页面中唯一的内容，它是否
kubernetes - 如何在 GCE 上将 NodePort 暴露给互联网
如何公开 NodePort 类型的服务上网没有使用类型 LoadBalancer ?我发现的每个资源都是通过使用负载均衡器来完成的。但我不希望负载平衡对我的用例来说既昂贵又不必要，因为我正在运行 p
java - 在 Android 上将 View 变为可编辑状态
是否可以将 View 变成可编辑的，例如 this image ？我知道我可以使用 GridView 来做到这一点。但是，我正在尝试使用 TableRows 来做到这一点，这可能吗？编辑:我真正想
heroku - 如何在 Heroku 上将 rake 任务作为工作进程运行？
假设我已将 Heroku 应用程序扩展为 1 个工作进程，但如何指定具有特定名称的 rake 任务应作为工作进程运行？最佳答案在你的项目中创建一个 Procfile，然后像这样将 rake 任务放
github - 在 GitHub 上将 Markdown 中的引用链接作为项目符号列表包含在内
目前，我在 GitHub 上一个项目的 README.md 文件中使用此 Markdown 文本: See the docs of [testthat][3] on how to write unit
在 C 上将 IPv4 转换为 IPv6
我正在尝试使用一些到 uint8_t 的转换将 IPv4 转换为 IPv6。我知道 IPv4 有 4 个字节，IPv6 有 2 个字节的 16 个无符号整数，但我找不到它们转换的方法。 #includ
c - 如何在 C 上将 argv[] 输入分离为两个不同的字符串？
我是编程新手，目前正在学习 C。您能帮我解决以下案例吗？一个例子是，如果用户输入“cbamike”，我想将其分成两个字符串:cba 和 mike。我尝试了下面的代码，但它不起作用: #includ

首页

博学

6Ren·AI

商城

javascript - 如何在 razor 页面上将 C# Datetime 对象转换为 json 以进行客户端操作