Runtime controls & Javascript events

ITGeek · June 24th, 2007, 06:54 PM

Hi there,
I am developing a survey website using ASP.NET (VB.NET) in .NET framework 1.1
I am generating all the controls on my web page at the run time, so I generate tables and rows n cells and then based on the values in the database I create controls and put them in the cells. I have a lot of controls on every row of the table on the page, for example, in each row of a page I have 3 radio buttons (for responses like Yes, No, don't know), a drop downlist (enabled = false, by default), and an input box or two. And there are heaps of rows like these.

Now what I want to do is that when user clicks the first radio button (Yes) then the dropdown list should be enabled for selection and if the user clicks either one of the other two radio buttons (No, Don't know) then dropdownlist should be disabled again. I need to do this for every row.
My problem is that since I am generating all these controls at runtime, I don't know how to use javascript onclick event to do this? When I am creating the radio buttons at runtime, if I try to add a line like radioButtonObject.Attributes = "javascript onclick(DropdownlistObjet);" then it does not work coz that drop down object is not yet been created ofcourse as it is the last object in each row and is created after the 3 radio buttons.
Also these controls are HTMLcontrols, not server controls, I do not want to postback to server on click of each control, as I know that can be done by adding handlers.

I hope I have described it clearly, if not, happy to clarify, if anyone could please throw some light on this issue of mine, I would really appreciate it!
Thanks a lot for your help in advance.

Best Regards

planoie · June 25th, 2007, 09:17 PM

In order for your javascript to behave correctly you are going to need to use server controls. Well, that would be the easiest way because you can let the framework deal with naming the controls. That is not to say that you need to use postbacks however.

Add all the controls to the parent container. They need to be added to the parent container so they will get unique client IDs. Then after all the controls are added you can "wire up" the javascript like this (expanded out for easier reading):

Code:

string strOnClick;

strOnClick = string.Format("onRadioClick(true, '{0}');", dropDownList.ClientID);
radioButtonObject.Attributes["onclick"] = strOnClick;

and so on. You will be passing the framework generated unique client name of the dropdown list control. Then in your onRadioClick client-side method, you can use the document.getElementById() to get the dropdownlist control and affect it as needed based on the radio state. Notice I added another argument to the method. That way you can pass some value (true/false) from each radio button event so you know whether to enable or disable the dropdownlist:

Code:

function onRadioClick(ddlState, ddlName){
   var dropDownList = document.getElementById(ddlName);
   dropDownList.disabled = !ddlState;
}

-Peter

ITGeek · June 29th, 2007, 11:48 PM

Thanks Peter, appreciate your prompt and well-explained reply, sorry for this late reply as I got really busy with other stuff.
I have a couple of questions here, first one is that if I change the controls to web server controls then I am not sure how I will submit their values back to the database? What I mean is, say for web control radio button, I dont know how to check for the one that is selected using Request.form.item properties, I can only do Request.form.item(radio.id) but then how do I know whichout of the 3 ineach row is checked? coz I cannot do if request.form.item(radio1).checked = true.. WHEREAS using HTML radio button, I can just submit it back by using Request.form.item(radio.name) , (and making sure that I assign the same name to all the 3 radio buttons in a row), while submission, the checked radio button is automatically submitted.
Secondly, I am wondering why u used {0} in your code above?
And finally, when I generate the controls at run time, I put them in table row-cells, so does that mean the table is the parent control for my other cotrols? Or do I need to do something manually to force the parenting of controls? Is the control ID generated automatically or do I need to assign that?
Hope my questions make sense, I would really like some help regarding this, thanks a lot in advance!

Best Regards

planoie · July 2nd, 2007, 08:50 AM

Usually the idea with dynamic control generation is to reliably generate the control each type the page executes. This way, then you do a postback, you first generate all the controls then do what you need with them whether it is just showing them initially for the user to answer or recreating them (so that the user answer can be linked to them) and then reading the answer values.

When the right sequence, the page will populate the postback values to the controls you generate. This is part of the built it process of restoring viewstate and processing posted values in order to raise events (such as a TextChanged event on a textbox).

The {0} is part of the string formatting syntax. It is used in String.Format(), StringBuilder.AppendFormat and some other places. Consider this:

myString = "Hello, my name is '" & strName & "' and I am " & intAge & " years old."

    versus

myString = string.Format("Hello, my name is '{0}' and I am {1} years old.", strName, intAge)

1) This syntax is much easier to read
2) This syntax is more efficient than inline concatenation.
This is particularly helpful when you have some complex strings to construct with lots of values or confusing structures like strings with quotes. Also the formatting features perform actually formatting. For example:

   string.Format("Your total is: {0:C}", 27.5)

gives you

   Your total is: $27.50.

Or this:

   string.Format("myapp_{0:yyyyMMddHHmmss}.log", DateTime.Now)

gives you

   myapp_20070702095115}.log

That is much easier then using the datetime methods to get each part of the date and time individually in a long string concatenation.

-Peter

ITGeek · July 2nd, 2007, 03:45 PM

Thanks for such a clear explaination Peter.
Are you able to advise me on my other two issues I mentioned? I tried the code suggested but it does not seem to work, I guess I may not be adding all the controls to the parent container first (table and cells), coz I create cells based on the control names stored in the database.
I even tried adding all the controls to the table/cells on the page, then I used your suggested code, but no luck at all.
Please help, also if you could throw soem light on my other two questions in previous thread, that wuold be much appreciated!
Thanks, Best Regards