jquery 将Razor变量传递到JavaScript函数

wfsdck30 于 2023-03-17 发布在 jQuery

关注(0)|答案(4)|浏览(156)

我正在www.example.com MVC中开发一个拍卖网站Asp.net，我试图能够显示一个计时器，显示每件物品的拍卖还剩多少时间。我将一个物品列表与我的模型一起传递到我的cshtml页面，然后像这样迭代它们：

启动计时器的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);

然后是Model的迭代器，调用带有项目结束日期的js函数

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

我的脚本由<script src="~/Scripts/countdown.js" />引用
我遇到的问题是如何用一个c# razor变量调用这个js函数。为一个项目做一些基本的事情，比如：

<body onload= "countdown('@item.EndDate')">

当我把我的razor变量放进去的时候，它会把我的函数灰化，我需要怎样把我的变量传递到我的js函数中呢？

EX：（单数型号项目）

第一节第一节第一节第一节第一次

jquery

来源：https://stackoverflow.com/questions/51198880/passing-razor-variable-into-javascript-function

4条答案

按热度按时间

9nvpjoqh1#

尝试使用以下语法：

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

赞(0）回复(0）举报 2023-03-17

5m1hhzi42#

如果你想用javascript做一个定时器，我会使用window.setInterval函数，然后设置第二个参数为时间间隔。
此函数countdown需要传递三个参数
1.结束年份
1.结束月份
1.结束日

function countdown(endYear,endMonth,endDay) {
    	 window.setInterval(function () { StartCount(endYear, endMonth, endDay, 'andy timer'); }, 1000);
    }

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

    	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);
    	
          document.getElementById("timeLeft").innerHTML = day + "d " + hour + "h "
        + minute + "m " + second + "s ";
    }

    countdown(2018,10,5)

<div id='timeLeft'></div>

您可以在body标记上使用此选项

<body onload= "countdown(@Model.EndDate.Year,@Model.EndDate.Month,@Model.EndDate.Day)">

编辑

它在C# MVC上运行：https://dotnetfiddle.net/ERcwAb

赞(0）回复(0）举报 2023-03-17

w8ntj3qf3#

我想出了一个疯狂的方法来做我想做的事情，可能效率不高，可能是整个编码社区的罪恶，但它是这样的：

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

但是它仍然异步加载，项目将全部加载，然后时钟将在一秒钟后出现，所有内容将相应地移动。可能是由于我最初的问题，无法在加载时调用body。

赞(0）回复(0）举报 2023-03-17

zzwlnbp84#

这就是我在AspNetMVC 5中如何将变量customFields传递给按钮onAddRow()的

<form id="contactsForm">
        <table>
            [...]
        </table>
        <button type="button">Save To Excel</button>
        @{
            <button type="button" onclick="onAddRow(`@customFields`);">Add Row</button>
        }
    </form>

赞(0）回复(0）举报 2023-03-17

我来回答

jquery 将Razor变量传递到JavaScript函数

4条答案

相关问题

热门标签

最新问答