OnClick vs OnClientClick dla asp: CheckBox?

Czy ktoś wie, dlaczego program obsługi javascript po stronie klienta dla asp: CheckBox musi być atrybutem OnClick = "", a nie atrybutem OnClientClick = "", jak w przypadku asp: Button?

Na przykład to działa:

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

a to nie (brak błędu):

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

ale to działa:

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

i to nie (błąd czasu kompilacji):

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

(Wiem do czego służy Button.OnClick; zastanawiam się, dlaczego CheckBox nie działa w ten sam sposób ...)

To bardzo dziwne. Sprawdziłem stronę dokumentacji CheckBox, która czyta

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

Jak widać, nie ma zdefiniowanych atrybutów OnClick ani OnClientClick.

Mając to na uwadze, myślę, że tak właśnie się dzieje.

Kiedy to robisz,

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

ASP.NET nie modyfikuje atrybutu OnClick i renderuje go tak, jak jest w przeglądarce. Byłoby renderowane jako:

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

Oczywiście przeglądarka może zrozumieć „OnClick” i umieszcza alert.

I w tym scenariuszu

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

Ponownie ASP.NET nie zmieni atrybutu OnClientClick i wyrenderuje go jako plik

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

Ponieważ przeglądarka nie zrozumie OnClientClick, nic się nie stanie. Nie spowoduje to również żadnego błędu, ponieważ jest to tylko kolejny atrybut.

Możesz to potwierdzić, patrząc na wyrenderowany kod HTML.

I tak, to wcale nie jest intuicyjne.

Ponieważ są to dwa różne rodzaje kontroli ...

Widzisz, twoja przeglądarka internetowa nie wie o programowaniu po stronie serwera. wie tylko o swoim własnym modelu DOM i modelach zdarzeń, z których korzysta ... Oraz o zdarzeniach związanych z kliknięciami renderowanych obiektów. Powinieneś sprawdzić ostateczny znacznik, który jest faktycznie wysyłany do przeglądarki z ASP.Net, aby zobaczyć różnice.

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

renderuje do

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

i

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

renderuje do

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

Teraz, o ile pamiętam, nigdzie nie ma przeglądarek obsługujących zdarzenie „OnClientClick” w ich DOM ...

W razie wątpliwości zawsze wyświetlaj źródło danych wyjściowych w postaci, w jakiej są wysyłane do przeglądarki ... jest cały świat informacji debugowania, które możesz zobaczyć.

Masz rację, to jest niespójne. Dzieje się tak, że CheckBox nie ma zdarzenia OnClick po stronie serwera, więc Twoje znaczniki są renderowane w przeglądarce. http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox_events.aspx

Podczas gdy Button ma OnClick - więc ASP.NET oczekuje odwołania do zdarzenia w znaczniku OnClick.

Dla tych z Was, którzy tu przyjechali, szukają programu obsługi po stronie serwera OnClickOnCheckedChanged

Po wyczyszczeniu ostrzeżeń i komunikatów zobaczyłem, że VS ostrzega o tym: Walidacja (ASP.Net): Atrybut „OnClick” nie jest prawidłowym atrybutem elementu „CheckBox”. Użyj kontrolki wejściowej html, aby określić procedurę obsługi po stronie klienta, a wtedy nie otrzymasz dodatkowego tagu span i dwóch elementów.

Asp.net CheckBox nie obsługuje metody OnClientClick.
Jeśli chcesz dodać jakieś zdarzenie javascript do asp: CheckBox, musisz dodać powiązane atrybuty na zdarzeniach „Pre_Render” lub „Page_Load” w kodzie serwera:

DO#:

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

Uwaga: upewnij się, że nie ustawiłeś AutoEventWireup = "false" w nagłówku strony.

VB:

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

Możesz zrobić tag w ten sposób:

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

Właściwość .checked w wywołanym JavaScript będzie poprawna ... aktualny stan pola wyboru:

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

Możesz przypisać funkcję do wszystkich pól wyboru, a następnie poprosić o potwierdzenie w środku. Jeśli wybiorą tak, pole wyboru można zmienić, jeśli nie, pozostaje niezmienione.

W moim przypadku używam również pola wyboru ASP .Net wewnątrz repeatera (lub siatki) z atrybutem Autopostback = "True", więc po stronie serwera muszę porównać wartość przesłaną z tym, co jest obecnie w bazie danych, aby wiedzieć, jaką wartość potwierdzają wybiera i aktualizuje bazę danych tylko wtedy, gdy było „tak”.

$(document).ready(function () {
    $('input[type=checkbox]').click(function(){                
        var areYouSure = confirm('Are you sure you want make this change?');
        if (areYouSure) {
            $(this).prop('checked', this.checked);
        } else {
            $(this).prop('checked', !this.checked);
        }
    });
}); 


<asp:CheckBox ID="chk" AutoPostBack="true" onCheckedChanged="chk_SelectedIndexChanged" runat="server" Checked='<%#Eval("FinancialAid") %>' />

protected void chk_SelectedIndexChanged(Object sender, EventArgs e)
{
    using (myDataContext db = new myDataDataContext())
    {
        CheckBox chk = (CheckBox)sender;
        RepeaterItem row = (RepeaterItem) chk.NamingContainer;            
        var studentID = ((Label) row.FindControl("lblID")).Text;
        var z = (from b in db.StudentApplicants
        where b.StudentID == studentID
        select b).FirstOrDefault();                
        if(chk != null && chk.Checked != z.FinancialAid){
            z.FinancialAid = chk.Checked;                
            z.ModifiedDate = DateTime.Now;
            db.SubmitChanges();
            BindGrid();
        }
        gvData.DataBind();
    }
}

Jednym z rozwiązań jest JQuery:

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