Client Element visibility based on Server Element
Ever wanted to hide a client-side element based on the visibility of the server-side element in ASP.NET? The below achieves this by using the Visible property and some CSS.
Suppose you have the following:
<div id="clientElement">Blah Blah...</div>
<div id="serverElement" runat="server">Some more Blah...</div>
Now the #clientElement needs to be hidden when the #serverElement is not rendered. To achieve this, we will use the
<%= serverElement.Visible %>
property in a class for #clientElement.
<div id="clientElement" class="visible<%= serverElement.Visible %>">
Blah Blah...
</div>
The class applied to #clientElement when #serverElement is hidden will be visibleFalse and we will hide such elements in CSS.
<style>
.visibleFalse {display: none;}
</style>
Have any suggestions? Better techniques? Please share below.