MVC3 Razor: call javascript function from view

javascript asp.net-mvc-3 razor

59,086

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

JS Fiddle Example

59,086

Author by

MagB

(current) Chief of Software Development, Software Engineer, Designer, Architect, Project Manager. Using Visual C#, .NET, WPF, MVVM, Caliburn Micro, HTML, XML, MS SQL, T-SQL, WCF, SCRUM, KANBAN, Release Train, Jira, Confluence, Git, SVN, TFS.

Updated on September 17, 2020

Comments

MagB over 3 years

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.

MagB over 12 years

in which folder should I put the .js file?
Richard Dalton over 12 years

Scripts with your other javascript files would make the most sense.
MagB over 12 years

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 over 12 years

It seems correct in my js fiddle example. Not sure what is wrong for you.
MagB over 12 years

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?
MagB over 12 years

ok I removed the function call from index.cshtml and the second runs normal now. :-) thx.
soniiic over 12 years

on the first line of your javascript code, you set var uhr = new Date();