Sep 16

Written by: Peter Henry
Tuesday, September 16, 2008 10:46 PM

In my last ODNC web study group session, we learned about creating and using Web User Controls.  This is really cool stuff, and I encourage you to play around with creating/using web User Controls.  But the issue I would like to focus on is showing/hiding content dynamically. 

Ready for the secret, here it is: html table rows!  Yup, simple tags!  If you don't believe me, check out the sample code at the end of the blog entry and try it out.  There are a few other gems in there as well (like event bubbling). 

To expand a bit more, if you want to show/hide an image for example, you would place the img tag in a

<table>
    <tr id="trLogoImage" runat="Server"> <%--this line is one piece of the magic--%>
        <img src="~/CompanyLogo.png" alt="The best place to work ever! :>">
  </tr>
</table>


And then in code, where appropriate (in a _Click, or page load, etc) you would set the visibility of the trLogoImage appropriately.  This is the second piece of this magic.

The reason why this works is if you make the img tag a server side control (with id and runat attributes) you'll still have space around it when your browser renders the html.  Therefore it could pose problems with lining things up and making your UI neat and clean.  This is an easy fix, especially if you already have the tags in place already, you just have to make the server side controls with ID and runat attributes.

The code will generate a Default.aspx which will look like this.



I hope you'll be able to use this little trick in the future to show/hide your UI controls.  Enjoy.


Resources: Download sample project

Tags: