OnClick против OnClientClick для asp: CheckBox?


83

Кто-нибудь знает, почему обработчик javascript на стороне клиента для asp: CheckBox должен быть атрибутом OnClick = "", а не атрибутом OnClientClick = "", как для asp: Button?

Например, это работает:

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

и это не так (без ошибки):

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

но это работает:

<asp:Button runat="server" OnClientClick="alert('Hi');" />

и этого не происходит (ошибка времени компиляции):

<asp:Button runat="server" OnClick="alert('hi');" />

(Я знаю, для чего нужен Button.OnClick; мне интересно, почему CheckBox не работает так же ...)

Ответы:


106

Это очень странно. Я проверил страницу документации 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-код.

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


Хороший звонок. Я только что проверил сгенерированный html, и он фактически помещает атрибуты, которые он не понимает, в диапазон вокруг ввода флажка, но в остальном вы правы ...
Стобор

Это еще одна вещь, мне не нравится, что asp: checkbox без надобности отображает дополнительный диапазон.
SolutionYogi

1
Ну некоторые из них. Он помещает onclick в сам вход, но onClientClick в диапазон. Странно!
Stobor

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

2
Эта документация фактически взята из .Net 1.1. Насколько мне известно, ASP .Net не имеет серверного события OnClick для CheckBox, поэтому, когда вы пишете OnClick или OnClientClick, поскольку он этого не знает, он отображает именно то, что вы написали, так как это его поведение по умолчанию ( если не ошибаюсь)
Серхио Росас

9

Потому что это два разных типа контроля ...

Видите ли, ваш веб-браузер не знает о программировании на стороне сервера. он знает только о своей собственной 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 ...

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


8

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

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


6

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


1
Это событие на стороне сервера, а не на стороне клиента; которого не существует.
Protector one

1

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


Интересно ... Это был проект, которым я некоторое время занимался, и у него было слишком много предупреждений, чтобы увидеть что-то полезное ... Если я правильно помню, обратная сторона использования элемента управления HTML заключается в том, что вы не можете выполнять сервер - боковые манипуляции с ним ...
Стобор 03

1

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

C #:

    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

0

Сделать тег можно так:

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

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

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

-2

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

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

Функция Seconf} отсутствует
Mahdi jokar
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.