Изменить видимость объекта с помощью JavaScript с помощью флажка? - PullRequest
Новая
       20

Изменить видимость объекта с помощью JavaScript с помощью флажка?

3 голосов
/ 14 октября 2011

Мне очень жаль, если этот вопрос уже задавался, но я не смог его найти.

Работа над веб-приложением ASP.NET/C#.

Я создаюпометьте код и добавьте его на страницу (все закодировано в коде, а не на странице дизайна)

Теперь у меня есть флажок. Я хочу изменить видимость ярлыка в зависимости от того, установлен ли флажокотмечен (показать) или, если нет (скрыть).

Я пытался использовать панель обновления.Но поскольку метка генерируется в коде, я должен генерировать ее снова каждый раз, когда происходит частичная обратная передача.и я не хочу этого.

Есть ли способ сделать это с помощью JavaScript, чтобы избежать постбэков?Другие решения также приветствуются.

Большое спасибо за любую помощь

Ответы [ 4 ]

5 голосов
/ 14 октября 2011

Поместите этот код на страницу Загрузить. 

if (!Page.IsPostBack) {
    Label lbl = new Label();
    lbl.ID = "lbl";
    lbl.Text = "Test";
    this.Controls.Add(lbl);

Добавьте ссылку на javascript jQuery и поместите ее как HTML ниже. 

<asp:CheckBox runat="server" ID="chk" />
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#chk").change(function () {
            if (this.checked)
                $("#lbl").hide();
            else
                $("#lbl").show();
        });
    });
</script>

Попробуйте использовать AJAX (jQuery)в случае, если вам нужно создать динамические элементы управления.

3 голосов
/ 14 октября 2011

Вы на правильном пути.Вы можете избежать накладных расходов и усложнить использование элементов управления UpdatePanel и вызова AJAX, используя вместо этого сценарий на стороне клиента.

Вы захотите определить функцию JavaScript для запуска события onClick флажкана вашей веб-странице: 

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

Я предполагаю, что вы добавляете ярлык с идентификатором "lbl" на страницу из своего кода.Убедитесь, что вы сделали метку Защищенным членом класса Page, чтобы вы могли получить к ней доступ со страницы aspx с помощью тега сервера, чтобы получить правильный идентификатор при вызове document.getElementById в JavaScript.Это важно. 

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

Вот как будет выглядеть ваш код JavaScript на странице aspx: 

function checkboxChanged(checkbox) {
  if (checkbox.checked) {
    document.getElementById("<%=Me.lbl.ClientID %>").style.display = 'inline';
  } else {
    document.getElementById("<%=Me.lbl.ClientID %>").style.display = 'none';
  }
}
1 голос
/ 14 октября 2011 
<asp:CheckBox ID="CheckBox1" onclick='$("span[id$=lblToHide]").toggle();' runat="server" Text="Bla" AutoPostBack="false" />   

if (!Page.IsPostBack) {
    Label lbl = new Label();
    lbl.ID = "lblToHide";       
    lbl.Text = "I am visible";
    lbl.Attributes.Add("style", "display:none"); //hide at first
    this.Controls.Add(lbl); //or however you are adding it
}
0 голосов
/ 14 октября 2011

Почему вы не хотите загружать элемент управления меткой при каждой обратной передаче? В ASP.NET вся страница загружается с КАЖДОЙ обратной передачей, а состояние просмотра перезагружается в элемент управления. Затем на странице init событие может каждый раз создавать элемент управления label, и его свойство visiblestate visible в этом случае будет сохраняться между обратными передачами.

...