在 ASP.Net MVC 视图中使用 javascript 和 css 文件？答案

【问题标题】：using javascript and css files in ASP.Net MVC View?在 ASP.Net MVC 视图中使用 javascript 和 css 文件？
【发布时间】：2009-09-17 07:28:18
【问题描述】：

我在让 jQuery 插件在我的 MVC 视图中正常工作时遇到了一些问题。这是它目前的样子：（我已将所有需要的 jQuery 包含和 css 文件复制到站点的 /Scripts 文件夹中）

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="/Scripts/jquery.MetaData.js" type="text/javascript"></script>
<script src="/Scripts/jquery.rating.js" type="text/javascript"></script>
<link href="/Scripts/jquery.rating.css" rel="stylesheet" type="text/css" />

<input name="rating" type="radio" class="star" value="1"/>
<input name="rating" type="radio" class="star" value="2"/>
<input name="rating" type="radio" class="star" value="3"/>
<input name="rating" type="radio" class="star" value="4"/>
<input name="rating" type="radio" class="star" value="5"/>
</asp:Content>

intellisense 抱怨说上面的链接元素不能嵌套在 div 标签中（什么 div？）intellisense 也不能在任何输入标签中找到“star”类。

当我导航到有问题的页面时，我看不到星星，只有单选按钮列表。就好像 jQuery 的东西没有运行一样。

我应该将脚本和链接标签放在 MVC 视图中的什么位置？任何人都有我可以作为例子的小样本？

我将从 Wrox 的“Professional ASP.Net MVC”中查看这个示例，而 Ajax 章节还有一些不足之处，因为代码都是 sn-ps，没有完整的页面。本书的 Wrox 网站章节代码也由相同的 sn-ps 组成，每个文本文件一个，没有用处。

谢谢！

【问题讨论】：

标签： javascript jquery asp.net-mvc

【解决方案1】：

在您的母版页文件中，在头部区域创建一个内容占位符。您可以在需要将脚本和样式插入特定视图时使用它，这意味着您不会偏离说明这些文件应该放在哪里的准则。

在您的 Site.Master 文件中：

<head>
<!-- head stuff here -->
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>

在你看来的 aspx 文件中：

<asp:Content ContentPlaceHolderID="HeadContent" runat="server">
    <script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.MetaData.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.rating.js" type="text/javascript"></script>
    <link href="/Scripts/jquery.rating.css" rel="stylesheet" type="text/css" />
</asp:ContentPlaceHolder>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <input name="rating" type="radio" class="star" value="1"/>
    <input name="rating" type="radio" class="star" value="2"/>
    <input name="rating" type="radio" class="star" value="3"/>
    <input name="rating" type="radio" class="star" value="4"/>
    <input name="rating" type="radio" class="star" value="5"/>
</asp:Content>

【讨论】：

【解决方案2】：

您需要将<link /> 放在<head>...</head> 部分，脚本标签应该没问题。您可以将其放在母版页的头部。

【讨论】：

感谢大家的所有提示。事实证明，一旦我在 contentheaders 的正确位置获得了链接和

【解决方案3】：

使用 Helper 方法获取脚本和 css 文件的正确位置也是一个有用的练习。

<script src="<%= Html.Content("~/Scripts/jquery-1.3.2.js") %>
        type="text/javascript"></script>

【讨论】：

【解决方案4】：

请检查fiddler 并查看当您调用特定文件时您得到的响应类型......如果脚本正确呈现并且针对该特定页面......如果没有，请发布响应和复制..

当我在 mvc 中使用 js 时遇到了类似的问题，我无法加载 j 查询...因此我创建了一个帮助类，它为我返回绝对路径

    public static string ResolveUrl(this HtmlHelper html, string virtualUrl)
    {
        Control con = new Control();
        var RelativeUrl = con.ResolveUrl(virtualUrl);
        if (!virtualUrl.StartsWith("~/"))
            return RelativeUrl;

        virtualUrl = virtualUrl.Remove(0, 2);

        string applicationPath = html.ViewContext.HttpContext.Request.ApplicationPath;
        if (string.IsNullOrEmpty(applicationPath) || !applicationPath.EndsWith("/"))
        {
            applicationPath = applicationPath + "/";
        }

        return applicationPath + virtualUrl;
      }
  }

在我看来，我这样称呼页面......

<script src="<%= Html.ResolveUrl("~") %>Scripts/jquery-1.3.2.js" type="text/javascript"></script>

【讨论】：

【解决方案5】：

您是否为您的网站使用母版页？如果是这样，您可以将所有包含标记放在母版页中，然后使用母版页的所有视图都可以使用它。

【讨论】：

嗨，费尔明，感谢您的回复。我正在使用母版页，并尝试将上面的所有脚本和链接标签放入其中。 Intellisense 没有抱怨，但页面没有渲染任何星星。事实上，什么都没有渲染！我还想避免将这些 javascript 文件放入 Site.Master，因为只有一个页面会使用它们。
您是否使用过类似 addons.mozilla.org/en-US/firefox/addon/…> 之类的工具来查看页面的呈现方式以及 javascript 是否正常加载。您有 $(function() {}在你的 js 文件中？