associate asp.net radio button with its own label

Question

Violet_82 89 Posting Whiz in Training

9 Years Ago

Hi all, I just came across something odd.
I'm just building a simple form, like this in visual studio

<div class="control-group">
            <label class="control-label" for="rent">Rent</label>
            <div class="controls">
                <asp:RadioButton ID="rent" runat="server" GroupName="expenses" />            
            </div>
        </div>

and when I viewed it, I expected to be able to click on the label and get the corresponding radio button checked, but alas, that doesn't work. I know I can do that if I use a HTML radio button, but this time, for a change, I want to use a asp radio button. So, first things first: I checked and that label renders as a normal label in the HTML, so no problem there. I came across this interesting post http://laak.fi/2012/09/associated-form-elements-and-labels-in-asp-net-webforms/ which esentially says that I need to add a AssociatedControlID attribute to my label, whose value will be the id of the hradio box, like this
AssociatedControlID="rent" but no joy, nothing changes and in fact visual studio says: "validation XHTML5: this name contains upper characters which is not allowed". Eh? XHTML5? Who set that? my document type is HTML 5, not sure where that comes from, but anyway, point being I can't get that label and radio button to behave the way I want them to do. Does anybody have a clue?

asp.net

2 Contributors
11 Replies
4K Views
6 Days Discussion Span
Latest Post 9 Years Ago Latest Post by Violet_82

JorgeM 958 Problem Solver

9 Years Ago

I used the following code and it worked for me as you described.

<div class="control-group">
    <label class="control-label" for="rent">Rent</label>
    <div class="controls">
       <asp:RadioButton ID="rent" runat="server" AssociatedControlID="rent" GroupName="expenses" />            
    </div>
  </div>
</div>

JorgeM 958 Problem Solver

9 Years Ago

The Visual Studio version should be relevant here, i wouldnt think. i am using VS 2013, but running the web on an IIS web server. Here is my sample code.

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div class="control-group">
            <label class="control-label" for="rent">Rent</label>
            <div class="controls">
               <asp:RadioButton ID="rent" runat="server" AssociatedControlID="rent" GroupName="expenses" />            
            </div>
          </div>
        </div>
    </form>
</body>
</html>

Then, here is the HTML markup that is generated when accessing the page via a browser.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<form method="post" action="default" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="u....E"" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>

<script src="/WebResource.axd?d=p......5" type="text/javascript"></script>
<div class="aspNetHidden">

    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="F......4" />
    <input type="hidden" name="__SCROLLPOSITIONX" id="__SCROLLPOSITIONX" value="0" />
    <input type="hidden" name="__SCROLLPOSITIONY" id="__SCROLLPOSITIONY" value="0" />
    <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
    <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="I.....z" />
</div>

<div class="control-group">
  <label class="control-label" for="rent">Rent</label>
  <div class="controls">
    <span AssociatedControlID="rent">
      <input id="rent" type="radio" name="expenses" value="rent" />
    </span>            
  </div>
</div>

</div>


<script type="text/javascript">
//<![CDATA[

theForm.oldSubmit = theForm.submit;
theForm.submit = WebForm_SaveScrollPositionSubmit;

theForm.oldOnSubmit = theForm.onsubmit;
theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit;
//]]>
</script>
</form>
</body>
</html>

JorgeM 958 Problem Solver

9 Years Ago

It looks like you are just missing... AssociatedControlID="bills" for line 4, asp:RadioButton

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Violet_82 89 Posting Whiz in Training · Answer 1 · 2014-12-15T13:10:31+00:00

Um, it doesn't work for me...so you don't get any error message? I'm on VS 2012

Violet_82 89 Posting Whiz in Training · Answer 2 · 2014-12-16T13:35:07+00:00

Well, that's rather interesting then: take a look at my code instead (sorry I changed it slightly but in the generated code the value of the "for" attribute is diffente from the value of the id)
ASP code:

<div class="control-group">
            <label class="control-label" for="bills">Bills</label>
            <div class="controls">
                <asp:RadioButton ID="bills" runat="server" GroupName="Expenses" />            
            </div>
        </div>

Now check out the generated code:

 <div class="control-group">
            <label class="control-label" for="bills">Bills</label>
            <div class="controls">
                <input id="ContentPlaceholder_bills" type="radio" name="ctl00$ContentPlaceholder$Expenses" value="bills" />            
            </div>
        </div>

Um, no wonder it doesn't work. Is there a way around this, meaning a way to tell asp to keep the id value as I specified it?

Violet_82 89 Posting Whiz in Training · Answer 3 · 2014-12-18T09:06:33+00:00

I'm such an idiot, sorry I copied the wrong one, here's the right one:
ASP code

<div class="control-group">
    <label class="control-label" for="food" AssociatedControlID="food">Food</label>
    <div class="controls">
        <asp:RadioButton ID="food" runat="server" GroupName="Expenses" />            
    </div>
</div>

Generated code:

<div class="control-group">
    <label class="control-label" associatedcontrolid="food" for="food">Food</label>
    <div class="controls">
        <input id="ContentPlaceholder_food" type="radio" value="food" name="ctl00$ContentPlaceholder$Expenses">
    </div>
</div>

As you can see the input id isn't food but ContentPlaceholder_food

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 4 · 2014-12-18T17:54:14+00:00

Ok.. so if you recall from another thread, i had recommended the use of ClientIDMode="Static". if you apply that approach here, it will work.

<asp:RadioButton ID="food" runat="server" ClientIDMode="Static" GroupName="Expenses" />

The reason is simple, because asp.net changes the id dynamically, the process in HTML that ties the label to the input element is broken. if you force asp.net to not change the ID of the element, the id of the input element and label will match and therefore it will work as expected.

For most of my asp.net projects, they include alot of client side stuff so i generally set the ClientIDMode to static and I do this in the web.config file so it applies globally.

Violet_82 89 Posting Whiz in Training · Answer 5 · 2014-12-19T09:58:25+00:00

Ah yes, I remember you saying that, but I had an old version of visual studio so I couldn't do that as it wasn't supported. I have now upgraded a little, so I'll try that! That makes me think though, what happens if I still had the old version of visual studio that didn't support ClientIDMode?

Violet_82 89 Posting Whiz in Training · Answer 6 · 2014-12-19T11:50:55+00:00

And something interesting to note as well: with the addition of ClientIDMode to the radio button, I can remove the AssociatedControlID property and it will work anyway as the id's are not changing anymore

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 7 · 2014-12-19T13:00:27+00:00

JorgeM 958 Problem Solver

9 Years Ago

Yes that's correct. Glad you solved the issue.

Violet_82 89 Posting Whiz in Training · Answer 8 · 2014-12-19T13:12:23+00:00

Violet_82 89 Posting Whiz in Training

9 Years Ago

thanks for your help