Jan 08 2007

Step 2: Test case - control your Javascript

Posted by admin under Control your Javascript in ASP.NET

This testcase (solution is downloadable - in related article) is really simple and basic.

Master pages is used. The master page contains a single contentplaceholder



<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

We also have to js files:

hello.js - just containg single function Hello() - which alerts 'Hello'

world.js - just containg single function World() - which alerts 'World'

Now lets say - page1.aspx should include Hello.js - and page2.aspx should  include Hello.js and world.js.

Solution 1:

Put the script include tags in the header of master.master.

Problem: page1.aspx includes hello.js which is not needed - and not what we wish for.

Solution 2:

Add the script tags into page1.aspx and page2.aspx respectively:



page1.aspx:
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript" src="scripts/hello.js"></script> 

This one includes the javascript hello.js

Test to click <a href="javascript:Hello();">here</a> 
</asp:Content>


page2.aspx

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript" src="scripts/hello.js"></script> 
<script type="text/javascript" src="scripts/world.js"></script> 
this one includes the javascripts hello.js and world.js 
<br />
<br />
Test hello to click <a href="javascript:Hello();">here</a> 
<br />
Test world to click <a href="javascript:World();" title="Page 2">here</a> 

</asp:Content>

Problem: the includes are put in the body of the html code:

this shows the html from page2.aspx



<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
	Untitled Page
</title></head>
<body>
    <form name="aspnetForm" method="post" action="page2.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMDUyNjYzMjhkZMc8zAA0fqg2q5VBB2Oxc8XIg7kE" />
</div>

    <div>
        
<script type="text/javascript" src="scripts/hello.js"></script> 
<script type="text/javascript" src="scripts/world.js"></script> 
this one includes the javascripts hello.js and world.js 
<br />
<br />
Test hello to click <a href="javascript:Hello();">here</a> 
<br />
Test world to click <a href="javascript:World();" title="Page 2">here</a> 


    </div>
    </form>
</body>
</html>