使用Twitter引導單選按鈕作爲html.radiobutton更換

我有幾個單選按鈕使用Twitter引導單選按鈕作爲html.radiobutton更換

<p>@Html.RadioButton("selected", "img")img 
    @Html.RadioButton("selected", "input")input 
    @Html.RadioButton("selected", "script")script 
    @Html.RadioButton("selected", "link")link 
    @Html.RadioButton("selected", "form")form</p>

，我想使用Twitter的引導的BTN-組，按鈕無線電作爲一種風格作爲這些替代單選按鈕，我嘗試添加該代碼是

<div class="btn-group" data-toggle="buttons-radio"> 
    <button type="button" class="btn" name="selected" value="a">a</button> 
    <button type="button" class="btn" name="selected" value="img">img</button> 
    <button type="button" class="btn" name="selected" value="input">input</button> 
    <button type="button" class="btn" name="selected" value="script">script</button> 
    <button type="button" class="btn" name="selected" value="link">link</button> 
    <button type="button" class="btn" name="selected" value="form">form</button> 
    </div>

在我的控制器

我使用的是我使用的的FormCollection從檢查單選按鈕獲取價值的一種方式，但我想用引導CSS而不是有簡單的@ Html.radiobutton。

  string selectedTechnology = form["selected"]; 
      List.UrlType = selectedTechnology;

我有一種感覺，這是不是做了正確的方式，因爲助手可能跟的FormCollection的作品，它有不知道是什麼引導CSS按鈕，但如果有實現它的方式，那簡直太好了。

UPDATE：

所以......這裏是解決方案，我用在尋找

單選按鈕引導CSS

<div id="radios" class="btn-group view-opt-btn-group" data-toggle="buttons-radio"> 
<button type="button" class="btn" name="option-a" value="a">a</button> 
<button type="button" class="btn" name="option-img" value="img">img</button> 
<button type="button" class="btn" name="option-script" value="script">script</button> 
<button type="button" class="btn" name="option-link" value="link">link</button> 
<button type="button" class="btn" name="option-form" value="form">form</button> 
<input type="hidden" name="option" value="0" /> 
</div>

我創建一個JScript點擊功能

<script type="text/jscript"> 
    $("body").find("#radios").children().each(function() { 
     $(this).bind('click', function() { 
      $("input[name=option]").val(this.value); 
     }); 
    }); 
</script>

我的控制器內我使用FormCollection將選定的按鈕添加到我的國防部el

 string selectedTechnology = form["option"]; 
     whiteList.UrlType = selectedTechnology;

希望這會有所幫助。

來源

2012-12-04 Lewis

所以...這裏是我創造我的控制器內的JScript點擊功能

<script type="text/jscript"> 
     $("body").find("#radios").children().each(function() { 
      $(this).bind('click', function() { 
       $("input[name=option]").val(this.value); 
      }); 
     }); 
    </script>

使用引導CSS

<div id="radios" class="btn-group view-opt-btn-group" data-toggle="buttons-radio"> 
    <button type="button" class="btn" name="option-a" value="a">a</button> 
    <button type="button" class="btn" name="option-img" value="img">img</button> 
    <button type="button" class="btn" name="option-script" value="script">script</button> 
    <button type="button" class="btn" name="option-link" value="link">link</button> 
    <button type="button" class="btn" name="option-form" value="form">form</button> 
    <input type="hidden" name="option" value="0" /> 
    </div>

我一直在尋找

單選按鈕的解決方案，我用的FormCollection到所選擇的按鈕添加到我的模型

  string selectedTechnology = form["option"]; 
      whiteList.UrlType = selectedTechnology;

希望這會有所幫助。

來源

2012-12-04 16:49:37 Lewis

非常好，這也回答了我的問題！感謝發佈和回答！ :) – vgoklani

很高興你發現它有幫助:)我們都在學習，去堅強，我的兒子！ – Lewis

我還沒有實際使用Twitter的引導（僅讀了它），和.NET是不是我的強項，但：

1）您需要使用輸入與類型=「radio」製作一個單選按鈕，而不是按鈕標籤。

2） Twitter的自舉提供.radio和.inline類被施加到所述輸入元件的父，就像一個標籤：

<label class="radio"> 
    <input type="radio" name="selected" value="..." /> 
    Text to come after the radio button 
</label>

3） @ Html.RadioButton取第三個參數，一個對象，用於指定屬性：

@Html.RadioButton("selected", "form", new { class = "class" });

希望有幫助。

來源

2012-12-04 15:30:47

使用Twitter引導單選按鈕作爲html.radiobutton更換

回答

相關問題