I am working on an Auction site in Asp 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)
I am working on an Auction site in Asp 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')">
Share Improve this question edited Jul 5, 2018 at 20:41 C.Math asked Jul 5, 2018 at 19:49 C.MathC.Math 1731 gold badge1 silver badge13 bronze badgesWhen 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)
4 Answers
Reset to default 3Try with this syntax:
@foreach (var item in Model)
{
//code here
countdown(`${@item.EndDate}`)
}
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/ERcwAb
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 munity, 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.
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>