Javascript and Asp.net

Let’s see how we can use javascript with our server side controls with very simple examples

1) One way is using

controlname.attributes.add(string key,string value);

Let’s see an example

1. Create a new webpage

2. Add a textbox to it.

<asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>

3. Now let us add some javascript for onMouseOver event so that whenever mouse is over the textbox it should alert Hello World message.

4. For this add this code on page_load event handler

protected void Page_Load(object sender, EventArgs e)
{
TextBox1.Attributes.Add(“onMouseOver”,”alert(‘Hello World’);”);
}

OnMouseOver is the name of the JavaScript event followed by our javascript code to run on occurence of that event.

5. If small code of javascript is there than we can write it over directly in attributes.add but otherwise it’s better we write the code within our script block and put the name of the function over there

<script type=”text/javascript”>
function mHover()
{
alert(‘Hello World’);
}
</script>

and

protected void Page_Load(object sender, EventArgs e)
{
TextBox1.Attributes.Add(“onMouseOver”, “mHover()”);
}

Normally we can insert javascript by adding attributes to the control.

But for our button server control we can use OnClientClick property for handling button clicks with Javascript code

<asp:Button ID=”Button1″ runat=”server” Text=”Button” OnClientClick=”return confirm(‘Post back to the server?’);”/>

Whatever is written on OnClientClick fires first followed by the postback event.

In above case if the method returns false i.e. user clicks cancel no post back occurs.

Some common javascript events which we can use inside attributes.add are

onChange, onClick, onMouseOver, onMouseOut, onKeyUp, onKeyDown, onSelect, onFocus, onBlur,onAbort, onError, onLoad ,onUnload

In asp.NET we can make use of Page.ClientScript property for managing script blocks

RegisterClientScriptCallBlock() : It writes the script block right after the <form runat=server> tag

RegisterStartupScript() : It writes the script block right before closing </form> tag

We will modify the textbox example we first created

1: Remove the script section from the aspx page and put it on the page load like this

protected void Page_Load(object sender, EventArgs e)
{
TextBox1.Attributes.Add(“onMouseOver”, “mHover()”);
string script=@”<script type=’text/javascript’>
function mHover()
{
alert(‘Hello World’);
}
</script>”;
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),”onMO”,script);
TextBox1.Attributes.Add(“onMouseOver”, “mHover()”);
}

2: Now run the web page and see the source we will find the script added just after the <form> start tag

3: Now replace

Page.ClientScript.RegisterClientScriptBlock(this.GetType(),”onMO”,script);

with

Page.ClientScript.RegisterStartupScript(this.GetType(),”onMO”,script);

4: We will be able to see the script added just before the </form> tag

Bye