How to get the style of the element in code behind changed by JavaScript

Question

I have a some ASP.NET table rows that are initially invisible. On a click I am running a Javascript function that is changing the style of the table rows showing it or hiding it.

To show it :

document.getElementById(id).style.display = ""; 

To hide it :

document.getElementById(id).style.display = "none";

and this works.

The problem is that I need to make some filtering with the contents of the row if and only if the row is visible.

In code behind the style keeps state as was designed and does not takes the current state.

What will be the best approach to get the information if the element is visible or not?

Answer 1

When you run that JavaScript, you need to change the value of something in a server control (that will postback to the server with the new value). If you don't already have something in place, you could use something as simple as a HiddenField control.

So you'd add this to your markup:

<asp:HiddenField ID="isRowShowing" Value="True" runat="server" />

And then do this in your JavaScript functions:

//To show
document.getElementById(id).style.display = "";
document.getElementById('<%= isRowShowing.ClientID %>').value = "True";

//To Hide
document.getElementById(id).style.display = "none";
document.getElementById('<%= isRowShowing.ClientID %>').value = "False";

Then you can check it in your code behind:

if(isRowShowing.Value == "True")
{
    // Do stuff
}
else
{
    // Do other stuff.  Or don't do stuff.  Whatevs.
}