OnClick vs OnClientClick для asp: CheckBox?

Ответ 1

Это очень странно. Я проверил страницу документации CheckBox, которая гласит

<asp:CheckBox id="CheckBox1" 
     AutoPostBack="True|False"
     Text="Label"
     TextAlign="Right|Left"
     Checked="True|False"
     OnCheckedChanged="OnCheckedChangedMethod"
     runat="server"/>

Как вы можете видеть, не определены атрибуты OnClick или OnClientClick.

Помня об этом, я думаю, что это то, что происходит.

Когда вы это сделаете,

<asp:CheckBox runat="server" OnClick="alert(this.checked);" />

ASP.NET не изменяет атрибут OnClick и отображает его как есть в браузере. Он будет отображаться как:

  <input type="checkbox" OnClick="alert(this.checked);" />

Очевидно, браузер может понять "OnClick" и ставит предупреждение.

И в этом случае

<asp:CheckBox runat="server" OnClientClick="alert(this.checked);" />

Опять же, ASP.NET не изменит атрибут OnClientClick и отобразит его как

<input type="checkbox" OnClientClick="alert(this.checked);" />

Поскольку браузер не поймет OnClientClick, ничего не произойдет. Он также не будет вызывать никаких ошибок, поскольку это просто еще один атрибут.

Вы можете подтвердить это, посмотрев на визуализированный HTML.

И да, это совсем не интуитивно.

Ответ 2

Поскольку они представляют собой два разных типа элементов управления...

Вы видите, ваш веб-браузер не знает о программировании на стороне сервера. он знает только об этом собственном DOM и моделях событий, которые он использует... И для событий щелчка объектов, переданных ему. Вы должны изучить окончательную разметку, которая фактически отправляется в браузер из ASP.Net, чтобы увидеть различия в себе.

<asp:CheckBox runat="server" OnClick="alert(this.checked);" />

отображает

<input type="check" OnClick="alert(this.checked);" />

и

<asp:CheckBox runat="server" OnClientClick="alert(this.checked);" />

отображает

<input type="check" OnClientClick="alert(this.checked);" />

Теперь, насколько я могу вспомнить, нет ни одного браузера в любом месте, поддерживающего событие OnClientClick в DOM...

Если вы сомневаетесь, всегда просматривайте источник вывода, когда он отправляется в браузер... есть целый мир отладочной информации, которую вы можете видеть.

Ответ 3

Вы правы, это непоследовательно. Что происходит, так это то, что CheckBox не имеет серверного OnClick-события, поэтому ваша разметка отображается в браузере. http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox_events.aspx

В то время как Button имеет OnClick - поэтому ASP.NET ожидает ссылку на событие в вашей разметке OnClick.

Ответ 4

Для тех из вас, кто пришел сюда, ищет обработчик OnClick на стороне сервера, это OnCheckedChanged

Ответ 5

Я очищал предупреждения и сообщения и видел, что VS предупреждает об этом: Проверка (ASP.Net): атрибут "OnClick" не является допустимым атрибутом элемента "CheckBox". Используйте элемент управления html для указания обработчика на стороне клиента, а затем вы не получите дополнительный тег span и два элемента.

Ответ 6

Вы можете сделать тег, как это:

<asp:CheckBox runat="server" ID="ckRouteNow" Text="Send Now" OnClick="checkchanged(this)" />

Свойство.checked в вызываемом JavaScript будет правильным... текущее состояние флажка:

  function checkchanged(obj) {
      alert(obj.checked)
  }

Ответ 7

Asp.net CheckBox не поддерживает метод OnClientClick.
Если вы хотите добавить какое-либо событие javascript в asp: CheckBox, вы должны добавить связанные атрибуты для событий "Pre_Render" или "Page_Load" в коде сервера:

С#:

    private void Page_Load(object sender, EventArgs e)
    {
        SomeCheckBoxId.Attributes["onclick"] = "MyJavaScriptMethod(this);";
    }

Примечание. Убедитесь, что вы не установили AutoEventWireup = "false" в заголовке страницы.

VB:

    Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load
        SomeCheckBoxId.Attributes("onclick") = "MyJavaScriptMethod(this);"
    End Sub

Ответ 8

Одно из решений: JQuery:

$(document).ready(
    function () {
        $('#mycheckboxId').click(function () {
               // here the action or function to call
        });
    }
);