带有数据绑定的RadioButtonList切换按钮

时间:2015-04-16 04:55:27

标签: asp.net twitter-bootstrap data-binding togglebutton radiobuttonlist

我有一个单选按钮列表连接到本地sqldb。该表有两个列 - catacatab,radiobuttonlist与cata绑定,并且正常运行。我可以输入记录和查看记录。接下来我应用了bootstrap切换按钮css,当我点击按钮时,它就像切换按钮一样,但是当我从一个记录更改为记录时,我没有看到任何变化。

<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatLayout="Flow" 
     RepeatDirection="Horizontal" CssClass="btn-group" data-toggle="buttons" 
     SelectedValue='<%# Bind("cata") %>'>
  <asp:ListItem class="btn btn-primary" Value="1"></asp:ListItem>
  <asp:ListItem class="btn btn-primary" Value="2"></asp:ListItem>
  <asp:ListItem class="btn btn-primary" Value="3"></asp:ListItem>
  <asp:ListItem class="btn btn-primary active"  Value="4" Selected="True"></asp:ListItem>
</asp:RadioButtonList>

  ![screen shot][1]

1 个答案:

答案 0 :(得分:0)

尝试使用以下javascript在您的单选按钮之间切换。

<script>

    $(document).ready(function () {
        $('.btn-primary').click(function () {
            $(this).addClass('active');

            var allspan = $('#<%= RadioButtonList1.ClientID %>').find('span');

            for (var i = 0; i < allspan.length; i++) {
                if (allspan[i] == this) {
                    $(this).find('input[type="radio"]').prop('checked', true);
                    alert($(this).find('input[type="radio"]').val());
                }
                else {
                    $(allspan[i]).removeClass('active');
                }
            }
        });
    });
</script>

在Page_Load事件中选择单选按钮值:

Javascript功能:

function selectRadioValue(value)
    {
        var allspan = $('#<%= RadioButtonList1.ClientID %>').find('span');

        for (var i = 0; i < allspan.length; i++) {
            var objInnerRdo = $(allspan[i]).find('input[type="radio"]');
            alert(objInnerRdo.val());
            if (objInnerRdo.val() == value)
            {
                $(allspan[i]).addClass('active');
                $(allspan[i]).find('input[type="radio"]').prop('checked', true);
            }
            else {
                $(allspan[i]).removeClass('active');
            }
        }
    }

使用传递数据库值的RegisterStartupScript来调用此函数。对于Ex。我传递价值&#34; 2 &#34;在页面加载。

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "Show Windows" + new Random().Next().ToString(), "selectRadioValue('2');", true);
}