使用Bootstrap 3使ASP单选按钮显示为切换按钮 [英] Asp radio buttons using bootstrap 3 to make them appear as toggle buttons
问题描述
我有4个单选按钮，它们希望像切换按钮一样显示，但仍然可以用作单选按钮.主要是，我需要在单击按钮时触发CheckedChanged事件.目前，这是我拥有的HTML:
I have 4 asp radio buttons that I want to appear like toggle buttons, but still function as asp radio buttons. Mainly, I need the CheckedChanged event to fire when the button is clicked. Currently, this is what I have for the HTML:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-10 btn-group colors" data-toggle="buttons">
<div class="row">
<div id="tbl_rdo_ach" runat="server" class="col-xs-2">
<label class="btn btn-primary">
ACH/E-Check
<asp:RadioButton ID="rdo_ach" runat="server" Font-Bold="True" GroupName="rdo_pay_type"
AutoPostBack="True" Text="ACH/E-Check" CssClass="radioButton"></asp:RadioButton>
</label>
</div>
<div id="tbl_rdo_cc" runat="server" class="col-xs-2">
<label class="btn btn-primary">
Debit/Credit Card
<asp:RadioButton ID="rdo_cc" runat="server" Font-Bold="True" GroupName="rdo_pay_type"
AutoPostBack="True" Text="Debit/Credit Card" CssClass="radioButton"></asp:RadioButton>
</label>
</div>
<div id="tbl_rdo_ck" runat="server" class="col-xs-2">
<label class="btn btn-primary">
Check
<asp:RadioButton ID="rdo_ck" runat="server" Font-Bold="True" GroupName="rdo_pay_type"
AutoPostBack="True" Text="Check"></asp:RadioButton>
</label>
</div>
<div id="tbl_rdo_et" runat="server" class="col-xs-2">
<label class="btn btn-primary">
EFT
<asp:RadioButton ID="rdo_et" Font-Bold="True" GroupName="rdo_pay_type" AutoPostBack="True"
Text="EFT Deposit" runat="server"></asp:RadioButton>
</label>
</div>
</div>
</div>radioButton CSS类:
The radioButton CSS class:
<style type="text/css">
.radioButton {
display:none;
}
</style>
我当前遇到的问题是当我在asp:RadioButtons上没有radioButton css类时，单选按钮显示在按钮组中，并且您必须专门单击单选按钮才能触发CheckedChanged事件.当我在单选按钮上确实有课程时，单选按钮不会在按钮组中显示，但是当我单击该按钮时，根本不会触发CheckedChanged事件.
The issue I am currently having is when I do not have the radioButton css class on the asp:RadioButtons, the radio button shows through the button group and you have to click specifically within the radio to get the CheckedChanged event to fire. When I do have the class on the radio buttons, the radio button does not display through the button group, but when I click the button, the CheckedChanged event won't fire at all.
我还尝试使用asp:Button而不是asp:RadioButton，然后设置必要的checked属性，以使后面的代码正常运行，但是由于母版页上的更新面板，我无法获得完整的回传到跑步.
I also attempted using asp:Button instead of asp:RadioButton and then setting the necessary checked property so that the code behind runs properly, but due to the update panel on the master page, I can't get a full postback to run.
是否有任何方法可以显示按钮组，但是单击其中一个按钮时要进行完整的回发?
Is there any way to get a button group to display, but have a full postback run when one of the buttons is clicked?
推荐答案
我知道了.问题是处理切换按钮的javascript不允许触发回发.由于我不想更改所有切换按钮的功能，因此将 data-toggle ="buttons" 更改为 data-toggle ="buttons-postback" 并进行了修改bootstrap.js中的Button.prototype.toggle函数为此:
I figured it out. The issue is the javascript that handles the toggle buttons doesn't allow the postback to fire. Since I didn't want to change the functionality of all toggle buttons, I changed data-toggle="buttons" to data-toggle="buttons-postback" and modified the Button.prototype.toggle function in bootstrap.js to this:
Button.prototype.toggle = function () {
var changed = true
var $parent = this.$element.closest('[data-toggle="buttons"]')
if ($parent.length) {
var $input = this.$element.find('input')
if ($input.prop('type') == 'radio') {
if ($input.prop('checked')) changed = false
$parent.find('.active').removeClass('active')
this.$element.addClass('active')
} else if ($input.prop('type') == 'checkbox') {
if (($input.prop('checked')) !== this.$element.hasClass('active')) changed = false
this.$element.toggleClass('active')
}
$input.prop('checked', this.$element.hasClass('active'))
if (changed) $input.trigger('change')
} else {
var $parent = this.$element.closest('[data-toggle="buttons-postback"]')
if ($parent.length) {
var $input = this.$element.find('input')
if ($input.prop('type') == 'radio') {
if ($input.prop('checked')) changed = false
$parent.find('.active').removeClass('active')
this.$element.addClass('active')
} else if ($input.prop('type') == 'checkbox') {
if (($input.prop('checked')) !== this.$element.hasClass('active')) changed = false
this.$element.toggleClass('active')
}
$input.prop('checked', this.$element.hasClass('active'))
if (changed) $input.trigger('change')
__doPostBack($input.id, '')
} else {
this.$element.attr('aria-pressed', !this.$element.hasClass('active'))
this.$element.toggleClass('active')
}
}
}
我添加的部分几乎是该函数的精确副本，但是当它找到带有
The part that I added is almost an exact copy of the function, but adds __doPostBack($input.id, '') at the end of the processing when it finds a parent with data-toggle="buttons-postback"
由于回发将HTML重置为其原始状态，因此我还将其添加到了我的代码中的事件处理程序中:
Since the postback resets the HTML to its original state, I also added this to the event handlers in my code behind:
ach_lbl.Attributes.Add("Class", "btn btn-primary active")
If tbl_rdo_cc.Visible Then
cc_lbl.Attributes.Add("Class", "btn btn-primary")
End If
If tbl_rdo_ck.Visible Then
ck_lbl.Attributes.Add("Class", "btn btn-primary")
End If
If tbl_rdo_et.Visible Then
et_lbl.Attributes.Add("Class", "btn btn-primary")
End If
我知道这可能不是最优雅的解决方案(由于我几乎不了解修改过的JavaScript)，因此，关于可以从Button.prototype.toggle函数添加的内容中删除的任何建议都是非常感谢.
I know this probably isn't the most elegant solution (due to the fact I barely understand the JavaScript I modified), so any suggestions on what I can remove from what I added to the Button.prototype.toggle function would be greatly appreciated.
这篇关于使用Bootstrap 3使ASP单选按钮显示为切换按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
