需要幫助將單選按鈕從 html 轉換為 aspx

Question

誰能幫我把它轉換成aspx？ 我嘗試添加 asp:radiobutton 和 runat='server' 但不會勾選單選按鈕。

<div class="col-12 pt-2 ps-3">Temperature</div>
<div class="col-lg-4 col-6">
   <input type="radio" class="btn-check" name="options" id="temperature_0" autocomplete="off">
   <label class="btn btn-secondary w-100 p-lg-3 p-3" for="temperature_0">below 36&deg;C</label>
</div>
                
<div class="col-lg-4 col-6">
   <input type="radio" class="btn-check" name="options" id="temperature_1" autocomplete="off" checked>
   <label class="btn btn-secondary w-100 p-lg-3 p-3" for="temperature_1">36&deg;C - 37&deg;C</label>
</div>
                
<div class="col-lg-4 col-6 pt-lg-0 pt-2">
   <input type="radio" class="btn-check" name="options" id="temperature_3" autocomplete="off">
   <label class="btn btn-secondary w-100 p-lg-3 p-3" for="temperature_3">above 37&deg;C</label>
</div>

Answer 1

好吧，您可以並且可以按照您的方式放入該標記 - 它會起作用，但隨后將事件代碼連接到后面， - 並不是那么好。

代替多個輸入（作為收音機），並使用相同的 ID？ 這確實給了你一個選擇。 但是在 asp.net 中，最好使用我們所說的 RadioButton 列表。

所以，我建議這種方法：

      <style>
            .MyRadio label
                {
                  margin-left: 8px;
                  margin-right:20px;
                }
        </style>

        <asp:RadioButtonList ID="RadioButtonList1" runat="server" cssclass="MyRadio" RepeatDirection="Horizontal"
            >
            <asp:ListItem>below 36&deg;C</asp:ListItem>
            <asp:ListItem Selected="True">36&deg;C - 37&deg;C</asp:ListItem>
            <asp:ListItem>above 37&deg;C</asp:ListItem>
        </asp:RadioButtonList>

你得到這個：

您可以將列表設置為水平或垂直 - 您的選擇。 Ver垂直，只需刪除Horizontal標簽，因此：

        <asp:RadioButtonList ID="RadioButtonList1" runat="server" cssclass="MyRadio">
            <asp:ListItem>below 36&deg;C</asp:ListItem>
            <asp:ListItem Selected="True">36&deg;C - 37&deg;C</asp:ListItem>
            <asp:ListItem>above 37&deg;C</asp:ListItem>
        </asp:RadioButtonList>

將呈現為：