Bootstrap-Switch feuert nicht checkedchanged auf asp.net Checkbox

Ich benutze zwei asp.net ckeckboxen (chk1, und chk2) in einem Web Forms-Projekt mit MasterPage, und ich möchte, wenn ich über chk1, die chk2 wird deaktiviert und umgekehrt, ohne die gesamte Seite zu aktualisieren, also verwende ich updatepanel, um dies zu erreichen, ich implementiere nur das CheckedChanged-Ereignis auf dem chk1 und setze sein AutoPostBack-Attribut auf "true", und alles ist in Ordnung.Bootstrap-Switch feuert nicht checkedchanged auf asp.net Checkbox

Das Problem ist, wenn ich versuche, das Bootstrap-Switch-Plugin zu implementieren (die beiden Kontrollkästchen scheint wie Bootstrap-Schalter perfekt), aber das Problem ist, dass, wenn ich auf die chk1, dann die CheckedChanged wird nicht ausgelöst, so die Die Eigenschaft enable des chk2 ist nicht betroffen.

Ich denke, das Problem ist, wenn der Benutzer auf die chk1 klickt, in der Tat der Klick passiert über die span's Elemente der Bootstrap-Switch anstelle der chk1 selbst.

Bitte helfen Sie, Entschuldigung für das Englisch.

Update 1:

Dies ist der Quellcode der Seite, wenn es (Rechtsklick auf den Browser) ausgeführt wird, so dass Sie die Bootstrap-Schalter Bibliotheken benötigt sehen vorhanden sind:

<html lang="es"> 
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title> 
    - Mi aplicación ASP.NET 
</title><script src="/Scripts/modernizr-2.6.2.js"></script> 
<link href="/Content/bootstrap.css" rel="stylesheet"/> 
<link href="/Content/Site.css" rel="stylesheet"/> 
<link href="/Content/bootstrap-switch/bootstrap3/bootstrap-switch.css" rel="stylesheet"/> 
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /></head> 
<body> 
    <form method="post" action="./Test" id="ctl01"> 
<div class="aspNetHidden"> 
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> 
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> 
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" /> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="h5sbkKDqDt9VeL5xnED+gV4kWiRKNFZBx2sOsl8K60EaOVXCuj7iQZJ3QAjjzsLsrj7CnOY8SUD81Mv51jUBYfWpQL0EHuQO3uPa8Yczm/eLjURJjkDTB57Iw5RJUitxpbKigIF0l4NevEGllIgA8hU3zjrDgSCrPtUA3qs7CJO+/ukopmdmKjOkgTjjWniVywgiMskpJEGPl3fzldVSaqkj8Ikbh+OElJUyureaFxNDS7bLq90ZhlVeNNZxorYyvtaj1HxMgniGxdfx0eClL+RD3ksd+mO6kkzV8mSXx+ykvf+A3Z2gcV0wjAcfpc09oxBF8vvsEtwBbJ+WbDlZLnGqn5W7GAFmmqD2l3e8AAFO6Sh0++Ivr057G/pw+FyebisB2dEOZeb2KZbNxL9/imrP/bBFcKrcyPeGiRUaXtjd7VPTXnD8Vox3T97yjv4P" /> 
</div> 

<script type="text/javascript"> 
//<![CDATA[ 
var theForm = document.forms['ctl01']; 
if (!theForm) { 
    theForm = document.ctl01; 
} 
function __doPostBack(eventTarget, eventArgument) { 
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) { 
     theForm.__EVENTTARGET.value = eventTarget; 
     theForm.__EVENTARGUMENT.value = eventArgument; 
     theForm.submit(); 
    } 
} 
//]]> 
</script> 



<script src="/bundles/MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81" type="text/javascript"></script> 
<script type="text/javascript"> 
//<![CDATA[ 
if (typeof(Sys) === 'undefined') throw new Error('Error al cargar el marco de trabajo de cliente ASP.NET Ajax.'); 
//]]> 
</script> 

<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script> 
<script src="Scripts/bootstrap.js" type="text/javascript"></script> 
<script src="Scripts/respond.js" type="text/javascript"></script> 
<script src="/bundles/WebFormsJs?v=AAyiAYwMfvmwjNSBfIMrBAqfU5exDukMVhrRuZ-PDU01" type="text/javascript"></script> 
<script src="Scripts/bootstrap-switch.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
//<![CDATA[ 
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl09', 'ctl01', ['tctl00$MainContent$UpdatePanel1','MainContent_UpdatePanel1'], ['ctl00$MainContent$chk1','MainContent_chk1'], [], 90, 'ctl00'); 
//]]> 
</script> 


     <div class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a href="./" class="navbar-brand">Nombre de la aplicación</a> 
       </div> 
       <div class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav"> 
         <li><a href="./">Inicio</a></li> 
         <li><a href="About">Acerca de</a></li> 
         <li><a href="Contact">Contacto</a></li> 
        </ul> 

          <ul class="nav navbar-nav navbar-right"> 
           <li><a href="Account/Register">Registrarse</a></li> 
           <li><a href="Account/Login">Iniciar sesión</a></li> 
          </ul> 

       </div> 
      </div> 
     </div> 
     <div class="container body-content"> 


    <div class="col-sm-2"> 
     <input id="MainContent_chk1" type="checkbox" name="ctl00$MainContent$chk1" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$MainContent$chk1\&#39;,\&#39;\&#39;)&#39;, 0)" class="BSswitch" data-size="mini" data-on-text="Si" data-off-text="No" /><label for="MainContent_chk1">Check 1</label> 
    </div> 
    <div id="MainContent_UpdatePanel1"> 

      <input id="MainContent_chk2" type="checkbox" name="ctl00$MainContent$chk2" /><label for="MainContent_chk2">Check 2</label> 

</div> 




      <hr /> 
      <footer> 
       <p>&copy; 2016 - Mi aplicación ASP.NET</p> 
      </footer> 
     </div> 

<div class="aspNetHidden"> 

    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="75BBA7D6" /> 
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="3l2FbHNq3NkXeXDBNuO5RZ4xOmC254tC8PhZRAdihltuEWASclMPM3jqhsB2rrjNHLrlioMYf4cBMhfvlMRCUVMkZXg6Bmvc06rKj2GCmkK97sprq9puXxVbM2rKg+DDwC9aG2lPJIcCLM1viuOkLw==" /> 
</div></form> 
    <script> 
     $("[class='BSswitch']").bootstrapSwitch(); 
    </script> 

<!-- Visual Studio Browser Link --> 
<script type="application/json" id="__browserLink_initializationData"> 
    {"appName":"Internet Explorer","requestId":"41bd03d14e3342bebd4c2f830342b157"} 
</script> 
<script type="text/javascript" src="http://localhost:30137/825094549df74919a4a0dc141549d775/browserLink" async="async"></script> 
<!-- End Browser Link --> 

</body> 
</html>

Und jetzt ist dies die Test.aspx Datei:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="TestBSswitch.Test" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> 

    <div class="col-sm-2"> 
     <asp:CheckBox ID="chk1" AutoPostBack="true" Text="Check 1" OnCheckedChanged="chk1_CheckedChanged" runat="server" /> 
    </div> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <ContentTemplate> 
      <asp:CheckBox ID="chk2" Text="Check 2" runat="server" /> 
     </ContentTemplate> 
     <Triggers> 
      <asp:AsyncPostBackTrigger ControlID="chk1" /> 
     </Triggers> 
    </asp:UpdatePanel> 



</asp:Content>

Und jetzt ist dies die Test.aspx.cs Datei:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 

namespace TestBSswitch 
{ 
    public partial class Test : System.Web.UI.Page 
    { 
     protected void Page_Load(object sender, EventArgs e) 
     { 
      chk1.InputAttributes.Add("class", "BSswitch"); 
      chk1.InputAttributes.Add("data-size", "mini"); 
      chk1.InputAttributes.Add("data-on-text", "Si"); 
      chk1.InputAttributes.Add("data-off-text", "No"); 

      chk2.InputAttributes.Add("class", "BSswitch"); 
      chk2.InputAttributes.Add("data-size", "mini"); 
      chk2.InputAttributes.Add("data-on-text", "Si"); 
      chk2.InputAttributes.Add("data-off-text", "No"); 
     } 

     protected void chk1_CheckedChanged(object sender, EventArgs e) 
     { 
      if (chk1.Checked) 
      { 
       chk2.Enabled = false; 
      } 
      else 
      { 
       chk2.Enabled = true; 
      } 
     } 
    } 
}

In der letzten Datei, die ich geschrieben habe: „Test.aspx.cs“, in dem Ereignis Page Load muss ich hinzufügen, dass manuell die Attribute "chk1", um den "switch" -Effekt zu erhalten, denn wenn ich diese Attribute ("data-size", "data-on-text", "data-off-text" und "class") in das aspx setze Editor dann funktioniert es nicht zur Laufzeit, und wenn ich diese Codezeilen lösche, funktioniert CheckedChanged, aber der Stil des Switches funktioniert nicht.

Ich hoffe, ich habe mich näher erklären, jede Frage bitte mich fragen.

Quelle

2016-07-22 JoseA

Bitte geben Sie Ihren Code, so können wir sicherstellen, dass Sie nicht machen ein Tippfehler oder implementieren Sie eine Methode falsch. – Polyov

Jemand Hilfe, bitte :) – JoseA

Ich musste nur eine ähnliche Situation herausfinden. Da Bootstrap-Schalter, um das CheckedChanged Ereignis von Feuern verhindert, würde ich anstelle von Bootstrap-Schalter versehen mit Jquery und der switchChange Veranstaltung empfehlen, etwa so:

$('#<%= chk1.ClientID%>').on('switchChange.bootstrapSwitch', function (event, state) { 
    if (state) { //if chk1's switch is set to true 
     $('#<%= chk2.ClientID%>').bootstrapSwitch('disabled', true); 
    } 
    else { 
     $('#<%= chk2.ClientID%>').bootstrapSwitch('disabled', false); 
    } 
});

Quelle

2016-08-04 16:25:23 Schwell

Hallo @Shwell, vielen Dank für Ihre Hilfe, das ist eine gute Lösung in diesem Fall, und in der Tat habe ich es verwenden, aber was ist, wenn ich einige Daten in meiner Datenbank speichern muss wenn der Benutzer das Kontrollkästchen aktiviert, nehme ich an, dass das nicht möglich ist, oder? – JoseA

@JoseA, Verwenden Sie irgendeine Art von Senden-Schaltfläche, um die Formulardaten zu senden, oder sind es nur die Kontrollkästchen? – Schwell

Bootstrap-Switch feuert nicht checkedchanged auf asp.net Checkbox

Antwort

Verwandte Themen