Display ASP.NET Control on Event

Question

I'm looking to create a custom date picker with code examples from several sources.

Is the code to display/hide an ASP.NET control when a user clicks a button usually done with JavaScript or ASP.NET code? By display/hide, I mean within the page not a popup window.

Please provide a simple example. (If ASP.NET, VB example preferred over C#)

Answer 1

The answer is, it depends. Do you want the date picker show/hide to trigger a postback and thus some code on the server, or do you want it to act purely on the client?

If you want it to act purely on the client, then, modify the markup for your button:

<asp:Button runat="server" ID="myButton" OnClientClick="ShowHideCalendar()" Text="myButton" />
<script language="javascript" type="text/javascript">
var calendarVisible = false;
function ShowHideCalendar()
{
  if (calendarVisible)
  {
    // Code to *SHOW* calendar here
    // Show the DIV it's contained in, pop the window with it in, etc..
  }
  else
  {
    // Code to *HIDE* the calendar here
  }
}
</script>

The key bit is the "OnClientClick" property of the asp:Button control.

Answer 2

Its best practice to do such thing asynchronously, rather than having a full postback that refreshs the entire page. That means that you have two options:

1. Update an UpdatePanel in which your control is placed. That gives you the benefit of only re-rendering the content in the UpdatePanel.
2. Use clientside scripts to toggle the control. You also need to perform a callback, that tells your codebehind that you just toggled the visibility to asure your code is in the same state as the webpage displaying it.

I'd prefer using the second one.