我怎样才能把这个 javascript 放到脚本文件夹中并且仍然可以工作？ (C#MVC 5)

Question

下面是我在 C# MVC 5 中的代码。我制作了一个名为 _ClockPartial.cshtml 的局部视图，它是一个简单的秒表，我使用“@Html.Partial("_ClockPartial")”将其放入主页 Index.cshtml .

我的问题是如何将 javascript 分离到脚本文件夹 (~/Scripts/clocker.js) 中但仍然可以正常运行？当我尝试自己将其分开时，我还没有让它正常工作。我听说你不能在部分视图中这样做，但我不知道为什么。即使我不能部分执行它，我仍然想知道如何将 javascript 分离到它自己的文件中并在我的 .cshtml 视图之一中调用它。提前感谢您的帮助！

第一个文件是我的 Index.cshtml

@{
    ViewBag.Title = "Home Page";
}
@using Microsoft.AspNet.Identity
@Scripts.Render("~/bundles/jquery")

<div class="jumbotron">
    <h1>Clocker</h1>
    <p class="lead">Welcome to clocker! Please sign in to start clocking your hours! Don't do too little or your hard earned cash goes into the punishiment piggy bank!</p>

    @if (Request.IsAuthenticated)
    {
        @Html.Partial("_ClockPartial")
    }
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

这是 _ClockPartial.cshtml

@Scripts.Render("~/bundles/jquery")

<h2><time>03:00:00</time></h2>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="clear">clear</button>
<script type="text/javascript">
        $(document).ready(function () {
            var h1 = document.getElementsByTagName('h2')[0],
                start = document.getElementById('start'),
                stop = document.getElementById('stop'),
                clear = document.getElementById('clear'),
                seconds = 0, minutes = 0, hours = 3,
                isRunning = false,
                t;

            /* increments timer */
            function add() {
                seconds++;
                if (seconds >= 60) {
                    seconds = 0;
                    minutes++;
                    if (minutes >= 60) {
                        minutes = 0;
                        hours++;
                    }
                }

                h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

                timer();
            }

            /* decrements timer */
            function subtract() {
                seconds--;
                if (seconds < 0) {
                    seconds = 59;
                    minutes--;
                    if (minutes < 0) {
                        minutes = 59;
                        hours--;
                    }
                }

                h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

                timer();
            }
            function timer() {
                t = setTimeout(subtract, 1000);
            }
            /* enable following line to start timer automatically */
            //timer();


            /* Start button */
            start.onclick = function () {
                if (!isRunning) {
                    timer();
                    isRunning = true;
                }
            }

            /* Stop button */
            stop.onclick = function () {
                clearTimeout(t);
                isRunning = false;
            }

            /* Clear button */
            clear.onclick = function () {
                h1.textContent = "03:00:00";
                seconds = 0; minutes = 0; hours = 3;
                isRunning = false;
            }
        });
</script>
<p></p>

Answer 1

在 Scripts 文件夹中新建一个 js 文件，并在其中添加您的局部视图的以下代码，假设它的名称是 clocker.js：

    $(document).ready(function () {
        var h1 = document.getElementsByTagName('h2')[0],
            start = document.getElementById('start'),
            stop = document.getElementById('stop'),
            clear = document.getElementById('clear'),
            seconds = 0, minutes = 0, hours = 3,
            isRunning = false,
            t;

        /* increments timer */
        function add() {
            seconds++;
            if (seconds >= 60) {
                seconds = 0;
                minutes++;
                if (minutes >= 60) {
                    minutes = 0;
                    hours++;
                }
            }

            h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

            timer();
        }

        /* decrements timer */
        function subtract() {
            seconds--;
            if (seconds < 0) {
                seconds = 59;
                minutes--;
                if (minutes < 0) {
                    minutes = 59;
                    hours--;
                }
            }

            h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

            timer();
        }
        function timer() {
            t = setTimeout(subtract, 1000);
        }
        /* enable following line to start timer automatically */
        //timer();


        /* Start button */
        start.onclick = function () {
            if (!isRunning) {
                timer();
                isRunning = true;
            }
        }

        /* Stop button */
        stop.onclick = function () {
            clearTimeout(t);
            isRunning = false;
        }

        /* Clear button */
        clear.onclick = function () {
            h1.textContent = "03:00:00";
            seconds = 0; minutes = 0; hours = 3;
            isRunning = false;
        }
    });

现在修改 BundleConfig.cs 文件，该文件通常位于项目的 App_Start 文件夹中，并将新的 js 文件包含在 RegisterBundles 方法之后的 bundles 集合中那里的所有其他捆绑包都喜欢：

bundles.Add(new ScriptBundle("~/bundles/clocker").Include(
                    "~/Scripts/clocker.js"));

现在在您的主视图中包含其他脚本之后，也为此脚本添加包含：

@{
    ViewBag.Title = "Home Page";
 }
@using Microsoft.AspNet.Identity
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/clocker")

现在你的部分看起来像：

<h2><time>03:00:00</time></h2>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="clear">clear</button>

希望对你有帮助！