OnClick vs OnClientClick dla asp: CheckBox?

83

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 ...)

Stobor
źródło

Odpowiedzi:

106

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.

Rozwiązanie Yogi
źródło
Dobra decyzja. Właśnie sprawdziłem wygenerowany html, i to faktycznie oddanie atrybuty nie rozumieją do rozpiętości wokół wejścia checkbox, ale poza tym masz rację ...
Stobor
To kolejna rzecz, nie podoba mi się fakt, że pole wyboru asp: niepotrzebnie renderuje dodatkowy zakres.
Rozwiązanie
1
Cóż, niektóre z nich. Umieszcza onclick w samym wejściu, ale onClientClick w zakresie. Dziwne!
Stobor,
Łał. Minęło trochę czasu, odkąd korzystałem z kontrolek internetowych, więc moja pamięć gaśnie. Wolę używać kontrolek HTML, ponieważ chcę kontrolować wygląd renderowanego kodu HTML.
Rozwiązanie
2
Ta dokumentacja faktycznie pochodzi z .Net 1.1. O ile wiem, ASP .Net nie ma zdarzenia OnClick po stronie serwera dla CheckBox, więc kiedy piszesz OnClick lub OnClientClick, ponieważ o tym nie wie, renderuje dokładnie to, co napisałeś, ponieważ jest to jego domyślne zachowanie ( jeśli się nie mylę)
Sergio Rosas
9

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ć.

datacop
źródło
6

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

Serj Sagan
źródło
1
To jest zdarzenie po stronie serwera, a nie zdarzenie po stronie klienta; który nie istnieje.
Protector pierwszy
1

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.

BrianK
źródło
Ciekawe ... To był projekt, który przejąłem przez jakiś czas i miał zbyt wiele ostrzeżeń, aby zobaczyć tam cokolwiek przydatnego ... Jeśli dobrze pamiętam, wadą korzystania z kontrolki HTML jest to, że nie możesz zrobić serwera
poboczne
1

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
Ярослав Белобородов
źródło
0

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)
  }
Alan Simpson
źródło
0

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();
    }
}
bestinamir
źródło
-2

Jednym z rozwiązań jest JQuery:

$(document).ready(
    function () {
        $('#mycheckboxId').click(function () {
               // here the action or function to call
        });
    }
);
Philippe
źródło
Brak funkcji Seconf}
Mahdi jokar