11. Client Side Scripting

FAQ Home

11.1	How to emit client-side javascript blocks from VB.NET/C#?

11.2	How to open a new Window using javascript function from a Link button?

11.3	Is there a JavaScript Quick Reference Guide?

11.4	How to set the background color of a web page using code behind?

11.5	How to resolve error message "String constants must end with a double quote."?

11.6	Why can't I open a new browser window from within server code?

11.7	How to get the confirmation of Yes/No from a javascript pop-up and display the value on the page?

11.8	How to open a browser window with maximum size on click of a button?

11.9	How can I know if the client browser supports active scripting?

11.10

How to determine if the Browser supports javascript?

11.11

How can I change the scroll bar color?

11.12

How to create dynamic javascripts in server side code based on server side variables?

11.13

How can I use a Timer Control to refresh a page automatically at a specified interval?

11.14

How to open a new window without IE menus and toolbars on click of a button?

11.15

Does JavaScript support hashtables/ hash tables or dictionary type data structures?

11.16

How to disable the right click option on a web page?

11.17

How to hide a control using javascript?

11.18

Can I modify WebUIValidation.js?

11.19

How to change a Label element's text in javascript?

11.20

How to resize two <div> tags on a webform?

11.21

How to check/ uncheck a checkbox based on the text entered in textbox?

11.22

How to rotate a Label Text?

11.23

How to display a message in the status bar of a browser window?

11.24

How to change the BackGroundColor of a page based on the value selected in a DropdownList?

11.25

How to disable a Dropdownlist once someone has selected an item in the Dropdownlist?

11.26

How can I make a Textbox a mandatory field if a checkbox is checked on a button click event in the client side?

11.27

Why does the SmartNavigation does not work on the live server but works perfectly on the Development Machine?

11.28

How to pop up a message box when no item in the dropdownlist is selected before postback?

11.29

Are there any resources regarding the Mozilla specific Browser Objects and CSS information?

11.1 How to emit client-side javascript blocks from VB.NET/C#?

The RegisterStartupScript method emits the script just before the closing tag of the Page object's <form runat= server> element. VB.NET

RegisterStartupScript("Sample", "<SCRIPT Language='javascript'>alert('Hello World');</SCRIPT>")

C#

RegisterStartupScript("Sample", "<SCRIPT Language='javascript'>alert('Hello World');</SCRIPT>");

Alternatively, use the RegisterClientScriptBlock method which emits the client-side script just after the opening tag of the Page object's <form runat= server> element.

11.2 How to open a new Window using javascript function from a Link button?

VB.NET

link.Attributes( "onClick" ) = "window.open( 'url', 'name', 'properties' )";

C#

link.Attributes[ "onClick" ] = "window.open( 'url', 'name', 'properties' )";

You can also check out Andy Smith's RemoteWindow Control

11.3 Is there a JavaScript Quick Reference Guide?

Here is a JavaScript Quick Reference Guide in Poster Format that you can print out and refer easily. Covers the older and newer version of DOM and IE and Mozilla. Danny Goodman's JavaScript and Browser Objects Quick Reference

11.4 How to set the background color of a web page using code behind?

Yes In the body tag, add runat="server" and give the tag an id (e.g. id="bodyID"). In the class definition in the code-behind, add VB.NET

Protected bodyID As System.Web.UI.HtmlControls.HtmlGenericControl

C#

protected System.Web.UI.HtmlControls.HtmlGenericControl bodyID ;

In code, use the attributes collection to set the bgcolor attribute: VB.NET

bodyID.Attributes.Add("bgcolor", "green")

C#

bodyID.Attributes.Add("bgcolor", "green");

11.5 How to resolve error message "String constants must end with a double quote."?

To resolve this check out PRB: The Tag Is Treated As a Closing Tag When Inside a Quoted String

11.6 Why can't I open a new browser window from within server code?

Server code executes on Server, whereas the new window is created on the client. You need to use client-side script to open new window.

11.7 How to get the confirmation of Yes/No from a javascript pop-up and display the value on the page?

Code Behind

Button1.Attributes.Add("onclick", "getMessage()")

Client Side

<SCRIPT language=javascript>

function getMessage()

{

var ans;

ans=window.confirm('Is it your confirmation.....?');

if (ans==true)

{

document.Form1.hdnbox.value='Yes';

}

else

{

document.Form1.hdnbox.value='No';}

}

</SCRIPT>

To display the Yes/No value selected by user, in your code behind file:

Response.Write(Request.Form("hdnbox"))

11.8 How to open a browser window with maximum size on click of a button?

VB.NET

Button1.Attributes.Add("onclick", "window.open('page2.aspx','','fullscreen=yes')")

C#

Button1.Attributes.Add("onclick", "window.open('page2.aspx','','fullscreen=yes')");

11.9 How can I know if the client browser supports active scripting?

You can detect and interept the capabilities of your client using the namespace System.Web.HttpBrowserCapabilities : VB.NET

Dim browser As System.Web.HttpBrowserCapabilities = Request.Browser

Response.Write("Support ActiveXControl: " + browser.ActiveXControls.ToString())

C#

System.Web.HttpBrowserCapabilities browser = Request.Browser;

Response.Write ("Support ActiveXControl: " + browser.ActiveXControls.ToString ());

For more details Refer: Detecting Browser Types in Web Forms

11.10 How to determine if the Browser supports javascript?

VB.NET

if Page.Request.Browser.JavaScript then

...

else

...

end if

C#

if (Page.Request.Browser.JavaScript )

{

...

}

else

{

...

}

11.11 How can I change the scroll bar color?

Use Style Sheet to change the color of scroll-bar

body

{

FONT-SIZE: 8pt;

COLOR: #000000;

background-color: #EEEEEE;

scrollbar-face-color: #EEEE99;

scrollbar-highlight-color: #DDDDDD;

scrollbar-shadow-color: #DEE3E7;

scrollbar-3dlight-color: #FF6600;

scrollbar-arrow-color: #006699;

scrollbar-track-color: #EFEFEF;

scrollbar-darkshadow-color: #98AAB1;

}

11.12 How to create dynamic javascripts in server side code based on server side variables?

Here's and example: VB.NET

Dim value As String = "pic1.jpg"

Button1.Attributes("onMouseOver") = "alert( '" + value + "');"

C#

string value = "pic1.jpg";

Button1.Attributes["onMouseOver"] = "alert( \"" + value + "\");" ;

11.13 How can I use a Timer Control to refresh a page automatically at a specified interval?

<asp:DropDownList id="DropDownList1" runat="server" onChange="SetClientRefresh(this);">

<asp:ListItem Value="1000">1 second</asp:ListItem>

<asp:ListItem Value="2000">2 seconds</asp:ListItem>

<asp:ListItem Value="3000">3 seconds</asp:ListItem>

</asp:DropDownList>

<script language='javascript'>

var cTimeOut = null;

function SetClientRefresh(sel)

{

var newRefresh = sel.options[sel.selectedIndex].value;

if (cTimeOut != null)

{

window.clearTimeout(cTimeOut);

}

cTimeOut = window.setTimeout("ReLoadPage()", newRefresh);

}

function ReLoadPage()

{

window.location.reload();

}

</script>

11.14 How to open a new window without IE menus and toolbars on click of a button?

VB.NET

Button2 .Attributes.Add ("onclick", "window.open('webform1.aspx','_blank','toolbar=no')")

C#

Button2 .Attributes.Add ("onclick", "window.open('webform1.aspx','_blank','toolbar=no')");

11.15 Does JavaScript support hashtables/ hash tables or dictionary type data structures?

All Objects in JavaScript implicitly support hash table like syntax by virtue of behaving as Associative Arrays. Properties of an object can be accessed in 2 ways as shown below:

object.property = value;

object["property"] = value;

So, when used in a hash table like syntax as shown above, you will be simply creating dynamic properties and assigning values to those properties.

11.16 How to disable the right click option on a web page?

<body oncontextmenu="return false;">

...

</body>

Note :User can still do a View/Source in their browser menu.

11.17 How to hide a control using javascript?

document.getElementById("<id>").style.visibility="hidden";

11.18 Can I modify WebUIValidation.js?

Extract from MSDN :

You are encouraged to read the script to see more of what is going on. However, it is not recommended that you modify these scripts, because their function is very closely tied to a particular version of the run time. If the run time is updated, the scripts may need a corresponding update, and you will have to either lose your changes or face problems with the scripts not working. If you must change the scripts for a particular project, take a copy of the files and point your project to them by overriding the location of the files with a private web.config file.It is perfectly fine to change this location to be a relative or absolute reference.

For more details refer ASP.NET Validation in Depth

11.19 How to change a Label element's text in javascript?

document.getElementById("Label1").innerText = "Changed Text";

11.20 How to resize two <div> tags on a webform?

<script>

function ResizeDivs()

{

var DivTop = document.getElementById('Top')

var DivBottom = document.getElementById('Bottom')

var BodyHeight = 0;

var DivTopHeight = 0;

var DivBottomHeight = 0;

var DivBottomPosition = 0;

BodyHeight = document.body.clientHeight;

DivBottomHeight = DivBottom.clientHeight;

DivBottom.style.top = BodyHeight - DivBottomHeight;

DivTop.style.height = DivBottom.style.top;

}

window.onload = ResizeDivs;

window.onresize = ResizeDivs;</script>

<div id="Top" style="position:absolute; top:0px; left:0px; background-color:#c0c0c0; overflow:auto; width:100%">

Top Div Text:

<br>Syncfusion

<br>Sample code

<br>To

<br>autosize

<br><div>

<br>tag

</div>

<div id="Bottom" style="position:absolute; background-color:#808080; width:100%">

Bottom Div Text:

<br> Footer for the page

<br> Line1

<br> Line2

</div>

Note : if the DIV has no borders, clientHeight works. If you are going to be using a border or margins, then use offsetHeight

11.21 How to check/ uncheck a checkbox based on the text entered in textbox?

<asp:CheckBox id="CheckBox1" runat="server"></asp:CheckBox>

<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>

<script type="text/javascript">

function chkTextEntered()

{

document.getElementById("CheckBox1").checked = true;

if(document.getElementById("TextBox1").value =="" )

{

document.getElementById("CheckBox1").checked = false;

}

}

</script>

In Page_Load VB.NET

TextBox1.Attributes.Add("onKeyDown", "chkTextEntered();")

C#

TextBox1.Attributes.Add("onKeyDown", "chkTextEntered();");

11.22 How to rotate a Label Text?

<asp:Label id="Label1" style="writing-mode:tb-rl" runat="server">Label</asp:Label>

11.23 How to display a message in the status bar of a browser window?

<body onload ="window.status='First Page'">

..

</body>

11.24 How to change the BackGroundColor of a page based on the value selected in a DropdownList?

<asp:DropDownList id="DropDownList1" runat="server" AutoPostBack="True">

<asp:ListItem Value="Red">Red</asp:ListItem>

<asp:ListItem Value="Blue">Blue</asp:ListItem>

<asp:ListItem Value="Green">Green</asp:ListItem>

</asp:DropDownList>

VB.NET

Page.RegisterClientScriptBlock("BodyStyle", "<style type='text/css'>body{background-color: " + DropDownList1.SelectedItem.Value + ";}</style>")

C#

Page.RegisterClientScriptBlock("BodyStyle", "<style type='text/css'>body{background-color: " + DropDownList1.SelectedItem.Value + ";}</style>");

11.25 How to disable a Dropdownlist once someone has selected an item in the Dropdownlist?

<asp:DropDownList id="DropDownList1" runat="server">

<asp:ListItem Value="Red">Red</asp:ListItem>

<asp:ListItem Value="Blue">Blue</asp:ListItem>

<asp:ListItem Value="Green">Green</asp:ListItem>

</asp:DropDownList>

VB.NET

DropDownList1.Attributes.Add("onChange","this.disabled=true;" )

C#

DropDownList1.Attributes.Add("onChange","this.disabled=true;" );

11.26 How can I make a Textbox a mandatory field if a checkbox is checked on a button click event in the client side?

<asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 32px; POSITION: absolute; TOP: 104px" runat="server">

<asp:CheckBox id="CheckBox1" style="Z-INDEX: 102; LEFT: 24px; POSITION: absolute; TOP: 80px" runat="server">

<asp:Button id="Button1" style="Z-INDEX: 103; LEFT: 32px; POSITION: absolute; TOP: 144px" runat="server" Text="Button">

<script>

function func1()

{

if(document.getElementById ("CheckBox1").checked==true)

{

if(document.getElementById("TextBox1").value=="")

{

alert("Enter something in textbox");

}

}

}

</script>

VB.NET

Button1.Attributes.Add ("onclick" , "return func1()");

C#

Button1.Attributes.Add ("onclick" , "return func1()");

11.27 Why does the SmartNavigation does not work on the live server but works perfectly on the Development Machine?

May be the domain does not have access to the aspnet_client folder which is located in the wwwroot folder. i.e the website is not able to find the scripts for smart navigation. So set up a virtual folder to the wwwroot/aspnet_client and it will fix the problem.

11.28 How to pop up a message box when no item in the dropdownlist is selected before postback?

Make sure to add a ListItem with Text="Please Choose" and Value ="". Add a RequiredFieldValidator with ControlToValidate= <Dropdownlist1> and Display="None" Add a ValidationSummary with ShowMessageBox =true

<asp:DropDownList id="DropDownList1" runat="server">

<asp:ListItem Value="">Please Choose</asp:ListItem>

<asp:ListItem Value="Faq">Faq</asp:ListItem>

<asp:ListItem Value="Tips">Tips</asp:ListItem>

<asp:ListItem Value="Tricks">Tricks</asp:ListItem>

</asp:DropDownList>

<asp:RequiredFieldValidator id="RequiredFieldValidator1" style="Z-INDEX: 102; LEFT: 176px; POSITION: absolute; TOP: 48px"

runat="server" ErrorMessage="Please Select an Item in the dropdownlist" ControlToValidate="DropDownList1"

Display="None"></asp:RequiredFieldValidator>

<asp:Button id="Button1" style="Z-INDEX: 104; LEFT: 128px; POSITION: absolute; TOP: 16px" runat="server"

Text="Button"></asp:Button>

<asp:ValidationSummary id="ValidationSummary1" style="Z-INDEX: 105; LEFT: 176px; POSITION: absolute; TOP: 72px"

runat="server" ShowMessageBox="True" ShowSummary="False"></asp:ValidationSummary>

11.29 Are there any resources regarding the Mozilla specific Browser Objects and CSS information?

Official Gecko DOM Reference: Gecko Dom Reference Here is a very useful list of custom CSS styles specific to Mozilla: XUL Planet