Javascript and Asp .Net…. Oh the pain.

Asp .Net makes some things very easy.  In particular, it makes adding controls that cause postbacks very very easy indeed.  You can do all of your web application event handling in this way without any problems whatsoever.

Of course, you migh not want to.

I’ve been investigating css as a mechanism for styling pages with a view to doing some work with Ajax – Asynchronous Javascript and XML.  Ajax has been used very successfully with a number of popular webapps, such as google mail, to provide application-like functionality and UI response from web apps, which have otherwise been lacking in this area.

So it was I came across the my little problem.  Whilst its easy to program server side events and control handling in Asp .Net, information on client-side scripting whilst using Asp .Net is a little harder to come by.

First things first, the control code in javascript.  It took quite some time before I was able to understand how to get a reference to a server control in a javascript function.  It’s possible to used [form_name].[control_name].[attribute] when dealing with plain html controls, though I think even that is frowned upon by w3c these days.  The answer lies in the getElementById function.  It works like this:-

document.getElementById(‘myTextBox’).value = “Value for a textbox”;

So, in order to test this I set up a little function that would check my check box and display a message if it was checked.  This was testing both my ability to poll a checkbox, and my ability to have the checkbox call the event handler.

The text for the function is below:-

function checkBoxChecker()
{
    if (document.getElementById(‘checkBox1’).checked)
       alert(“w00t! It worked!”);
}

As you can see, a very simple function.  It wouldn’t work – I could not find a way to attach this function to my asp:checkbox function.

So, I replaced the asp:checkbox’s with default html <input type=checkboxes> and the code worked fine.  The first problem, the javascript, was solved.

However, this raises another issue.  I want to later be able to check the checkboxes from my server code.  Which, strangely enough, cannot be done on html controls without some nasty text parsing which I didn’t want to get into at all. Not even a little.

So, we’re back to server controls.  Here is the control definition:

<asp:CheckBox id=”checkBox1″ runat=”server”></asp:CheckBox>

I tried adding the OnCheckedChange event handler to this description, that causes an error.  To be exact, it causes this error: CS0117:  does not contain a definition for – I removed the identifiers there to make it easier to search for in google. 

This happens because the compiler assumes you’re trying to link to a server side code event, rather than a javascript.  I finally found a note in msdn that says you -can- add a client side event, but not in the definition. It has to be done via code!  A-Ha!

So in our code behind file, in our Page_Load function we need to add the following:-

checkBox1.Attributes.Add(“onclick”, “checkBoxChecker();”);

and baboom.  Thats the same as adding the onclick to the underlying html control manually.  Now it works.  Finally.

Advertisements

2 thoughts on “Javascript and Asp .Net…. Oh the pain.

  1. *sigh* I’m a php/javascript guy with a good amount of VB experience who picked up some asp.net work as a side project.

    WHAT A MISTAKE.

    Thanks for the post though, SUPER helpful. I’m finally almost done with this bastard of a web form.

    • Asp .Net is quite a good system for complicated web applications on the windows server platform, however it involves a different methodology and technologies then many developers who have never tried it might find quite difficult at first. It’s well worth the effort to learn, though it is certainly very different to simple javascript and php sites 😉
      I’m glad the post was a help to you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s