Passing Razor Variable into JavaScript Function

Question

I am working on an Auction site in Asp.net MVC and I am trying to be able to display how a timer of how much time is left on each item's auction. I pass a list of items to my cshtml page with my Model and then iterate through them like so:

My javascript function to start timer:

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);

Then my iterator of my Model, calling js function with the item's end date

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

I have my script referenced by <script src="~/Scripts/countdown.js" />

The problem I am having is how to call this js function with a c# razor variable. Doing something basic for one item like:

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

When I put my razor variable it greys out my function. How do I need to go about passing my variable into my js function?
EX: (with singular Model item)

dotnetdev4president · Accepted Answer · 2018-07-05 19:54:20Z

3

Try with this syntax:

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

answered Jul 5, 2018 at 19:54

dotnetdev4president

5524 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

C.Math Over a year ago

It doesn't seem like I can put that call directly in my for loop and when I try it with a singular item with <body onload= "countdown(${@item.EndDate})"> I have the same issue with vs not recognizing the function.

dotnetdev4president Over a year ago

Do you tried with backticks (or quotation marks)? I mean this is the way to pass C# variables in to javascript.

C.Math Over a year ago

I have it exactly like this: <body onload= "countdown(${@item.EndDate})"> and it still shows the function signature in blue text which indicates that it is a string. I can call it like <body onload= "countdown()"> and it recognizes it just fine

dotnetdev4president Over a year ago

Try with single quotation marks around the variable, because you are inside normal quotation marks: <body onload= "countdown('@item.EndDate')">

C.Math Over a year ago

That is actually what I first tried and is in my post^, still doesn't work:(

|

D-Shih · Accepted Answer · 2018-07-05 21:00:23Z

2

If you want to make a timer in javascript, I would use window.setInterval function, then set the second parameter to be time interval.

This function countdown need to pass three parameter

End Year
End Month
End Day

    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>

You can use this on the body tag

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

EDIT

It worked on c# MVC online: https://dotnetfiddle.net/ERcwAb

edited Jul 5, 2018 at 21:00

answered Jul 5, 2018 at 20:15

D-Shih

46.5k6 gold badges37 silver badges56 bronze badges

6 Comments

C.Math Over a year ago

Unfortunately, my problem still persists since when I try to call <body onload= " with double quotes and I have a parameter with an '@' sign, it makes the function a string and doesn't recognize to call it.

C.Math Over a year ago

I still have the same issue as shown in my pictures. The variables are completely fine, it's the function that becomes unrecognizable.

C.Math Over a year ago

Unless I'm missing something, it seems the demo app link you posted didn't save your changes

C.Math Over a year ago

I was able to get it working for one item with your script and calling it with countdown(Model.EndDate.Year, Model.EndDate.Month, Model.EndDate.Day,Model.EndDate.Hour at the bottom of the script (with @'s of course) I still cannot use the body onload but that is okay for the single item.

D-Shih Over a year ago

If you want to set multiple item you need to create their div and append this function to them

|

C.Math · Accepted Answer · 2018-07-06 16:40:25Z

I figured out a crazy way to do what I was trying to do, might not be efficient, might be a sin to the entire coding community, but here it is:

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

But it still loads asynchronously where the items will all load, then the clocks all appear a second later and all content is moved accordingly. May be due to my initial issue of not doing able to call body onload.

avr-girl · Accepted Answer · 2023-03-13 09:24:29Z

0

This is how I passed my variable customFields to my button onAddRow() in Asp Net MVC 5

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

answered Mar 13, 2023 at 9:24

avr-girl

5671 gold badge7 silver badges22 bronze badges

Collectives™ on Stack Overflow

Passing Razor Variable into JavaScript Function

4 Answers 4

8 Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related