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 .
  1. Open the webform1.aspx file
  2. From the toolbox drag and drop a Web Forms button onto your form.
  3. On the Properties tab, change the ID to "btnSubmit"
  4. Change the Text properties of the button to "Submit"
  5. Right click on your project file and select "add" / "Add new item" /
  6. 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

Home| About Us | NewsLetters | Contact Us |

Copyright © 2004-2014 You Can Learn Series

You Can Learn Series Home Page You Can Learn Series
You Can Learn Series Home Page Home            About the creators of YouCanLearnSeriesAbout Us      Contact YouCanLearnSeriesContact Us      Site map of YouCanLearnSeriesSite Map      Privacy Policy of You Can Learn SeriesPrivacy Policy       Terms of Use of You Can Learn Series web siteTerms of Use       YouCanLearnSeries RSS feed for C# tips and tutorials     
C# and ASP.Net Programming TipsC# and ASP.Net      SQL Tutorial, tips and tricks for DBA'sSQL       Landscaping Tips for Home GardenersLandscaping       WeightLifting Tips for the Young and OldWeightLifting       Kennos BlogBlog       Good health TipsGoodHealth       Learn about Great Travel DestinationsTravel     Web Business TipsWeb Business            You Can Learn Series' Online StoreStore



You Can Learn C# and ASP.Net SeriesC# and ASP.Net
  Using Client Side Code with C# and ASP.NetClient Side Code
  Using Client Side State Management with C# and ASP.NetClient Side State Management
  Create a C# Class in Visual StudioCreate A Class
  Use A Class in C#Use A Class
  Create a Solution in Visual StudioCreate a Solution
  Create a Project in Visual StudioCreate a Project
  Create an RSS feed for your Web SiteCreate an RSS Feed
  Create an RSS feed for your Web SiteListItemCollection
  Set Events in ASP.NetSet Events ASP.Net
  Set Events in C#Set Events C#
  What is Session State and How to Use it.Session State
  Creating and Using the C# SortedList ObjectSortedList Object
  Stylesheet Tips for Visual Studio .Net and ASP.NetStyleSheet Tricks
  Using C# MethodsUsing Methods
  Pass Objects to MethodsPass Objects to Methods
  Pass Objects from MethodsPass Objects from Methods
  Using Client side State management like ViewState and Hidden fieldsView State
  LDAP, What is Lightweight Directory Access ProtocolWhat is LDAP
  Build an LDAP ReaderBuild an LDAP Reader
  Convert information from LDAP to a Web ServiceLDAP To Web Service
  Question of the dayQuestion of the Day

You Can Learn SQL SeriesSQL
You Can Learn Landscaping and Gardening SeriesLandscape Tips
You Can Learn WeightLifting SeriesWeightLift Tips
Kenno's BlogBlog
You Can Learn Good Health SeriesGood Health Tips
You Can Learn Good Series NewslettersNewsletters
Learn about Great Travel DestinationsTravel
You Can Learn Series Web Business TipsWeb Business Tips
Merchandise Available from You Can Learn SeriesMerchandise

Bill Welter - The Prepared Mind of a Leader




Americas Public Schools