I am new in MVC3 Razor and want to show running time on a view (index.cshtml). I use a javascript function and put it in _Layout.cshtml so all other "home" views can use it (see following snippet)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
@ViewBag.Title
</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<script type="text/javascript">
var uhr = new Date();
var minuten;
var stunden;
var sekunden;
var interval = 500;
function datum(id) {
uhr.setTime(uhr.getTime() + interval);
window.setTimeout(function () { datum(id) }, interval);
minuten = uhr.getMinutes();
stunden = uhr.getHours();
sekunden = uhr.getSeconds();
if (minuten < 10) { minuten = '0' + minuten; }
if (sekunden < 10) { sekunden = '0' + sekunden; }
if (stunden < 10) { stunden = '0' + stunden; }
document.getElementById(id).innerHTML = 'Jetzt ist: ' + stunden + ':' + minuten + ':' + sekunden;
}
</script>
My questions: 1. how can I call this function (e.g. datum("uhr")) from index.cshtml? My try (see following) doesn't work:
@section SideBar {
<p>
<ul>
<li><a href="Index.cshtml">Add Job</a></li>
<li><a href="About.cshtml">About</a></li>
</ul>
</p>
<p>
The time is: datum("uhr");
</p>
}
- Any other "better" way?
- Is it a good practice? I am not sure if it is correct putting javascript function in _Layout.cshtml.
Thx in advance.
asked Sep 16, 2011 at 10:19
2 Answers 2
You should move the code from _Layout.cshtml into a seperate .js file and add a reference to it.
Also, you should change the index.cshtml code to be this:
@section SideBar {
<p>
<ul>
<li><a href="Index.cshtml">Add Job</a></li>
<li><a href="About.cshtml">About</a></li>
</ul>
</p>
<p>
The time is: <span id="uhr"></span>
</p>
<script type="text/javascript">datum("uhr");</script>
}
answered Sep 16, 2011 at 10:32
7 Comments
MagB
in which folder should I put the .js file?
Richard Dalton
Scripts with your other javascript files would make the most sense.
MagB
I put the new .js in scripts folder and it works. But the second runs faster than the real second. How to control this? Thx in advance.
Richard Dalton
It seems correct in my js fiddle example. Not sure what is wrong for you.
MagB
I guess that the second is somehow counted twice. In your js fiddle on html section there is no call to datum("uhr"), while in your snippet for index.cshtml there is call to it. In js there is also call datum("uhr"). is my guess right?
|
The last line of the datum function should return the time rather than setting the innerHTML:
return 'Jetzt ist: ' + stunden + ':' + minuten + ':' + sekunden;
and your HTML can then be something like this:
The time is: <script type="text/javascript">datum(uhr)</script>
answered Sep 16, 2011 at 10:27
Comments
default