Register Javascript to hide Div

Sometimes people add javascript into the aspx page instead of using code behind but there is a case when we need to add javascript in the runtime using code behind. This is the example where javascript is used to provide switching of visibility based on the table visibility status. I used this technique to hide another user control when user click expand button. Client ID is required to know the real ID of the user control after rendering. In here we also add onclick event to the image tag.

if (!this.Page.IsStartupScriptRegistered("tableScript"))
{
string script = @"function checkVisibility() "
+ @"{"
+ @"    var element = document.getElementById('" + this.OuterTableDetailSearch.ClientID + @"');"
+ @"    var elementBtn = document.getElementById('" + this.btnExp.ClientID + @"');"
+ @"    if (element.style['visibility'] == 'hidden')"
+ @"{"
+ @"element.style['visibility'] = 'visible';"
+ @"elementBtn.src = '/Images/button_expand.gif';"
+ @"}"
+ @"else"
+ @"{"
+ @"element.style['visibility'] = 'hidden';"
+ @"elementBtn.src = '/Images/image_casestudy_search.gif';"
+ @"}"
+ @"}";

this.Page.RegisterStartupScript("tableScript", script);
}

btnExp.Attributes.Add("OnClick",
               "javascript:checkVisibility()");

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s