I am using ASP.Net Controls like (TextBox, Drop down List) in my UserControl Page and all are make invisible for this i am using (Edit ). There is a Link Button for Edit in the same page. I want to make it visible at clientside. can any one suggest how should i do. or any other way to make it.

I am using ASP.Net Controls like (TextBox, Drop down List) in my UserControl Page and all are make invisible for this i am using (Edit ). There is a Link Button for Edit in the same page. I want to make it visible at clientside. can any one suggest how should i do. or any other way to make it.

• c#
• javascript
• asp
• ajax

• Typically the edit button will cause a postback where you can then set the other controls Visible = True – Prescott Commented Jan 4, 2012 at 6:24
• Thanx, Yes It is postbacking. So that i need some thing client side which will not postback. and I have more than 20 controls which will be editable separately. So I need a client side function to apply onClick event. is there any way??? – Santosh Sahu Commented Jan 4, 2012 at 6:26
• Have you tried to use AJAX functionality? Enclosing your controls into an UpdatePanel can help you turn your edit button to do a client-side call instead of the usual postback. – CedX Commented Jan 4, 2012 at 7:18
• you will need to reconstruct your page all over again to make it able to work all base on Ajax Calls and client side things thats for clean way for your work but for your issue i think if there is a way for what you want it will be painful and have many deffects :) – Marwan Commented Jan 4, 2012 at 9:46

1 Answer 1

To do this with Javascript you'll want to remove the OnClick attribute of the LinkButton and use the OnClientClick attribute to call a Javascript function instead:

<asp:LinkButton ID="lb_link_button" runat="server" Text="Click Me" OnClientClick="return ToggleShowHide()"/>

Here's a corresponding Javascript function to show/hide a control named my_control using its style.display property:

<script type="text/javascript">        
    function ToggleShowHide() {
        var control = document.getElementById("<%= my_control.ClientID %>");
        if (control.style.display == "none") { control.style.display = "block"; }
        else { control.style.display = "none"; }
        return false;
    }
</script>

You can reference the control(s) to show/hide in various ways, this is just a simple example.

Note, the control(s) to set visible/invisible must not have their Visible property set as false, instead they should be declared with a display:none; style as follows:

<asp:Control runat="server" ID="my_control" Visible="true" style="display:none;"/>