0

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?

2
Contributors
11
Replies
34
Views
2 Years
Discussion Span
Last Post by Violet_82
0

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

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

0

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

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?

0

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

0

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

0

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.

Edited by JorgeM

0

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?

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.