Question

i’m really sorry if this question have been asked before but I couldn’t find it.

Working on a ASP.NET/C# web application.

i am creating a label in the code behind and adding it to the page (all coded in the code behind and not in design page)

Now I have a check-box I want to change the visibility of the label depending if the checkbox is checked (show) or if not (hide).

I tried to use an update panel. But since the label is generated in code I have to generate it again everytime there is a partial postback. and I don’t want that.

Is there a way to do this with javascript to avoid post-backs? other solutions are also appreciated.

Thank you very much for any help

Answer 1

You are on the right track. You can avoid the overhead and complexity of using UpdatePanel controls and an AJAX call by using client-side script to do this instead.

You’ll want to define a JavaScript function to fire for the onClick event of the checkbox on your web page:

<input type="checkbox" onclick="checkboxChanged(this);" />

I’ll assume you’re adding a label with ID “lbl” to the page from your code-behind. Make sure you make the label a Protected member of the Page class so you can access it from the aspx page using a server tag to retrieve the correct ID for when you call document.getElementById in JavaScript. This is important.

Partial Class MyPage
  Inherits System.Web.UI.Page
  Protected lbl As Label

  Private Sub Page_Load(sender As Object, e As EventArgs)

    If Not Page.IsPostback Then

      lbl = New Label()
      lbl.ID = "lbl"
      Me.Controls.Add(lbl)

    End If

  End Sub

End Class

So here’s what your JavaScript code on your aspx page will look like:

function checkboxChanged(checkbox) {
  if (checkbox.checked) {
    document.getElementById("<%=Me.lbl.ClientID %>").style.display = 'inline';
  } else {
    document.getElementById("<%=Me.lbl.ClientID %>").style.display = 'none';
  }
}