參考資料：ASP.NET 4.0 New Feature : 清單控制項之延伸RepeatLayout功能
Step 1.前端aspx
注意：RepeatLayout要設為Flow，當程式經過轉譯後，前端的html會轉換為span標籤，這樣比較符合div。
<head>
...
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
...
<script type="text/javascript">
$(document).ready(function () {
//當PostBack重新載入時，要能夠呈現被選取的狀態
var allspan;
allspan = $('#<%=RadioButtonList1.ClientID%>').find('span');
for (var i = 0; i < allspan.length; i++) {
if ($(allspan[i]).find('input[type="radio"]').prop('checked') == true) {
$(allspan[i]).addClass('active');
//因asp.net radiobuttonlist會記錄選了哪一個選項，所以不用再做一次checked的設定
//$(allspan[i]).find('input[type="radio"]').prop('checked', true);
} else {
$(allspan[i]).removeClass('active');
};
};
//===================================================
//當點選RadioButtonList時，要可以呈現被選取的狀態
$('#<%=RadioButtonList1.ClientID%> .btn-success').click(function () {
$(this).addClass('active');
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>
</head>
<body>
<form id="form1" runat="server">
...
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-12">
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" class="btn-group" data-toggle="buttons" >
<asp:ListItem Value="A" >這是項目A</asp:ListItem>
<asp:ListItem Value="B" >這是項目B</asp:ListItem>
<asp:ListItem Value="C" >這是項目C</asp:ListItem>
<asp:ListItem Value="D" >這是項目D</asp:ListItem>
</asp:RadioButtonList>
<asp:Button ID="Button1" runat="server" Text="PostBack" />
</div>
</div>
</div>
...
</form>
</body>
Step 2.後端aspx.vb
Private Sub test_rbl_bootstrap_Load(sender As Object, e As EventArgs) Handles Me.Load
For x As Integer = 0 To RadioButtonList1.Items.Count - 1
RadioButtonList1.Items(x).Attributes.Add("class", "btn btn-success") 'btn-success
Next
End Sub
結果：
沒有留言:
張貼留言