动态获取 DateTime.Now 和 Razor 页面中的 model DateTime 之间的差异

Question

我正在使用 c# .NET razor 页面并尝试动态更改“分钟前”计数。

基本上，我有这段代码：

@foreach(var comment in Model.Comments)
            {
                TimeSpan timeSpan = (DateTime.Now - comment.CommentDate);
                int minutesAgo = Convert.ToInt32(timeSpan.TotalMinutes);

                <div>
                    <p>@comment.Message</p>
                    <span>@minutesAgo minutes ago</span>
                </div> 
            }

计算有效，但它在页面上保持 static。 只要用户停留在页面上，我就会尝试更新它。

Answer 1

计算有效，但它在页面上保持静态。

<\/blockquote>

最快的方法是你可以用js来aoto刷新页面来进行时间更新。

Answer 2

一种方法是使用 html 数据属性和 js function 来更新显示的文本。 像这样：

<div class="text-center">
    <span class="dtu" data-datetime="@DateTime.Now.ToString("yyyy-MM-ddTHH:mm:ss")"></span>
</div>

<script type="text/javascript">
    //recall the page every one minute.....
    function update_call() {
        var dtus = document.getElementsByClassName('dtu');
        Array.prototype.every.call(dtus, function(el) {
            const dtPost = new Date(el.dataset.datetime);
            el.innerHTML = timeAgo(dtPost);
        });
        window.setTimeout(update_call, 1000*5);
    }
    window.setTimeout(update_call, 500);

    const MONTH_NAMES = [
        'January', 'February', 'March', 'April', 'May', 'June',
        'July', 'August', 'September', 'October', 'November', 'December'
    ];

    function getFormattedDate(date, prefomattedDate = false, hideYear = false) {
    const day = date.getDate();
    const month = MONTH_NAMES[date.getMonth()];
    const year = date.getFullYear();
    const hours = date.getHours();
    let minutes = date.getMinutes();

    if (minutes < 10) {
        // Adding leading zero to minutes
        minutes = `0${ minutes }`;
    }

    if (prefomattedDate) {
        // Today at 10:20
        // Yesterday at 10:20
        return `${ prefomattedDate } at ${ hours }:${ minutes }`;
    }

    if (hideYear) {
        // 10. January at 10:20
        return `${ day }. ${ month } at ${ hours }:${ minutes }`;
    }

    // 10. January 2017. at 10:20
    return `${ day }. ${ month } ${ year }. at ${ hours }:${ minutes }`;
    }


    // --- Main function
    function timeAgo(dateParam) {
    if (!dateParam) {
        return null;
    }

    const date = typeof dateParam === 'object' ? dateParam : new Date(dateParam);
    const DAY_IN_MS = 86400000; // 24 * 60 * 60 * 1000

    var todayDate = new Date(); 
    var now_utc =  Date.UTC(todayDate.getUTCFullYear(), todayDate.getUTCMonth(), todayDate.getUTCDate(), todayDate.getUTCHours(), todayDate.getUTCMinutes(), todayDate.getUTCSeconds());
    const today = new Date(now_utc);
    const yesterday = new Date(today - DAY_IN_MS);
    const seconds = Math.round((today - date) / 1000);
    const minutes = Math.round(seconds / 60);
    const isToday = today.toDateString() === date.toDateString();
    const isYesterday = yesterday.toDateString() === date.toDateString();
    const isThisYear = today.getFullYear() === date.getFullYear();


    if (seconds < 5) {
        return 'now';
    } else if (seconds < 60) {
        return `${ seconds } seconds ago`;
    } else if (seconds < 90) {
        return 'about a minute ago';
    } else if (minutes < 60) {
        return `${ minutes } minutes ago`;
    } else if (isToday) {
        return getFormattedDate(date, 'Today'); // Today at 10:20
    } else if (isYesterday) {
        return getFormattedDate(date, 'Yesterday'); // Yesterday at 10:20
    } else if (isThisYear) {
        return getFormattedDate(date, false, true); // 10. January at 10:20
    }

    return getFormattedDate(date); // 10. January 2017. at 10:20
    }
</script>