如何将ac＃日期时间对象转换为剃刀页面上的json以进行客户端操作

Question

I am trying to convert a stored datetime object from database to Json object on the razor view page so as to manipulate it and compute time elapsed for a list of users in real time. 我正在尝试将存储的datetime对象从数据库转换为razor视图页面上的Json对象，以便对其进行操作并实时计算用户列表所经过的时间。 I'm not sure how to do this. 我不确定该怎么做。 Please help! 请帮忙！

I figured it would be best to convert it on the view page but I'm not sure if that is the best solution 我认为最好在视图页面上对其进行转换，但是我不确定这是否是最佳解决方案

@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>

I want to be able to convert @attendance.DateAndTimeIn to a json object so I can use it with my javascript function and display the time elapsed instead of @attendance.DateAndTimeIn 我希望能够将@attendance.DateAndTimeIn转换为json对象，因此我可以将其与我的javascript函数一起使用，并显示经过的时间而不是@attendance.DateAndTimeIn

Answer 1

I think that the easiest way to do it is output your datetime to universal datetime string and then create a js Date instance from that string: 我认为最简单的方法是将datetime输出为通用datetime字符串，然后从该字符串创建一个js Date实例：

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

See example here: https://dotnetfiddle.net/hY1ISw 在此处查看示例： https ： //dotnetfiddle.net/hY1ISw

Update: You can put your date in the html attribute and later use it in your js code: 更新：您可以将日期放入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>

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

Answer 2

If you add an ID to the table as well as having an common class on the <td> tag for the dateTime you could loop through all the rows in the tables such as this. 如果将ID添加到表中，并且在<td>标记上具有dateTime的公共类，则可以遍历表中的所有行，例如：

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

OR if the datetime is always gunna remain second in the table order, you could replace this line 或者，如果datetime始终是gunna仍在表顺序中排第二，则可以替换此行

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

with 同

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

NOTE: Instead of .html(), you could also use .text() 注意：除了.html（），您还可以使用.text（）

如何将ac＃日期时间对象转换为剃刀页面上的json以进行客户端操作

问题描述

2 个解决方案

解决方案1
1 2019-06-18 12:27:16

解决方案2
0 2019-06-18 11:59:34

如何将ac＃日期时间对象转换为剃刀页面上的json以进行客户端操作

问题描述

2 个解决方案

解决方案1 1 2019-06-18 12:27:16

解决方案2 0 2019-06-18 11:59:34

解决方案1
1 2019-06-18 12:27:16

解决方案2
0 2019-06-18 11:59:34