为什么我的 JavaScript 没有在这个 Razor 代码中执行？答案

【问题标题】：Why is my javascript not executed within this Razor code?为什么我的 JavaScript 没有在这个 Razor 代码中执行？
【发布时间】：2011-06-23 01:20:11
【问题描述】：

我有一些来自本教程的工作 Raphael-js 代码：http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/，我正在尝试将工作代码包含到 MVC3 Razor 视图中。 javascript没有被执行。我似乎找不到解释如何在 Razor 中包含 javascript 的错误或好的资源。这是我的 .cshtml，我希望 Rapheael 绘图在 canvas_container div 中呈现。

@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
        http://asp.net/mvc</a>.
</p>

<div id="canvas_container">
</div>

@section JavaScript
{
    <script type="text/javascript" src="@Url.Content("~/Scripts/raphael.js")" />
    <script type="text/javascript">
        window.onload = function () {
            var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
            var circle = paper.circle(100, 100, 80);
            for (var i = 0; i < 5; i += 1) {
                var multiplier = i * 5;
                paper.circle(250 + (2 * multiplier), 100 + multiplier, 50 - multiplier)
            }
            var rectangle = paper.rect(200, 200, 250, 100);
            var ellipse = paper.ellipse(200, 400, 100, 50);
        }
    </script>
}

这是未执行 javascript 的渲染视图：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Home Page</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>MVC Movie App</h1>
            </div>
            <div id="logindisplay">
                    [ <a href="/Account/LogOn">Log On</a> ]
            </div>
            <nav>
                <ul id="menu">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                </ul>
            </nav>
        </header>
        <section id="main">
                <h2>Welcome to ASP.NET MVC!</h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
            http://asp.net/mvc</a>.
    </p>

    <div id="canvas_container">
    </div>
        </section>
        <footer>

        </footer>
    </div>
        <script type="text/javascript" src="/Scripts/raphael.js" />
        <script type="text/javascript">
            window.onload = function () {
                var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
                var circle = paper.circle(100, 100, 80);
                for (var i = 0; i < 5; i += 1) {
                    var multiplier = i * 5;
                    paper.circle(250 + (2 * multiplier), 100 + multiplier, 50 - multiplier)
                }
                var rectangle = paper.rect(200, 200, 250, 100);
                var ellipse = paper.ellipse(200, 400, 100, 50);
            }
        </script>
</body>
</html>

谢谢斯科特

【问题讨论】：

标签： javascript asp.net-mvc-3 razor raphael

【解决方案1】：

它不起作用，因为您的 javascript 遵循自关闭的 script 标记，即 invalid。

你需要改变

<script type="text/javascript" src="/Scripts/raphael.js" />

到

<script type="text/javascript" src="/Scripts/raphael.js"></script>

【讨论】：

同样的推理也解决了我的问题。谢谢！