"Ah, but I was so much older then, I'm younger than that now."
My Boog Pages
Monday, July 3
Changing the value of a data-bound control using ASP.NET's LinkButton Control - UPDATED
Or, the second entry in my unofficial series "Confessions of an ASP.NET newbie" (first entry is here).
I was recently working on an ASP.NET 2.0 project where I wanted to be able to click an LinkButton control and have it change the values of a number of fields. Google found a number of posts on various message boards asking for help doing the same thing. The most common response was, "Why would you want to do that?"
So I had to figure it out on my own. There are probably better ways of doing this - possibly during data validation, for instance - but this is the simplest method I could come up with.
Caveat: This method requires JavaScript. If it's disabled in the client's browser, this code won't work.
Let's approach this problem backwards. First we'll create a JavaScript function that carries out the actions we want, then we'll figure out how to call it from the LinkButton.
This simple function takes the control ID of a checkbox and a boolean value, then sets the "checked" property of the control:
<script language="javascript"> <!--
function SetCheckbox(ControlID, ControlState) { var CheckControl = document.getElementById(ControlID);
CheckControl.checked = ControlState; }
--> </script>
Please note that this control ID is from the JavaScript document object model, not from ASP.NET. Place this function in the <head> section of your ASP.NET page.
Now let's look at the settings for the LinkButton control. Normally you would use this control to initiate a PostBack for a web form, but there is also a property called OnClientClick that carries out an action in the client browser before the form is submitted (ASP.NET does this by supplying both OnClick and href attributes in the HTML sent to the client). So we just put in a call to the SetCheckbox function and provide the target field's ID, right?
Not so fast. In order to maintain globally unique IDs within each web page, the ClientID field of an ASP.NET control is defined both by the ID of the field itself and of any containers the field is within. This value is not obvious at design time and may change if the design is modified, so we don't want to try to statically code it.
Happily, there's a simple solution: the ASP.NET page itself knows what this client ID will be, and sticks it in a property called ClientID.
So at runtime you can use the following code to dynamically determine the client ID of the checkbox field and to set the OnClientClick property of the LinkButton control appropriately (this example assumes the checkbox is contained with a FormView control named 'ExampleFormView'):
Dim ExampleLinkButton as LinkButton Dim ExampleCheckbox as CheckBox Dim ExampleID as String
This code is in the Page_PreRenderComplete event handler in my page because the visible property of the LinkButton is data-bound, so I need to make changes to this control's properties after databinding is complete. In most cases you should be able to use it in the Page_Load handler. Please note the single quotes around the client ID parameter - it's easy to lose sight of them up against the double quotes marking the string literals.
If the target field (a checkbox, in this case) is data-bound, this function will only change the value but will not save it in the datasource. If you want to immediately save the value, just set the LinkButton's CommandName value to "Update". ASP.NET will first execute the client click, which will update the checkbox's value, and will then post the changed data back to the server with instructions to update the database.
UPDATE: I found an error in the description above. Specifically, a LinkButton always causes a PostBack round-trip, so if you don't want to lose any changes you made in JavaScript, you must specify that the CommandName is "Update". This will save your changes to the underlying database. If this is not what you want to do, use a HyperLink object instead of a LinkButton, and put the JavaScript command into the NavigateUrl property instead of into OnClientClick. Otherwise the code works as described.
If you find this code helpful, please leave a note in the comments.
