1

How can I ADD javascript files and css to a contentpage of a master page in asp.net. I tried to include a datetime picker to my ContentPage. Bur it works perfectly on masterpage . when I try to put the same in my contentpage it doesn't work. 

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>
Abdu
  • 185
  • 1
  • 7
  • 17

5 Answers5

0

The <script></script> and <style></style> tags should go into the <head></head> tag.

Nils
  • 67
  • 9
  • I put them in the tag in masterapage . it doesn't work. And also I put them in the contentplaceHolder in the tag. it doesn't work. please help me. – Abdu Jun 14 '16 at 07:07
0

We cant use <head><head> tags in content page, we places it in master page, you have placed the link and script tags in correct place once try javascript function call as

$("ctl00_ContentPlaceHolder1_txtDate").datepicker();

and put a alert and debugger in datepicker function and above the below line 

$("ctl00_ContentPlaceHolder1_txtDate").datepicker();

and check it, if still it is not works its may be the problem with your JQuery call.

Uday Prasanna N
  • 50
  • 1
  • 7
0

Have you use "~" char for those files path? Usually, asp page will think you have using different path for each page. So, we need to define the relative path for each loaded css/js file.

So, Try this to correcting your page:

<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>

Maybe you need call the ResolveUrl using Page namespace "Page.ResolveUrl".

Fadhly Permata
  • 1,686
  • 13
  • 26
0

What you have to do:

  1. i believe that you want to include all of your scripts in you 'MasterPage' every ContentPage have a MasterPage, the master page is the "father", so every script or style that he includes, will be exist in his ContentPage also.

If it make sense, transfer:

    <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>

to MasterPage page, under <head> tag.

  1. check in console tab via [chrome developer tools][1]' for errors, probably you'll have some errors there saying that he can't findjqueryordatepicker`, you should six the path to these script (probably):

    will become:

You can reference this post for the tilde sign

Community
  • 1
  • 1
E.Meir
  • 2,146
  • 7
  • 34
  • 52
0

Sometimes it's easier to do this stuff with the tools that the framework have provided. In this case, calling ClientScriptManager.RegisterStartupScript() in the code-behind inserts the script in the correct location: after the page content, before the body tag. The script will only be added when the full page is (re)loaded.

This code would go in Page_Load. No need to check for IsPostback.

C# Version:

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 Version:

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>")

You'll obviously need to re-bind any JS events if affected controls are included in an async postback. That can easily be done by using ScriptManager.RegisterStartupScript() and passing the reloaded control as the first parameter so that the script is only executed if the control is reloaded.

Benjamin Ray
  • 1,855
  • 1
  • 14
  • 32