A Simple Way to Add Client Side Code in ASP.Net

Part of the You Can Learn C# series.
By Ken Brown
Editor, YouCanLearnSeries.com
Updated: January 10, 2005

This article deals with JavaScript and an easy way to add client side code to your ASP.Net projects using C#. This works easily as well in VB.Net with very minor modifications.

The goal of this article is to take an ASP.Net webForm, add a button to the form, do client side onMouseOver events and change background color, button color and fire a Javascript alert message. Most web programmers have used Javascript to do this in old ASP code, this might be a new twist for you and I encourage you to check it out.

So the first steps will be to create a Solution and then a project .

Open the webform1.aspx file
From the toolbox drag and drop a Web Forms button onto your form.
On the Properties tab, change the ID to "btnSubmit"
Change the Text properties of the button to "Submit"
Right click on your project file and select "add" / "Add new item" /
Under templates choose JScript File. Accept the default name and click on open.

This is definitely a good start to what we need to accomplish. Next we are going to add code within the JScript1.js file. This code will fire when we mouse over our button control. We also need to be able to see the Javascript file from the WebForm1.aspx file. And we are going to add code behind to actually fire the client side event.

So we now open our JScript1.js file by double clicking on it. Then we are adding client side code. We create a Javascript function called ClientSideCode().

function ClientSideCode() { }

We'll start by doing what many websites do, adding code to change the background color of the webform. So within our function curly brackets we add the following line.

document.bgColor = "#123456";

This small piece of code changes the background color to #123456. That finishes the section on the actual JavaScript, now we have to connect the Javascript to the webform.

Open the webForm1.aspx file by doubleclicking on the file in the Solution Explorer. If you seem to have lost the Solution Explorer, choose menu item View / Solution Explorer and the Solution Explorer will paste itself on the right hand side of your Visual Studio IDE.

The webform is probably currently in Design mode. At the bottom of the form choose the html tab. This opens the HTML that produces the visual design of the form. Within the HEAD section of the HTML we add the script type javascript and identify the file associated with that script.

<script type="text/javascript" src="JScript1.js"></script>

The type attribute identifies it as a text/javascript file. And the src attribute tells the program where to find our newly created javascript file. If you haven't already, be sure and save at this time.

If you were to try and run this program at this time nothing would happen. Why? Because even though we have a javascript file and a function to make something happen and the webForm knows where the javascript file is, we don't have any event on the button itself to make it call the javascript function.

Right Click on your HTML code and choose View Code in the popup menu. This takes you to the code behind on the page. We want this javascript code to fire anytime we move our mouse over the submit button we added earlier. To do this then the program needs to be aware of the javascript when the form first loads in the browser. So we add the following code in the Page_load event of our code behind.

btnSubmit.Attributes.Add("onMouseOver","ClientSideCode();");

The Button control has a property called attributes. This property allows you to add rendering information to the button. We are adding an OnMouseEvent called ClientSideCode. When we move our mouse over the button, the onMouseEvent fires the javascript ClientSideCode function. Whatever functionality we put in the function is rendered on the client side by javascript.

Save everything, click the start button and let's see if we did it correctly. When the browser displays your page, run your mouse over the Submit button and see what happens. If we did it right, then the whole page will turn a very dark Navy color. Did that happen for you? If not then go back and see if you missed any steps.

Like I mentioned before, there are lots of examples of using javascript to change the background color of a document (web page). What is less easy to find is how do you change the properties of the button control with javascript? Again it is very easy once you learn.

Open up your javascript file, JScript1.js. Comment out the document.bgColor line by adding to forward slashes in front of the line.

//document.bgColor = "#123456";

Now we are going to add an additional line to manipulate the color of the button control. If you accept the fact that the javascript "document" is the webForm itself, remember we just changed the color of the entire page. Then the button control sits on that document.

A document can have multiple forms on it (frames perhaps?). So the first thing we need to identify is which form does our button sit on? Since our example is very simplistic, our button is on the first form, identified as form[0]. So to actually find the button you can type:

document.forms[0].btnSubmit

That identifies our button named, btnSubmit. But we need to go deeper because we want to change one of the properties of the button, the backgroundcolor property. This is where it gets a little confusing. Because if you look at the properties of the submit button you would think you need the property, "BackColor". But when you are in javascript mode, you have to think of the properties as identified by javascript. So you are looking for a style attribute known as backgroundColor. Case is important in javascript, so if you think you have the right property but it isn't working then check the spelling.

So type in the following to allow us to change our button's backgroundColor to blue.

document.forms[0].btnSubmit.style.backgroundColor = "#123499";

That should be typed within our ClientSideCode function. Save everything and click on the blue arrow start button and let's see what happens. Move your mouse over the button and you should see the button change color to blue.

Go To Page 1 / 2