JQuery 无法在 ASP.NET 内容页面上运行

问题描述 投票：0回答：1

我有 Visual Studio 2022。我最初创建了一个简单的 ASP.NET Web 应用程序来测试一些 jQuery。那行得通。

我现在在工作的 ASP.NET Web 应用程序中获得了相同的代码，并且 jQuery 没有被执行。唯一的区别是后来的应用程序使用了母版页。

这是已安装的 jQuery：

enter image description here

我将 jQuery 文件 

jquery-3.7.1.js
拖放到 HTML 页面：

enter image description here

Script
一词已加下划线，其信息为：

验证（XHTMI 1.0 过渡）：元素“script”缺少必需的属性“type”。

我假设这是问题所在，因为我的测试应用程序没有显示相同的下划线并且可以工作，但是这是拖放时测试应用程序上的样子：

enter image description here

有什么想法为什么我会遇到这个问题吗？

jquery asp.net master-pages
1个回答
0
投票

好的，所以我们正在使用母版页的子页面。在几乎所有此类情况下，母版页都应该具有脚本引用。

但是，您“可以”将此类脚本引用放置在子页面中。请记住，在子页面中，它（最终）最终会在母版页内呈现，因此脚本引用的放置非常重要。

根据您的主模板，当您创建子页面时，您通常会发现 2 个内容部分。一部分（通常，并非总是）呈现在页面的标题部分，然后第二内容区域呈现在母版页“form”标记内。

因此，开始一个空白页面，您往往会看到以下内容：

<%@ Page Title="" Language="vb" 
    AutoEventWireup="false" 
    MasterPageFile="~/Site.Master" 
    CodeBehind="GridTest.aspx.vb" 
    Inherits="MyCalendar2.GridTest1" %>



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



</asp:Content>

现在，在上面，我只有一个内容区域。但是，正如我所指出的，这意味着您需要将任何脚本引用放置在内容区域内。

因此，这是行不通的：

<%@ Page Title="" Language="vb" 
    AutoEventWireup="false" 
    MasterPageFile="~/Site.Master" 
    CodeBehind="GridTest.aspx.vb" 
    Inherits="MyCalendar2.GridTest1" %>


    <script src="../Scripts/jquery-3.4.1.js"></script>
    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <script src="../Scripts/bootstrap.js"></script>


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


</asp:Content>

编辑器会这样显示：

enter image description here

注意波形图的显示方式，将鼠标悬停在脚本标签上我们会看到：

enter image description here

所以实际上错误消息相当清楚，并且您不能在内容区域之外放置太多任何内容。

因此，这将起作用：

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

    <script src="../Scripts/jquery-3.4.1.js"></script>
    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <script src="../Scripts/bootstrap.js"></script>


</asp:Content>

当然，正如我所指出的，一般来说，您希望将此类脚本引用放置在母版页中，因此您不需要一遍又一遍地在每个子页面中拥有/使用/放置任何此类脚本引用。但是，在某些情况下，我会将脚本引用放置在特定页面（子页面或非子页面），因为将此类脚本引用放置在不需要此类脚本引用的所有页面中是没有意义的。

但是，这里需要注意一些，因为子页面放置在哪里？它是在应用程序的根目录中，还是在某个嵌套文件夹中？因此，在上面，看到“../”意味着我必须嵌套在某个文件夹中（Grids\GridTest.aspx）。

那么，如果将脚本引用放置在母版页中，那么如果子页面嵌套了几个文件夹，会发生什么情况？

好吧，然后我将脚本引用放在母版页中，但使用这个表达式：

<body>

    <form id="formm" runat="server">


        <%: Styles.Render("~/Scripts/jquery-ui.min.css") %>
        <%: Styles.Render("~/Scripts/jquery.toast.min.css") %>
        <%: Styles.Render("~/Content/RadioNav.css?v=1.2") %>

        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">

            <Scripts>
                <asp:ScriptReference Path="~/Scripts/jquery-3.4.1.min.js" runat="server"  />
                <asp:ScriptReference Path="~/Scripts/bootstrap34.min.js" runat="server" />
                <asp:ScriptReference Path="~/Scripts/jquery-ui-1.13.2.min.js" runat="server"  />
                <asp:ScriptReference Path="~/Scripts/jquery.toast.min.js" runat="server" />                
            </Scripts>
        </asp:ScriptManager>

再次注意母版页如何具有表单标签，子页面中的“内容”页面将因此呈现在母版页表单标签内。这当然意味着子页面不能使用、不需要、也不允许在此类页面中使用任何表单标签。

我想上面的简短版本是子页面中的脚本标签不能（也不应该）放置在此类子页面的内容模板之外。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.