CODEWITHSUNDEEP
javascriptasp.net-mvc-3
Tyler DeWitt
Tyler DeWitt

Reputation: 23576

Where to place external .js file in aspx page that uses master file

I've got an aspx page that inherits from a master page template. Usually, I'd place the link to my external javascript file inside of the <head> element of the html page, but the <head> element is in the master page.

Where should I place the reference to my external .js page?

If I try to just put a <script> tag below the <%@ Page %> element, I get some error saying that I must place tags inside of <asp:content> sections.

Thanks

Upvotes: 0

Views: 10130

Answers (5)

ashok
ashok

Reputation: 379

First, you have to Create a placeholder in the header of the master page, and add the script to that placeholder on the page.

In Master page :-

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

In Content page(aspx page) :- give the scripts and source of the JavaScript path like below.

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

Upvotes: 0

Andrew Grinder
Andrew Grinder

Reputation: 605

Inside of your master page's <body> .. <form> .. add the asp:ScriptReference tag into your asp:ScriptManager, not in the content :

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

If you want to lead it from the client side you will need to add somewhere in your page's <body> or content:

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

Alternatively, for each page aspx.cs that needs it, I use this on the server side:

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

Where in my javascript file I have:

function Start() {
...
}

Tip: ScriptManager is widely used by large Js libraries like jQuery.

Within your javascript, if you have jQuery installed, you can call any ASP object, that has ClientIDMode="Static", within the master page with $("#nameOfObject").

I am not sure if the above process works with content pages, so the object may have to be on the master page.

Upvotes: 0

James Johnson
James Johnson

Reputation: 46077

Create a placeholder in the header of the master page, and add the script to that placeholder on the page.

Master:

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

Page:

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

Upvotes: 1

CM Kanode
CM Kanode

Reputation: 1436

I'm assuming that you want the script on your child page, not in the master page template. In that case, you need a content placeholder in the <head> element of your master page. Then use the <asp:content> tags on your child page and place the reference to your external javascript there. I wouldn't be surprised, if your master page already has a content placeholder in its <head> tags.

Upvotes: 0

Richard Banks
Richard Banks

Reputation: 2983

put it in one of the content panels in your content page e.g

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

Upvotes: 0

Related Questions