我在一个带有MasterPage的Web Forms项目中使用了两个asp.net复选框(chk1和chk2),当我单击chk1时,我希望chk2变为禁用状态,反之亦然,而不刷新整个页面,因此我使用updatepanel来实现这一点,我只需在chk1上实现CheckedChanged事件并将其AutoPostBack属性设置为“true”,一切都很好。
问题是当我尝试实现bootstrap-switch插件(两个复选框看起来完全像bootstrap-switch)时,问题就出现了,但问题是当我单击chk1时,CheckedChanged事件没有触发,因此chk2的启用属性未受到影响。
我认为问题是当用户单击chk1时,实际上是单击了bootstrap-switch的span元素,而不是chk1本身。
请帮忙解决,抱歉我的英语。
更新1:
这是页面运行时的源代码(右键单击浏览器),因此您可以看到需要的bootstrap-switch库已经存在。
在我最后发布的文件“Test.aspx.cs”中,在Page_Load事件中,我必须手动向“chk1”添加这些属性以获得“开关”效果,因为如果我在aspx编辑器中放置这些属性(“data-size”,“data-on-text”,“data-off-text”和“class”),则在运行时它不起作用,如果我删除那些代码行,则CheckedChanged起作用,但是开关的样式不起作用。希望我已经更详细地解释了情况,如有问题请问我。
问题是当我尝试实现bootstrap-switch插件(两个复选框看起来完全像bootstrap-switch)时,问题就出现了,但问题是当我单击chk1时,CheckedChanged事件没有触发,因此chk2的启用属性未受到影响。
我认为问题是当用户单击chk1时,实际上是单击了bootstrap-switch的span元素,而不是chk1本身。
请帮忙解决,抱歉我的英语。
更新1:
这是页面运行时的源代码(右键单击浏览器),因此您可以看到需要的bootstrap-switch库已经存在。
<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"></script>
<script src="/bundles/MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81" type="text/javascript"></script>
<script type="text/javascript"></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"></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('__doPostBack(\'ctl00$MainContent$chk1\',\'\')', 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>© 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>
现在这是Test.aspx文件:
<%@ 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>
现在这是Test.aspx.cs文件:
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;
}
}
}
}
在我最后发布的文件“Test.aspx.cs”中,在Page_Load事件中,我必须手动向“chk1”添加这些属性以获得“开关”效果,因为如果我在aspx编辑器中放置这些属性(“data-size”,“data-on-text”,“data-off-text”和“class”),则在运行时它不起作用,如果我删除那些代码行,则CheckedChanged起作用,但是开关的样式不起作用。希望我已经更详细地解释了情况,如有问题请问我。