将Razor变量传递到JavaScript函数

我正在Asp.net MVC中的一个拍卖网站上工作，我试图能够显示每个物品拍卖剩余时间的计时器。我使用模型将项目列表传递到我的cshtml页面，然后像这样迭代：

启动计时器的My javascript函数：

function countdown(time) {
    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = time - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Display the result in the element with id="timeLeft"
    document.getElementById("timeLeft").innerHTML = days + "d " + hours + "h "
        + minutes + "m " + seconds + "s ";

}, 1000);

然后是模型的迭代器，用项目的结束日期调用js函数

@foreach (var item in Model)
    {
        //code here
        countdown(@item.EndDate)
        <text id="timeLeft"></text>
    }

@foreach（模型中的变量项）
{
//代码在这里
倒计时（@item.EndDate）
}

我的脚本被

我遇到的问题是如何使用c#razor变量调用这个js函数。为一个项目做一些基本的事情，比如：

当我放入剃须刀变量时，它会使我的函数变灰。 我需要如何将变量传递到js函数中？
EX：（带有单一型号项目）

尝试使用以下语法：

@foreach (var item in Model)
{
    //code here
    countdown(`${@item.EndDate}`)
}

---

如果您想在javascript中创建计时器，我将使用

window.setInterval

函数，然后将第二个参数设置为time interval

此函数

倒计时

需要传递三个参数

年底

月末

结束日

函数倒计时（年末、月末、月末）{
setInterval（函数（）{StartCount（endYear，endMonth，endDay，'andy timer'）；}，1000）；
}
功能开始计数（年末、月末、月末）{
var now=新日期（）；
var endDate=新日期（endYear，endMonth-1，endDay）；
var leftTime=endDate.getTime（）-now.getTime（）；
var leftSecond=parseInt（leftTime/1000）；
var day=数学楼层（左秒/（60*60*24））；
var小时=数学楼层（（左第二天*24*60*60）/3600）；
变量分钟=数学楼层（（左第二天*24*60*60小时*3600）/60）；
var second=数学楼层（左二天*24*60*60小时*3600分钟*60）；
document.getElementById（“timeLeft”）.innerHTML=day+d+hour+h
+分钟+米+秒+秒；
}
倒计时（2018,10,5）

---

我想出了一个疯狂的方法来做我想做的事情，可能没有效率，可能是整个编码社区的罪过，但它是：

@foreach (var item in Model)
{
    <script>
    function countdown(endYear, endMonth, endDay, endHours, endMin, num) {
        window.setInterval(function () { StartCount(endYear, endMonth, endDay, endHours, endMin, num); }, 1000);
    }

    function StartCount(endYear, endMonth, endDay, endHours, endMin, num) {
        var now = new Date();
        var endDate = new Date(endYear, endMonth - 1, endDay, endHours, endMin);

        var leftTime = endDate.getTime() - now.getTime();

        var leftSecond = parseInt(leftTime / 1000);

        var day = Math.floor(leftSecond / (60 * 60 * 24));

        var hour = Math.floor((leftSecond - day * 24 * 60 * 60) / 3600);

        var minute = Math.floor((leftSecond - day * 24 * 60 * 60 - hour * 3600) / 60);

        var second = Math.floor(leftSecond - day * 24 * 60 * 60 - hour * 3600 - minute * 60);

        var id = "timeLeft" + num;

        document.getElementById(id).innerHTML = day + "d " + hour + "h "
      + minute + "m " + second + "s ";
    }
    countdown(@item.EndDate.Year, @item.EndDate.Month, @item.EndDate.Day,@item.EndDate.Hour, @item.EndDate.Minute, @num)
    </script>

    @{string countNum = "timeLeft" + num;}
     <text id= @countNum></text>
     @{num++;}
     //code
}

@foreach（模型中的变量项）
{
函数倒计时（endYear、endMonth、endDay、endHours、endMin、num）{
setInterval（函数（）{StartCount（endYear，endMonth，endDay，endHours，endMin，num）；}，1000）；
}
函数开始计数（结束年、结束月、结束日、结束小时、结束分钟、数量）{
var now=新日期（）；
var endDate=新日期（endYear、endMonth-1、endDay、endHours、endMin）；
var leftTime=endDate.getTime（）-now.getTime（）；
var leftSecond=parseInt（leftTime/1000）；
var day=数学楼层（左秒/（60*60*24））；
var小时=数学楼层（（左第二天*24*60*60）/3600）；
变量分钟=数学楼层（（左第二天*24*60*60小时*3600）/60）；
var second=数学楼层（左二天*24*60*60小时*3600分钟*60）；
var id=“timeLeft”+num；
document.getElementById（id）.innerHTML=day+d+hour+h
+分钟+米+秒+秒；
}
倒计时（@item.EndDate.Year、@item.EndDate.Month、@item.EndDate.Day、@item.EndDate.Hour、@item.EndDate.Minute、@num）
@{string countNum=“timeLeft”+num；}
@{num++；}
//代码
}

---

但它仍然异步加载所有项目，然后时钟都会在一秒钟后出现，所有内容都会相应地移动。可能是由于我最初的问题，做不到能够调用body onload

我似乎无法将该调用直接放在for循环中，当我尝试使用单个项时，我遇到了与vs不识别该函数相同的问题。您尝试过使用反勾号（或引号）吗？我的意思是，这是一种将C#变量传递到javascript的方法。我的方法与此完全相同：它仍然以蓝色文本显示函数签名，表示它是一个字符串。我可以这样称呼它，它只需在变量周围加上单引号就可以识别它，因为你在普通引号内：这实际上是我第一次尝试的，在我的帖子中^，仍然不起作用：（不幸的是，我的问题仍然存在，因为当我尝试调用时，我仍然存在与图片中所示相同的问题。变量完全没有问题，这是无法识别的函数。除非我遗漏了什么，否则您发布的演示应用程序链接似乎没有保存您的更改。我可以用您的scri将其用于一个项目。）pt，并在脚本底部用倒计时（Model.EndDate.Year、Model.EndDate.Month、Model.EndDate.Day、Model.EndDate.Hour）调用它（当然有@），我仍然不能使用body onload，但这对单个项没有问题。如果要设置多个项，需要创建它们的div并将此函数附加到它们

@foreach (var item in Model)
{
    <script>
    function countdown(endYear, endMonth, endDay, endHours, endMin, num) {
        window.setInterval(function () { StartCount(endYear, endMonth, endDay, endHours, endMin, num); }, 1000);
    }

    function StartCount(endYear, endMonth, endDay, endHours, endMin, num) {
        var now = new Date();
        var endDate = new Date(endYear, endMonth - 1, endDay, endHours, endMin);

        var leftTime = endDate.getTime() - now.getTime();

        var leftSecond = parseInt(leftTime / 1000);

        var day = Math.floor(leftSecond / (60 * 60 * 24));

        var hour = Math.floor((leftSecond - day * 24 * 60 * 60) / 3600);

        var minute = Math.floor((leftSecond - day * 24 * 60 * 60 - hour * 3600) / 60);

        var second = Math.floor(leftSecond - day * 24 * 60 * 60 - hour * 3600 - minute * 60);

        var id = "timeLeft" + num;

        document.getElementById(id).innerHTML = day + "d " + hour + "h "
      + minute + "m " + second + "s ";
    }
    countdown(@item.EndDate.Year, @item.EndDate.Month, @item.EndDate.Day,@item.EndDate.Hour, @item.EndDate.Minute, @num)
    </script>

    @{string countNum = "timeLeft" + num;}
     <text id= @countNum></text>
     @{num++;}
     //code
}