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

我有一些工作Raphael-js代码从这个教程：http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/，我试图包含工作代码到MVC3剃刀视图。 JavaScript没有得到执行。我似乎无法找到解决如何在Razor中包含JavaScript的错误或好的资源。这里是我的.cshtml，我期望Rapheael绘图在canvas_container div处呈现。为什么我的JavaScript没有在这个Razor代码中执行？

@{ 
    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>

感谢斯科特

来源

2011-06-23 Scott Chamberlin

它不工作，因为你的JavaScript遵循自我封闭script标签，这是invalid。

您需要更改

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

到

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

来源

2011-06-23 01:54:35 Emmett

啊，非常感谢！ –

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

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

回答

相关问题