如何在 Razor 页面上将 C# 日期时间对象转换为 JSON 以进行客户端操作

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

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

@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

我认为最简单的方法是将日期时间输出到通用日期时间字符串，然后从该字符串创建一个 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

如果您向表中添加一个 ID，并在 dateTime 的 <td> 标记上有一个公共类，则可以循环遍历表中的所有行，例如这样。

$('#//TableID tr').each(function() {
    var dateTimeValue = $(this).find(".//DateTimeClass").html();    
});

或者，如果日期时间始终是 gunna 在表顺序中保持第二位，您可以替换此行

var dateTimeValue = $(this).find(".//DateTimeClass").html();

跟

var dateTimeValue = $(this).find("td").eq(1).html();

注意：除了 .html((，您还可以使用 .text((

相关内容

最新更新

热门标签：