在使用主文件的aspx页面中放置外部.js文件的位置



我有一个从母版页模板继承的aspx页面。通常,我会将指向外部javascript文件的链接放在html页面的<head>元素中,但<head>元素在母版页面中。

我应该把引用到我的外部。js页面?

如果我试图在<%@ Page %>元素下面放一个<script>标签,我得到一些错误,说我必须在<asp:content>部分内放置标签。

谢谢

在母版页的页眉中创建一个占位符,并将脚本添加到页面的占位符中。

主:

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

页面:

<asp:Content ID="PageHeaderContent" ContentPlaceHolderID="HeaderContent" runat="server">
    <script type="text/javascript" src="somejsfile.js"></script> 
</asp:Content>

将其放在内容页的内容面板中,例如

 <asp:content runat="server" id="content1" contentplaceholderid="cp1">
     <script type="text/javascript" src="somepath"></script>
    </asp:content>

我假设您希望脚本在子页面上,而不是在母版页面模板中。在这种情况下,您需要在母版页的<head>元素中添加一个内容占位符。然后在您的子页面上使用<asp:content>标签,并在那里放置对外部javascript的引用。如果你的主页在<head>标签中已经有一个内容占位符,我不会感到惊讶。

在主页的<body> .. <form> ..中添加asp:ScriptReference标签到asp:ScriptManager中,而不是在内容中:

<form id="form1" runat="server">
    <asp:ScriptManager ID="scripty" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/Scripts/Timer/myJsFile.js"></asp:ScriptReference>
        </Scripts>
    </asp:ScriptManager>

如果你想从客户端引导它,你需要在页面的<body>content的某个地方添加:

<script>
    window.onload: start;
</script>

或者,对于需要它的每个页面aspx.cs,我在服务器端使用:

Page.ClientScript.RegisterStartupScript(GetType(), "Start", "window.onload=Start;", true);

在我的javascript文件中我有:

function Start() {
...
}

提示:ScriptManager被jQuery等大型Js库广泛使用

在你的javascript中,如果你安装了jQuery,你可以调用任何有ClientIDMode="Static"的ASP对象,在母版页中有$("#nameOfObject")

不确定如果上面的过程与内容页工作,所以对象可能必须在母版页。

首先,您必须在母版页的页眉中创建一个占位符,并将脚本添加到页面上的占位符中。

母版页:-

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

在内容页(aspx页):-给出脚本和JavaScript的源代码路径,如下所示。

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <%-- <b> Trailing Target/Sl</b>--%>
     <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="atjavascript/custom.js"></script>
</asp:Content>

最新更新