在尝试将自定义 Javascript 集成到 ASP.NET 网络表单应用程序中遇到麻烦之后答案

【问题标题】：Trouble after trouble trying to integrate custom Javascript into an ASP.NET webforms app在尝试将自定义 Javascript 集成到 ASP.NET 网络表单应用程序中遇到麻烦之后
【发布时间】：2016-10-30 19:45:00
【问题描述】：

我在这里泡菜......

我正在尝试创建一个针对 .NET 4.5.2 的新的、几乎标准的 ASP.NET Webforms 应用程序。我以前做过很多次 - 但从未遇到过这些问题（并且无法完全弄清楚 为什么 它们现在会发生，以前从未发生过......）。

我的客户提供了一组 CSS 和 Javascript 作为项目的基础，其中包括 Bootstrap 和 jQuery。

现在，当我试图让我的第一个简单页面工作时，我在页面中添加一些额外的 Javascript 时遇到了严重的麻烦。

尝试 #1

我试图像这样包含我的 Javascript 文件：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Web.MyMaster" %>
<!DOCTYPE html>
<html lang="en" class="no-js no-ie">
<head runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=$start">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <webopt:BundleReference runat="server" Path="~/Content/css" />

    <!-- Favicons -->
    <link rel="shortcut icon" href="~/Images/Icons/favicon.ico" />

    <!-- Scripts -->
    <script type="text/javascript" src="/Scripts/vendors.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.validate.min.js"></script>

    <asp:ContentPlaceHolder ID="HeaderContent" runat="server"></asp:ContentPlaceHolder>
</head>

这似乎可行 - 直到我第一次部署到我们的测试环境。在那里，应用程序没有“根”，例如它们安装在应用程序路径为 http://test.server.com/apps/MyApp 的 IIS 设置中 - 现在我对 /Scripts/.... 的引用全部中断，找不到任何内容

尝试 #2

我尝试更改脚本的包含以使用我之前使用过的ResolveUrl() 方法：

<!-- Scripts -->
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/vendors.min.js") %>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery.validate.min.js") %>"></script>

所以在这种情况下，ASP.NET应该根据应用程序的根目录（无论它在哪里）解析这些名称并包含这些脚本。

麻烦：现在我收到一个错误（在启动时）说类似（从德语免费翻译）：

无法修改控件集合，因为控件包含代码块（例如）

对不起？！？！？！？！？！

尝试 #3

所以我最后的办法是使用这样的数据绑定表达式：

<!-- Scripts -->
<script type="text/javascript" src="<%# ResolveUrl("~/Scripts/vendors.min.js") %>"></script>
<script type="text/javascript" src="<%# ResolveUrl("~/Scripts/jquery.validate.min.js") %>"></script>

这需要我做一个

Page.Header.DataBind();

在母版页的OnInit 事件处理程序中，一旦我这样做了，当我尝试使用 DevExpress Grids 时，就会收到一个严重错误：

加载视图状态失败。正在加载视图状态的控制树必须与在先前请求期间用于保存视图状态的控制树匹配。例如，动态添加控件时，在回发期间添加的控件必须与在初始请求期间添加的控件的类型和位置相匹配。

好的，所以我的智慧已经走到了尽头 - 如何我可以在 ASP.NET Webforms 应用程序中包含一些 Javascript 文件今天，在 2016 年，一切正常 - 没有讨厌的 .NET 错误，没有找不到 Javascript.......你有什么方法来解决我的这个困境？

【问题讨论】：

您的页面是否驻留在应用程序根目录中？如果是这样，您可以简单地使用相对 URL，例如<script type="text/javascript" src="Scripts/vendors.min.js"></script>.
@FrédéricHamidi：不，我的页面位于多个子文件夹和其中的子文件夹中

标签： javascript c# webforms asp.net-4.5

【解决方案1】：

WebForms 在脚本标签方面很特别。您可以做的一件事是使用ScriptManager，如this answer 所述

此外，如果您从 <head> 标记中删除 runat="server"，则尝试 #2 将起作用。如果您没有从代码隐藏中访问 head 标签，则无需将其作为服务器控件。

或者，对于更“现代”的方法，ASP.NET Bundling and Minification 的东西也适用于 WebForms。我在几个项目中使用它没有任何问题。

【讨论】：

如果我从<head> 中删除runat="server"，我将无法再设置Page.Title 属性.....
至于捆绑和缩小：听起来是个好主意，但我有很多问题 - 尝试将各种 *.js 文件组合成一个捆绑包，但在尝试时将该捆绑包（带有“逻辑”名称）添加到脚本管理器中，我不断收到关于“这需要有一个 .js 扩展名”之类的错误......从来没有为我工作过（还）跨度>
您应该可以使用<%= Scripts.Render("~/bundle/path") %>，但是您可能会遇到与尝试2相同的问题，带有服务器头标签...