需要帮助将单选按钮从 html 转换为 aspx

Question

Can anyone help me with converting this into aspx? I tried adding asp:radiobutton and runat='server' but the radio button will not be ticked.

<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

Well, you can and could drop in that markup as you have - it would work, but then to wire up the event code behind, - not all that great.

In place of multiple inputs (as radio), and using the same ID? That does give you a single choice. But in asp.net, better to use what we call a RadioButton list.

So, I would suggest this approach:

      <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>

And you get this:

You can set the list to be horizontal, or vertical - your choice. Ver vertical, just remove the Horizontal tag, and thus this:

        <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>

Will render as this: