Prev: AJAx controls not working on win2k8 r2 64 bit
Next: How to use url like www.somename.com instead of the project name u
From: Alex Maghen on 3 Aug 2010 10:48
I am running into all kinds of difficulties LINKing/Inserting JavaScript and
CSS on an ASPX that is inside a MasterPage. I'm not sure what the rules or
even what the life-cycle is. Here are the actual issues:

1. Do I have to use code and "RegisterStartupScript()" and all that? Is
there no way to do the insertion of these in the actual HTML mark-up of the
ASPX page?

2. If I am including jQuery from the MasterPage and *then* want to include a
..JS file from one of the child ASPX pages, I'm running into trouble where it
would seem that jQuery has not been installed before my .JS file so that the
Browser doesn't recognize the jQuery "$" at run-time. I am confused about
load-order. How does that work?

Is there some clean/clear explanation of how all of this is supposed to be
done - ESPECIALLY WHERE WRITING C# CODE IS NOT PART OF THE PICTURE?

Thanks.

Alex
From: Jerry Weng Jerry on 4 Aug 2010 03:28
Hello Alex,
Thank you for posting.
From your post, my understanding on this issue is: issues with including
javascript files. If I'm off base, please feel free to let me know.

Question 1: Do I have to use code and "RegisterStartupScript()" and all
that? Is there no way to do the insertion of these in the actual HTML
mark-up of the ASPX page?
No. We can insert any javascript functions in the page by markups. Please
follow the comments in the sample below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<!--We can include js between the <head></head>-->
<!--Load No.1: myjScript1.js will be included firstly.-->
<script type="text/javascript" src="myjScript1.js"></script>
<!--Load No.2: these will be included secondly.-->
<script type="text/javascript">
function MyFunction1() {
// do something
}

function MyAnotherFunction2() {
// do something
}
</script>
</head>
<body>
<form id="form1" runat="server">
<!---------------------->
<!--Some other markups-->
<!---------------------->


<!--We can include js between the <body></body>-->
<!--Load No.3: myjScript2.js will be included thirdly-->
<script type="text/javascript" src="myjScript2.js"></script>


<!---------------------->
<!--Some other markups-->
<!---------------------->


<!--Load No.4: these will be included forthly.-->
<script type="text/javascript">
function MyFunction3() {
// do something
}

function MyAnotherFunction4() {
// do something
}
</script>


<!---------------------->
<!--Some other markups-->
<!---------------------->
</form>
</body>

We can also use code behind to write the script. For example.
<!--Create a Literal into the page which will hold the javascript markups-->
<asp:Literal ID="LiterScript" runat="server"></asp:Literal>

//In page load, we can write this:
protected void Page_Load(object sender, EventArgs e)
{
LiterScript.Text = "<script
type='text/javascript'>alert(1);</script>";
}

When you test the code, you will see a messagebox shown with a number 1 there.
The execution order is still from top to bottom of the page.

Question 2: If I am including jQuery from the MasterPage and *then* want to
include a .JS file from one of the child ASPX pages, I'm running into trouble
where it would seem that jQuery has not been installed before my .JS file so
that the Browser doesn't recognize the jQuery "$" at run-time. I am confused
about load-order. How does that work?

As the reason of the js load order is from top to bottom, so we should add
include the js file between master page and content page like the example
below.

<!--Here is master page-->
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<!--This part will be loaded BEFORE the jquery file-->
<asp:ContentPlaceHolder id="headBeforejQuery" runat="server">
</asp:ContentPlaceHolder>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<!--This part will be loaded AFTER the jquery file -->
<asp:ContentPlaceHolder id="headAfterjQuery" runat="server">
</asp:ContentPlaceHolder>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

<!--Here is the content page-->
<asp:Content ID="Content1" ContentPlaceHolderID="headBeforejQuery"
runat="Server">
<!--This part will be executed before the jquery file in the master
page-->

<script type="text/javascript" src="MyJScriptA.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="headAfterjQuery"
runat="Server">
<!--This part will be executed after the jquery file in the master page-->

<script type="text/javascript" src="MyJScriptB.js"></script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1"
runat="Server">
<div id="mydiv" style="width: 300px; height: 100px; background-color:
Silver; border: 1px solid black;
color: Black">
</div>
<input type="button" onclick="CheckJS()" value="Test" />
</asp:Content>

<!--Here is a js function for testing in MyJScriptA.js-->
function CheckJS() {
$("#mydiv").html("Get it!");
}

Here are some reference documents:
How to: Add Client Script Dynamically to ASP.NET Web Pages
http://msdn.microsoft.com/en-us/library/ms178207.aspx

If you still get confused about this issue, please reply me or post your
markups, and let me troubleshoot your problem.

--
Sincerely,
Jerry Weng
Microsoft Online Community Support

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notifications.

With newsgroups, MSDN subscribers enjoy unlimited, free support as opposed
to the limited number of phone-based technical support incidents. Complex
issues or server-down situations are not recommended for the newsgroups.
Issues of this nature are best handled working with a Microsoft Support
Engineer using one of your phone-based incidents.
==================================================
--------------------
| Thread-Topic: Including and Executing JS and CSS from an ASPX within a
Master Pa
| thread-index: AcszGuAaZKqKUKXUQTCF0tAsSNFBuA==
| X-WBNR-Posting-Host: 75.47.217.183
| From: Alex Maghen <AlexMaghen(a)newsgroup.nospam>
| Subject: Including and Executing JS and CSS from an ASPX within a Master Pa
| Date: Tue, 3 Aug 2010 07:48:03 -0700
| Lines: 20
| Message-ID: <2A6FB146-6DE0-47AF-934D-88D68E990361(a)microsoft.com>
| MIME-Version: 1.0
| Content-Type: text/plain;
| charset="Utf-8"
| Content-Transfer-Encoding: 7bit
| X-Newsreader: Microsoft CDO for Windows 2000
| Content-Class: urn:content-classes:message
| Importance: normal
| Priority: normal
| X-MimeOLE: Produced By Microsoft MimeOLE V6.00.3790.4325
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| Path: TK2MSFTNGHUB02.phx.gbl
| Xref: TK2MSFTNGHUB02.phx.gbl microsoft.public.dotnet.framework.aspnet:1693
| NNTP-Posting-Host: tk2msftibfm01.phx.gbl 10.40.244.149
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
|
| I am running into all kinds of difficulties LINKing/Inserting JavaScript
and
| CSS on an ASPX that is inside a MasterPage. I'm not sure what the rules or
| even what the life-cycle is. Here are the actual issues:
|
| 1. Do I have to use code and "RegisterStartupScript()" and all that? Is
| there no way to do the insertion of these in the actual HTML mark-up of the
| ASPX page?
|
| 2. If I am including jQuery from the MasterPage and *then* want to include
a
| .JS file from one of the child ASPX pages, I'm running into trouble where
it
| would seem that jQuery has not been installed before my .JS file so that
the
| Browser doesn't recognize the jQuery "$" at run-time. I am confused about
| load-order. How does that work?
|
| Is there some clean/clear explanation of how all of this is supposed to be
| done - ESPECIALLY WHERE WRITING C# CODE IS NOT PART OF THE PICTURE?
|
| Thanks.
|
| Alex
|

From: Jerry Weng on 5 Aug 2010 03:02
Hello Alex,
Thank you for posting.
From your post, my understanding on this issue is: issues with including
javascript files. If I'm off base, please feel free to let me know.

Question 1: Do I have to use code and "RegisterStartupScript()" and all
that? Is there no way to do the insertion of these in the actual HTML
mark-up of the ASPX page?
No. We can insert any javascript functions in the page by markups. Please
follow the comments in the sample below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<!--We can include js between the <head></head>-->
<!--Load No.1: myjScript1.js will be included firstly.-->
<script type="text/javascript" src="myjScript1.js"></script>
<!--Load No.2: these will be included secondly.-->
<script type="text/javascript">
function MyFunction1() {
// do something
}

function MyAnotherFunction2() {
// do something
}
</script>
</head>
<body>
<form id="form1" runat="server">
<!---------------------->
<!--Some other markups-->
<!---------------------->


<!--We can include js between the <body></body>-->
<!--Load No.3: myjScript2.js will be included thirdly-->
<script type="text/javascript" src="myjScript2.js"></script>


<!---------------------->
<!--Some other markups-->
<!---------------------->


<!--Load No.4: these will be included forthly.-->
<script type="text/javascript">
function MyFunction3() {
// do something
}

function MyAnotherFunction4() {
// do something
}
</script>


<!---------------------->
<!--Some other markups-->
<!---------------------->
</form>
</body>

We can also use code behind to write the script. For example.
<!--Create a Literal into the page which will hold the javascript markups-->
<asp:Literal ID="LiterScript" runat="server"></asp:Literal>

//In page load, we can write this:
protected void Page_Load(object sender, EventArgs e)
{
LiterScript.Text = "<script
type='text/javascript'>alert(1);</script>";
}

When you test the code, you will see a messagebox shown with a number 1
there.
The execution order is still from top to bottom of the page.

Question 2: If I am including jQuery from the MasterPage and *then* want to
include a .JS file from one of the child ASPX pages, I'm running into
trouble where it would seem that jQuery has not been installed before my
.JS file so that the Browser doesn't recognize the jQuery "$" at run-time.
I am confused about load-order. How does that work?

As the reason of the js load order is from top to bottom, so we should add
include the js file between master page and content page like the example
below.

<!--Here is master page-->
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<!--This part will be loaded BEFORE the jquery file-->
<asp:ContentPlaceHolder id="headBeforejQuery" runat="server">
</asp:ContentPlaceHolder>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<!--This part will be loaded AFTER the jquery file -->
<asp:ContentPlaceHolder id="headAfterjQuery" runat="server">
</asp:ContentPlaceHolder>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

<!--Here is the content page-->
<asp:Content ID="Content1" ContentPlaceHolderID="headBeforejQuery"
runat="Server">
<!--This part will be executed before the jquery file in the master
page-->

<script type="text/javascript" src="MyJScriptA.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="headAfterjQuery"
runat="Server">
<!--This part will be executed after the jquery file in the master
page-->

<script type="text/javascript" src="MyJScriptB.js"></script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1"
runat="Server">
<div id="mydiv" style="width: 300px; height: 100px; background-color:
Silver; border: 1px solid black;
color: Black">
</div>
<input type="button" onclick="CheckJS()" value="Test" />
</asp:Content>

<!--Here is a js function for testing in MyJScriptA.js-->
function CheckJS() {
$("#mydiv").html("Get it!");
}

Here are some reference documents:
How to: Add Client Script Dynamically to ASP.NET Web Pages
http://msdn.microsoft.com/en-us/library/ms178207.aspx

If you still get confused about this issue, please reply me or post your
markups, and let me troubleshoot your problem.

--
Sincerely,
Jerry Weng
Microsoft Online Community Support

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications.

With newsgroups, MSDN subscribers enjoy unlimited, free support as opposed
to the limited number of phone-based technical support incidents. Complex
issues or server-down situations are not recommended for the newsgroups.
Issues of this nature are best handled working with a Microsoft Support
Engineer using one of your phone-based incidents.
==================================================
--------------------
| Thread-Topic: Including and Executing JS and CSS from an ASPX within a
Master Pa
| thread-index: AcszGuAaZKqKUKXUQTCF0tAsSNFBuA==
| X-WBNR-Posting-Host: 75.47.217.183
| From: Alex Maghen <AlexMaghen(a)newsgroup.nospam>
| Subject: Including and Executing JS and CSS from an ASPX within a Master
Pa
| Date: Tue, 3 Aug 2010 07:48:03 -0700
| Lines: 20
| Message-ID: <2A6FB146-6DE0-47AF-934D-88D68E990361(a)microsoft.com>
| MIME-Version: 1.0
| Content-Type: text/plain;
| charset="Utf-8"
| Content-Transfer-Encoding: 7bit
| X-Newsreader: Microsoft CDO for Windows 2000
| Content-Class: urn:content-classes:message
| Importance: normal
| Priority: normal
| X-MimeOLE: Produced By Microsoft MimeOLE V6.00.3790.4325
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| Path: TK2MSFTNGHUB02.phx.gbl
| Xref: TK2MSFTNGHUB02.phx.gbl microsoft.public.dotnet.framework.aspnet:1693
| NNTP-Posting-Host: tk2msftibfm01.phx.gbl 10.40.244.149
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
|
| I am running into all kinds of difficulties LINKing/Inserting JavaScript
and
| CSS on an ASPX that is inside a MasterPage. I'm not sure what the rules
or
| even what the life-cycle is. Here are the actual issues:
|
| 1. Do I have to use code and "RegisterStartupScript()" and all that? Is
| there no way to do the insertion of these in the actual HTML mark-up of
the
| ASPX page?
|
| 2. If I am including jQuery from the MasterPage and *then* want to
include a
| .JS file from one of the child ASPX pages, I'm running into trouble where
it
| would seem that jQuery has not been installed before my .JS file so that
the
| Browser doesn't recognize the jQuery "$" at run-time. I am confused about
| load-order. How does that work?
|
| Is there some clean/clear explanation of how all of this is supposed to
be
| done - ESPECIALLY WHERE WRITING C# CODE IS NOT PART OF THE PICTURE?
|
| Thanks.
|
| Alex
|

From: Jerry Weng on 11 Aug 2010 20:59
Hi Alex,

Have you read my post and try the solution? If could, please give me a
feedback and let me help you if you still stick in the issue.

--
Sincerely,
Jerry Weng
Microsoft Online Community Support

--------------------
| Thread-Topic: Including and Executing JS and CSS from an ASPX within a
Master Pa
| thread-index: AcszGuAaZKqKUKXUQTCF0tAsSNFBuA==
| X-WBNR-Posting-Host: 75.47.217.183
| From: Alex Maghen <AlexMaghen(a)newsgroup.nospam>
| Subject: Including and Executing JS and CSS from an ASPX within a Master
Pa
| Date: Tue, 3 Aug 2010 07:48:03 -0700
| Lines: 20
| Message-ID: <2A6FB146-6DE0-47AF-934D-88D68E990361(a)microsoft.com>
| MIME-Version: 1.0
| Content-Type: text/plain;
| charset="Utf-8"
| Content-Transfer-Encoding: 7bit
| X-Newsreader: Microsoft CDO for Windows 2000
| Content-Class: urn:content-classes:message
| Importance: normal
| Priority: normal
| X-MimeOLE: Produced By Microsoft MimeOLE V6.00.3790.4325
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| Path: TK2MSFTNGHUB02.phx.gbl
| Xref: TK2MSFTNGHUB02.phx.gbl microsoft.public.dotnet.framework.aspnet:1693
| NNTP-Posting-Host: tk2msftibfm01.phx.gbl 10.40.244.149
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
|
| I am running into all kinds of difficulties LINKing/Inserting JavaScript
and
| CSS on an ASPX that is inside a MasterPage. I'm not sure what the rules
or
| even what the life-cycle is. Here are the actual issues:
|
| 1. Do I have to use code and "RegisterStartupScript()" and all that? Is
| there no way to do the insertion of these in the actual HTML mark-up of
the
| ASPX page?
|
| 2. If I am including jQuery from the MasterPage and *then* want to
include a
| .JS file from one of the child ASPX pages, I'm running into trouble where
it
| would seem that jQuery has not been installed before my .JS file so that
the
| Browser doesn't recognize the jQuery "$" at run-time. I am confused about
| load-order. How does that work?
|
| Is there some clean/clear explanation of how all of this is supposed to
be
| done - ESPECIALLY WHERE WRITING C# CODE IS NOT PART OF THE PICTURE?
|
| Thanks.
|
| Alex
|

 | 
Pages: 1
Prev: AJAx controls not working on win2k8 r2 64 bit
Next: How to use url like www.somename.com instead of the project name u