无法从 asp.net 内容页面访问 js 或 jquery 文件答案

【问题标题】：Not able to acces js or jquery files from asp.net content page无法从 asp.net 内容页面访问 js 或 jquery 文件
【发布时间】：2018-02-19 10:49:26
【问题描述】：

由于某种原因，我无法从 asp.net webform 的内容页面访问 js 或 jquery 文件

如果在同一页面中使用，则在 MasterPage 中定义的 js 工作正常，但是当我想从内容页面使用 jquery 功能时，由于某种原因它不起作用

即使是$("h1").css("font-size", "200px");这样的小功能也会在chrome中报错Uncaught ReferenceError: $ is not defined

问题仅在于内容/子页面中无法访问 js 文件。

我对 css 文件只有 js 没有任何问题。

不知道我做错了什么。

母版页

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
<!-- Meta -->
<!-- Meta end-->

<!-- Web Fonts -->
     <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i|Ubuntu:300,300i,400,400i,500,500i,700,700i!Open Sans:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">

<!-- css -->
     <link rel="stylesheet" href="../assets/en/css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../assets/en/css/jquery.mCustomScrollbar.css" />
     <!-- Owl Carousel css -->
     <link rel="stylesheet" type="text/css" href="../assets/en/owl-carousel/owl.carousel.css" />
     <link rel="stylesheet" type="text/css" href="../assets/en/owl-carousel/owl.theme.css" />
     <link rel="stylesheet" type="text/css" href="../assets/en/owl-carousel/owl.transitions.css" />

     <!-- jquery-ui css -->
     <link rel="stylesheet" href="../assets/en/css/jquery-ui.css">
     <!-- animate -->
     <link rel="stylesheet" href="../assets/en/css/animate.min.css">
     <!-- fonts css -->

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
     <link rel="stylesheet" type="text/css" href="../assets/en/css/Pe-icon-7-stroke.css" />
     <link rel="stylesheet" type="text/css" href="../assets/en/css/flaticon.css" />
     <link rel="stylesheet" href="../assets/nivo-lightbox/css/nivo-lightbox.css" /> 
     <link rel="stylesheet" href="../assets/nivo-lightbox/themes/default/default.css"/>
     <!-- custom css -->
     <link rel="stylesheet" href="../assets/en/css/style.css">
<!-- css end-->

    <!-- **** -->
      <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
     <!-- **** -->
</head>
<body>
    <form id="form2" runat="server">
    <asp:ScriptManager runat="server" EnablePageMethods="true">
        <Scripts>
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" />
        </Scripts>
    </asp:ScriptManager>

 <header>  
  <!-- Some Controls -->

<!-- Some Controls -->


    </form>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script type="text/javascript" src='<%= ResolveUrl ("~/assets/en/js/bootstrap.min.js") %>'></script>


    <script type="text/javascript" src='<%= ResolveUrl ("~/assets/nivo-lightbox/js/nivo-lightbox.js") %>'></script>
    <!-- Metis Menu Plugin JavaScript -->
    <script type="text/javascript" src='<%= ResolveUrl ("~/assets/en/js/metisMenu.min.js") %>'></script>
    <script type="text/javascript" src='<%= ResolveUrl ("~/assets/en/js/jquery.mCustomScrollbar.concat.min.js") %>'></script>
    <!-- animate js -->
    <script type="text/javascript" src='<%= ResolveUrl ("~/assets/en/js/wow.min.js") %>'></script>

    <!--  classify JavaScript -->
    <script type="text/javascript" src='<%= ResolveUrl ("~/assets/en/js/classie.js") %>'></script>
    <!-- owl carousel js -->
    <script type="text/javascript" src='<%= ResolveUrl ("~/assets/en/owl-carousel/owl.carousel1-3-3.js") %>'></script>

    <!-- jquery ui js -->

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>



    <!-- custom js -->
    <script type="text/javascript" src='<%= ResolveUrl ("~/assets/en/js/custom.js") %>'></script>
</body>

    <script>
        $(document).ready(function () {

            $('a').nivoLightbox({
                effect: 'fade',
                clickOverlayToClose: false,
                onInit: function () { },
                beforeShowLightbox: function () { },
                afterShowLightbox: function (lightbox) {},
            });



    </script>
</html>

内容页

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Articles.aspx.cs" Inherits="ArticleList" %>
<%@ Register Src="~/en/UserControls/PagerControl.ascx" TagName="PagerControl" TagPrefix="uc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <!-- Article list-->

    <!-- Article  list-->

    <div class="pagination">
        <uc1:PagerControl ID="PagerControl1" runat="server" CssClass="gold-pager" PageMode="LinkButton" />
    </div>

    <script>
        $("h1").css("font-size", "200px");
    </script>
</asp:Content>

当我使用调试工具检查网络时，它显示文件已正确下载

忽略jquery-1.10.2.js 的最后两个错误，因为我使用的是更高版本

【问题讨论】：

将该代码块放入$(document).ready(function () {。您可能正在 jQuery 参考之上执行该操作。
通过将所有 js 文件移动到除 custom.js 之外的标题部分来解决此问题，因为如果我移动它可能是由于对象的早期初始化而产生错误

标签： javascript jquery asp.net webforms

【解决方案1】：

您好，问题是 ContentPlaceHolder1 将在加载 jQuery 脚本之前写入您的 html 页面，因此您正在尝试使用 jQuery

$("h1").css("font-size", "200px");

标签前

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

如果您有另一个名为 footer（或 footerscripts，任何您喜欢的名称）的 cph，这可能会很有用，就像您有 head cph 一样。

然后，将您需要的脚本添加到该 cph 中。

希望对你有帮助

【讨论】：