Easiest/Best Hide/Show Client Side Hide/Show for ASP.NET

Question

I have a DropDownList and a TextBox on a Page. When the user chooses the "other" option in the DropDownList I want to display a TextBox just to the right of it. I do not want to use the traditional PostBack technique. I want this interaction to be client side.

I am aware that I can get a get a reference to the DOM element and set its style to "display:none" or "display:". What I am looking for is something that is built into the ASP.NET framework for handling something like this. I mean, in jQuery this is as simple as $('controlID').hide. Is there a Control Extender that can do this? Is jQuery part of the ASP.NET framework yet?

Answer 1

jQuery will be/is distributed with VisualStudio/ASP.NET MVC, though I wouldn't call it part of the framework. I think that you can feel free to use it and trust that it will be supported.

Note that Microsoft has said that they will be using the main line of development for jQuery so the code itself won't be any different than you can download from jQuery.com, except perhaps for built-in Intellisense.

EDIT: To set up your functionality download the code from jquery.com. Put it in your scripts folder, or wherever you store javascript stuff. Add a script reference for it to your page. Use jquery to add an onchange handler to your dropdown list and when the value of the dropdown list is other show the textbox, otherwise hide it. The example below assumes that other isn't the default selection. If you are using runat="server" controls with MasterPages or inside UserControls, you'll need to adjust the names in the javascript functions to account for the name mangling that ASP.NET does. Probably simpler to give them unique CSS classes and reference them using the ".class" notation rather than "#id" notation.

<script type="text/javascript" src="...pathtoscript../jquery.1.2.6.js"></script>
<script type="text/javascript">
   $(document).ready( function() {
       $("#DropDownListID").bind('change', function() {
           if (this.options[this.selectedIndex].value == 'other')
           {
               $("#TextBoxID").show();
           }
           else
           {
               $("#TextBoxID").hide();
           }
       });
   });
</script>

  ...

 <select id="DropDownList">
     <option value='first'>First</option>
      ...
     <option value='other'>Other</option>
 </select>
 <input type='text' id='TextBox' style='display: none;' />

Answer 2

You could also use the asp.net client side framework(via the scriptmanager) to get a reference to the element. But then you still have to use the normal DOM manipulation.

$get('<%= myDropDown.ClientID %>').style.display = 'none';

Just make sure you have the script manager referenced.

For something so simple, I wouldn't think it is worth referencing jquery, but maybe you've got bigger plans ;-)