Monday, April 23, 2012

One way to Hide/Show information without postback

This is a simple method of hiding or showing information based on a users action. It utilizes CSS, Javascript, and ASP.NET controls
1.) Define CSS for .visible and .hidden 
.visible
{
    visibility: visible;
    position: relative;
}
.hidden
{
    visibility: hidden;
    position: absolute;


2.) Create separation of content using divs and set onchange event


<div>
    Do you want to show more info?
    <asp:dropdownlist  id="Question" onchange="javascript:HideShow(this, 'Detail')" runat="server">            
        <asp:listitem> </asp:listitem>
        <asp:listitem value="True">Yes</asp:listitem>
        <asp:listitem value="False">No</asp:listitem>
    </asp:dropdownlist>     </div>
<div id="Detail">
    Some additional information
</div>

 3.) Set onclick method to hide/show inline or via Javascript function call 



    HideShow(var ctl, var detailsSection){
        if (document.getElementById)
        {
            var e = document.getElementById(detailsSection);
             if (e != null)
            {
                 e.className = (ctl.selectedIndex != 1 ? 'hidden' : 'visible');
            }
         }
    }

Wednesday, April 4, 2012

Auto redirect a form when page loads

To redirect a form onload, set the onload event of the body

<html>
  <body onload="document.TheForm.submit();">
    <form name="TheForm" action="redirectURL" method="post">
      <input type="hidden" name="ID" value="valueToPass" />
    </form>
  </body>
</html>

*Note: setting a hidden input name/value pair will allow the receiving URL to pull and use that info being sent.