如何在 asp.net 中将 javascript 文件和 css 添加到母版页的内容页

如何在 asp.net 中将javascript文件和css添加到母版页的内容页。我试图在我的内容页面中包含日期时间选择器。它非常适合母版页面。当我尝试在我的内容页面中放置相同的内容时，它不起作用。

this is Content Page code:

<%@ Page Title="" Language="C#" MasterPageFile="~/testmasterpage.master" AutoEventWireup="true" CodeFile="datetime.aspx.cs" Inherits="datetime" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" Runat="Server">

    <link href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#txtDate").datepicker();
        });
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
</asp:Content>


 this is masterpage code:
<head runat="server">
 <title></title>

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


</head>
<body>
 <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                                    </asp:ContentPlaceHolder>
`</body>`
</html>

<script></script> 和 <style></style> 标签应进入 <head></head> 标签。

我们不能使用<head><head>标记，我们将其放置在母版页中，一旦尝试 JavaScript 函数调用，您就将链接和脚本标记放置在正确的位置

$("ctl00_ContentPlaceHolder1_txtDate").datepicker();

并将警报和调试器放在日期选择器函数中，并在以下行上方

$("ctl00_ContentPlaceHolder1_txtDate").datepicker();

并检查它，如果仍然不起作用，则可能是您的 JQuery 调用的问题。

您是否对这些文件路径使用"~"字符？通常，asp 页面会认为您为每个页面使用不同的路径。因此，我们需要为每个加载的 css/js 文件定义相对路径。

因此，请尝试此操作以更正您的页面：

<asp:Content ID="Content1" ContentPlaceHolderID="Head" Runat="Server">

    <link href="~/css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css" />
    <script src="<%: ResolveUrl("~/js/jquery-1.7.2.min.js") %>" type="text/javascript"></script>
    <script src="<%: ResolveUrl("~/js/jquery-ui-1.8.19.custom.min.js") %>"  type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#txtDate").datepicker();
        });
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
</asp:Content>


 this is masterpage code:
<head runat="server">
 <title></title>

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


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

也许您需要使用 Page 命名空间"Page.ResolveUrl"调用 ResolveUrl。

你必须做什么：

我相信您想将所有脚本包含在"母版页"中每个ContentPage都有一个MasterPage，母版页是"父亲"，所以他包含的每一个脚本或风格，也会存在于他的ContentPage中。

如果有意义，请转移：

    <link href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>

以MasterPage <head>标记下的页面。

通过[chrome developer tools][1]' for errors, probably you'll have some errors there saying that he can't find jQuery or日期选择器签入console选项卡，您应该为这些脚本提供六个路径（可能）：
将成为：

您可以参考这篇文章的波浪号

有时使用

框架提供的工具更容易完成这些工作。在这种情况下，在代码隐藏中调用 ClientScriptManager.RegisterStartupScript（）会将脚本插入正确的位置：在页面内容之后，在正文标记之前。仅当（重新）加载整个页面时，才会添加脚本。

此代码将Page_Load。无需检查 IsPostback。

C# 版本：

String sKey = "SomeUniqueKeyForThisScript";
Type tType = Page.GetType;
ClientScriptManager csm = Page.ClientScript;
csm.RegisterStartupScript(tType, sKey, "<script src=""" & ResolveUrl("~/Scripts/my-custom-script.js") & """></script>")

VB版本：

Dim sKey As String = "SomeUniqueKeyForThisScript"
Dim tType As Type = Page.GetType
Dim csm As ClientScriptManager = Page.ClientScript
csm.RegisterStartupScript(tType, sKey, "<script src=""" & ResolveUrl("~/Scripts/my-custom-script.js") & """></script>")

如果异步回发中包含受影响的控件，则显然需要重新绑定任何 JS 事件。这可以通过使用 ScriptManager.RegisterStartupScript（）并将重新加载的控件作为第一个参数传递来轻松完成，以便仅在重新加载控件时才执行脚本。

相关内容

最新更新

热门标签：