Как я могу связать свою метку HTML с переключателем ASP.Net?

Question

У меня есть метка HTML, с которой я связал изображение, поэтому при нажатии на изображение оно подсвечивается, и в нем выбирается переключатель (под изображением). Я пытаюсь превратить переключатель в переключатель ASP, чтобы я мог ссылаться на него в коде, но не могу понять, как связать метки.

Я подумал, что это может быть потому, что это HTML для ASP, он может не работать, поэтому я попытался использовать метку ASP, но, насколько я могу судить, метка не позволит вам включить в нее изображение.

Вот как это работает:

<div class="form-holder form-holder-2">
    <input type="radio" class="radio" name="radio1" id="p1" value="p1">
        <label class="plan-icon plan-1-label" for="p1">
            <img src="images/frmMM1.png" alt="p1">
        </label>
    <div class="plan-total">
        <span class="plan-title">Managing your money</span>
        <p class="plan-text">Placeholder</p>
    </div>
</div>

Вот как это выглядит сейчас:

<div class="form-holder form-holder-2">
    <asp:RadioButton ID="rbMM1" AssociatedControlID="rbMM1" ClientIDMode="Static" runat="server" CssClass="radio" GroupName="rbMM" Checked="true" />
        <label class="plan-icon plan-1-label" for="rbMM1" >
            <img src="images/frmMM1.png" alt="p1">
        </label>
    <div class="plan-total">
        <span class="plan-title">Managing your money</span>
        <p class="plan-text">Placeholder</p>
    </div>
</div>

Изначально все выглядит одинаково при запуске приложения, но переключатели не активируются (с картинки). Есть ли лучший способ, которым я могу достичь вышеупомянутого?

Answer 1

Мне удалось использовать другой метод для достижения этой цели, благодаря скрытым переключателям ASP, которые выбираются с помощью javascript из исходных кнопок.Если кто-то столкнется с этим в будущем, вот как я этого добился:

<div class="form-holder form-holder-2">
    <asp:RadioButton ID="rbMM1" AssociatedControlID="rbMM1" ClientIDMode="Static" runat="server" CssClass="radio" GroupName="rbMM" Checked="true" />
        <input type="radio" class="radio" name="radio1" id="p1" value="p1" onclick"clickRadioButton1()">
        <label class="plan-icon plan-1-label" for="rbMM1" >
            <img src="images/frmMM1.png" alt="p1">
        </label>
        <script type="text/javascript">
            function clickRadioButton1() {
            document.getElementById("<%=rbMM1.ClientID %>").checked = true;
            }
        </script>
    <div class="plan-total">
        <span class="plan-title">Managing your money</span>
        <p class="plan-text">Placeholder</p>
    </div>
</div>

Answer 2

Пожалуйста, попробуйте добавить атрибут runat="server" к вашей метке.

<label class="plan-icon plan-1-label" for="rbMM1" runat="server">
    <img src="images/frmMM1.png" alt="p1">
</label>

Таким образом, я могу использовать значение этой метки в коде класса.Дайте мне знать, если это работает для вас или нет.