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

Question

如何将javascript文件和css添加到asp.net中母版页的内容页面。 我试图在我的ContentPage中包含一个日期时间选择器。 Bur它在masterpage上完美运行。 当我尝试在我的内容页面中放置它时，它不起作用。

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>

Answer 1

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

Answer 2

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

$("ctl00_ContentPlaceHolder1_txtDate").datepicker();

并在datepicker函数和上面的行上方放置一个警报和调试器

$("ctl00_ContentPlaceHolder1_txtDate").datepicker();

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

Answer 3

你有没有使用“〜”char作为那些文件路径？ 通常，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 namespace“Page.ResolveUrl”调用ResolveUrl。

Answer 4

你要做什么：

1. 我相信你想在你的'MasterPage'中包含你的所有脚本，每个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>标签下。

2. 通过[chrome developer tools][1]' for errors, probably you'll have some errors there saying that he can't find检查console选项卡[chrome developer tools][1]' for errors, probably you'll have some errors there saying that he can't find jquery or datepicker`，你应该有六个这些脚本的路径（可能）：

   会变成：

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

Answer 5

有时使用框架提供的工具更容易做到这一点。 在这种情况下，在代码隐藏中调用ClientScriptManager.RegisterStartupScript（）会将脚本插入正确的位置：在页面内容之后，在body标记之前。 只有在（重新）加载完整页面时才会添加脚本。

此代码将在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（）并将重新加载的控件作为第一个参数传递来轻松完成，这样只有在重新加载控件时才会执行脚本。