JavaScript to Hide and Show ASP.NET Control

This blog talks about how to hide / show an ASP.NET control using JavaScript. Let the ASP.NET control ID is myControl and it is hidden on Button click with ID myButton.

1. Write the following JavaSript .aspx page–> Head –> Script to hide and show the ASP.NET control named myControl.

function Show() {
            document.getElementById("<%= myControl.ClientID %>").style.display = "";
}

function Hide() {
            document.getElementById("<%= myControl.ClientID %>").style.display = "none";
}

2. Say we hide the control on a Button click. Add the following code in the .aspx page.

protected void Page_Load(object sender, EventArgs e)
    {
        this.myButton.Attributes.Add("onclick", "Hide()");
    }

3. In case the control is invisible when the page first loads, use the following.

protected void Page_Load(object sender, EventArgs e)
    {
        this.myButton.Attributes.Add("onclick", "Show()");
        this.myControl.Style.Add("display", "none");
    }

Advertisement