Using Server Tags in External JS files

Context: Accessing Controls of a Content Page in external Javascript files using server tags like <%= <ControlID>.ClientID %>

ASP.NET compiler generates a UniqueID for each of the control declared. When a control is declared in Content Page of a Master Page say TextBox1, compiler will generate a UniqueID for TextBox like ctl00_ContentPlaceHolder1_TextBox1 i.e. ctl<ControlIndex>_<ContentPlaceHolderID>_<TextBoxID>. To access this control in Javascript, you can hardcode 'ctl00_ContentPlaceHolder1_' as a prefix to actual control id. But, it is not a good practice to hardcode as adding another ContentPlaceHolder/Control before to 'ContentPlaceHolder1' in Master Page will change the UniqueID. Also, if you change the ID of ContentPlaceHolder, you need to go back to all places to change the hardcoded control id.
To overcome this, you can use server tags to get the client id of the control at runtime like '<%= <ControlID>.ClientID %>' for example '<%=TextBox1.ClientID%>' in ASPX page.

When you move this code to an external JS file, all of a sudden your code stops working as expected and cases may throw JS errors.

ASP.NET compiler will compile the code inside server tags <% %> specified with in the aspx page and (#)binds/ (=)assigns /replaces<% %> tags with the compiled code and renders compiled ASPX content in browser following the ASP.NET page life cycle.

ASP.NET compiler will not compile any external Java Script file that is refered using <SCRIPT SRC>. It is the ability or one of the job of the browser to Fetch, Load ,Compile and Execute the JS file. So, JavaScript compiler(which is embedded in browser) will treat any code with in server tags inside JS file as a normal JS code and compiles accrodingly/inline to the JavaScript language syntax. If the server tags are with in single/double quotes like '<%= %>' or "<%# %>", compiler will treat it as a string.

In ajax enabled ASP.NET, JS files will be refered in any of the following ways
<script type="text/javascript" src=="~/Scripts/Script1.js" />
[OR]
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference NotifyScriptLoaded="true" Path="~/Scripts/Script1.js" />
</Scripts>
</asp:ScriptManager>

Any code (like control ids) that has to be used in generic JavaScripts(refered across many pages) has to be passed from the ASP.NET [aspx(.cs)] compiled layer to the external JS files as parameters

From .CS
-To add JavaScript method to a Button OnClick event,

ValidateButton.Attributes.Add("onclick","javascript:return Validate('"+StartDateTextBox.ClientID +"','"+EndDateTextBox.ClientID +"');");

- Adding client script to OnUpdating event of UpdatePanelAnimationExtender
AjaxControlToolkit.Animation OnUpdatedAnimation=new AjaxControlToolkit.Animation();
OnUpdatedAnimation.Name = "ScriptAction";
OnUpdatedAnimation.Properties.Add("Script","onUpdated('" + CustomersGridView.ClientID + "');");
CreateRequestUPAnimation.OnUpdated.Children.Add(OnUpdatedAnimation);

References...
http://www.jsworkshop.com/articles/02scriptsrc.html
http://javascript.crockford.com/script.html

Rounded Corners

Rounded Corners using only CSS
Design 1:

<div style="width: 50%;">
<asp:Panel ID="Panel1" runat="server">
<b class="roundtop"><b class="g_round1"></b><b class="g_round2"></b><b class="g_round3"></b><b class="g_round4">
</b></b>
<div class="gradientheader" id="Div1" >
<asp:Label ID="Label2" runat="server" Width="100%">Details...</asp:Label>
</div>
<b class="roundbottom"><b class="noround"></b></b>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" CssClass="contentborder">
<p>
Your content goes here...
</p>
</asp:Panel>
</div>

Design 2:

<div style="width: 50%;">
<asp:Panel ID="Panel3" runat="server">
<b class="roundtop"><b class="g_round1"></b><b class="g_round2"></b><b class="g_round3">
</b><b class="g_round4"></b></b>
<div class="gradientheader" id="Div2" style="margin: 0 -1px;">
<asp:Label ID="Label3" runat="server" Width="100%">Details...</asp:Label>
</div>
<b class="roundbottom"><b class="noround"></b></b>
</asp:Panel>
<asp:Panel ID="Panel4" runat="server" CssClass="contentnoborder">
<p>
To communicate with Microsoft's Web Development Customers, to know as much as I
can about all web development technologies, those made by Microsoft and those made
by everyone else, and to communicate from the world to the Web development product
teams and from the web development product teams to the development community.
</p>
</asp:Panel>
<b class="roundbottom"><b class="g_round4"></b><b class="g_round3"></b><b class="g_round2">
</b><b class="g_round1"></b></b>
</div>
Design 3:

<div style="width: 50%;">
<asp:Panel ID="Panel5" runat="server">
<b class="roundtop"><b class="g_round1"></b><b class="g_round2"></b><b class="g_round3">
</b><b class="g_round4"></b></b>
<div class="gradientheader" id="Div3" style="margin: 0 -1px;">
<asp:Label ID="Label4" runat="server" Width="100%">Details...</asp:Label>
</div>
<b class="roundbottom"><b class="noround"></b></b>
</asp:Panel>
<asp:Panel ID="Panel6" runat="server" CssClass="contentnoborder">
<p>
To communicate with Microsoft's Web Development Customers, to know as much as I
can about all web development technologies, those made by Microsoft and those made
by everyone else, and to communicate from the world to the Web development product
teams and from the web development product teams to the development community.
</p>
</asp:Panel>
<b class="roundbottom"><b class="round4"></b><b class="round3"></b><b class="round2">
</b><b class="round1"></b></b>
</div>

CSS Styles:
CSS classes are defined in the following post
http://vrreddy.blogspot.com/2008/11/collapsible-panel-rounded-corners.html

Collapsible Panel & Rounded Corners

Collapsible Panel & Rounded Corners using only CSS

Design 1:

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="ContentPanel"
CollapsedSize="0" Collapsed="false" ExpandControlID="TitlePanel" CollapseControlID="TitlePanel"
AutoCollapse="False" AutoExpand="False" ScrollContents="false" TextLabelID="Label1"
CollapsedText="Show Details..." ExpandedText="Hide Details" ImageControlID="Image1"
ExpandDirection="Vertical" />
<div style="width: 50%;">
<asp:Panel ID="TitlePanel" runat="server">
<b class="roundtop"><b class="g_round1"></b><b class="g_round2"></b><b class="g_round3"></b><b class="g_round4">
</b></b>
<div class="gradientheader" id="DIV1" style="">
<asp:Label ID="Label1" runat="server" Width="100%">Show Details...</asp:Label>
</div>
<b class="roundbottom"><b class="noround"></b></b>
</asp:Panel>
<div class="contentborder">
<asp:Panel ID="ContentPanel" runat="server" >
<p>
Here your content goes...
</p>
</asp:Panel>
</div>
</div>

Design 2:

<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="Server" TargetControlID="Panel10"
CollapsedSize="0" Collapsed="false" ExpandControlID="Panel9" CollapseControlID="Panel9"
AutoCollapse="False" AutoExpand="False" ScrollContents="false" TextLabelID="Label6"
CollapsedText="Show Details..." ExpandedText="Hide Details" ImageControlID="Image1"
ExpandDirection="Vertical" />
<div style="width: 50%;">
<asp:Panel ID="Panel9" runat="server">
<b class="roundtop"><b class="g_round1"></b><b class="g_round2"></b><b class="g_round3"></b><b class="g_round4">
</b></b>
<div class="gradientheader" id="DIV5" >
<asp:Label ID="Label6" runat="server" Width="100%">Show Details...</asp:Label>
</div>
<b class="roundbottom"><b class="noround"></b></b>
</asp:Panel>
<div class="contentnoborder">
<asp:Panel ID="Panel10" runat="server" >
<p>
Here your content goes...
</p>
</asp:Panel>
</div>
<b class="roundbottom"><b class="g_round4"></b><b class="g_round3"></b><b class="g_round2"></b><b class="g_round1">
</b></b>
</div>

CSS Styles:
/* ROUNDED CORNERS - Grey border + Gradient Header*/
.roundtop, .roundbottom
{
display: block;
background: transparent;
font-size: 1px;
}
.round1, .round2, .round3, .round4, .noround, .g_round1, .g_round2, .g_round3, .g_round4
{
display: block;
overflow: hidden;
}
.round1, .round2, .round3, .noround, .g_round1, .g_round2, .g_round3
{
height: 1px;
}
.round2, .round3, .round4, .g_round2, .g_round3, .g_round4
{
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.round1, .g_round1
{
margin: 0 4px;
background: #ccc;
}
.round2, .g_round2
{
margin: 0 2px;
border-width: 0 2px;
}
.round3, .g_round3
{
margin: 0 1px;
}
.round4, .g_round4
{
height: 2px;
margin: 0 0px;
}
.noround
{
background: #ccc;
margin: 0 -1px;
}
.contentborder, .contentnoborder, .gradientheader
{
display: block;
width: 100%;
overflow: hidden;
margin: 0 -1px;
}
.contentnoborder, .gradientheader
{
border: 0 solid #ccc;
border-width: 0 1px;
}
.contentborder
{
border: solid 1px #ccc;
}
.content
{
margin: 0 -1px;
border: solid 1px #ccc;
}
.gradientheader, .g_round1, .g_round2, .g_round3, .g_round4
{
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#2099CCFF', EndColorStr='#FF99CCFF');
}
References:
http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx
http://www.asp.net/learn/ajax-videos/video-89.aspx

DIV inside another DIV

DIV inside another DIV
Parent and Child DIVs: Border and Width

   <div style="border: solid 5px red; width: 50%">
        <div style="width: 100%; border: solid 5px blue;">
        </div>
    </div>

    <div style="border: solid 5px red; width: 50%">
        <div style="margin: 0 -5px; width: 100%; border: solid 5px blue;">
        </div>
    </div>

    <div style="border: solid 5px red; width: 50%">
        <div style="border: solid 5px blue;">
            </div>
    </div>

    <div style="border: solid 5px red; width: 50%">
        <div style="border: solid 5px blue;">
           Content</div>
    </div>

Content

    <div style="border: solid 5px red; width: 50%; height: 70px">
        <div style="border: solid 5px blue; width: 120%; height: 120px;">
           Overlapping Divs</div>
    </div>

Overlapping Divs