CODEWITHSUNDEEP
c#asp.net.netcsscheckbox
Liam
Liam

Reputation: 9855

Formatting checkbox?

I'm working on a website built with .net, im trying to output my markup as so...

<span class="check-input">
     <!-- Terms -->
     <input type="checkbox" id="terms" class="terms checkbox">
     <label for="terms">I agree to the terms and conditions</label>
     <input type="checkbox" id="age" class="age checkbox">
     <label for="age">I am over 18 years old</label>
     </span>

Only the code my developer has put in place is...

<!-- Terms -->
       <asp:CheckBox ID="CB_Agree" 
       Text="I agree to the terms and conditions" runat="server" TabIndex="4" />

       <asp:CheckBox ID="CB_Age" 
       Text="I am over 18 years old" runat="server" TabIndex="5" />

and this is outputting my data as...

<span class="check-input">
<!-- Terms -->
<span class="terms checkbox">
    <input type="checkbox" tabindex="4" name="ctl00$ContentPlaceHolder1$CB_Agree" id="ctl00_ContentPlaceHolder1_CB_Agree">
    <label for="ctl00_ContentPlaceHolder1_CB_Agree">I agree to the terms and conditions</label>
</span>
<span class="age checkbox">
    <input type="checkbox" tabindex="5" name="ctl00$ContentPlaceHolder1$CB_Age" id="ctl00_ContentPlaceHolder1_CB_Age">
    <label for="ctl00_ContentPlaceHolder1_CB_Age">I am over 18 years old</label>
</span>
</span>

Upvotes: 2

Views: 2305

Answers (3)

Tim Schmelter
Tim Schmelter

Reputation: 460058

Then you (or your developer) needs to add the CssClass property to the checkbox.

for example:

<asp:CheckBox ID="CB_Agree" 
       CssClass="terms checkbox"
       Text="I agree to the terms and conditions" runat="server" TabIndex="4" />

It has also a InputAttributes to control the layout of the checkbox and a LabelAttributes property for the span.

So you could for example apply different background colors in codebehind in the following way:

CB_Agree.InputAttributes.CssStyle.Add("background-color", "Red");
CB_Agree.LabelAttributes.CssStyle.Add("background-color", "Green");

Upvotes: 5

Niranjan Singh
Niranjan Singh

Reputation: 18290

Cleaner HTML Markup with ASP.NET 4 Web Forms - Client IDs (VS 2010 and .NET 4.0 Series)

If you using ASP.NET 4.0 then you can use ClientIDMode on the control with a value of static, and the ID will not change.

Otherwise you could use a literal to output the element itself or just its value. On you're page you'd have:

<input type="hidden" id="ppID" value='<asp:Literal ID="ppIDValue" runat="server" />' />

To apply css class to your controls use CssClass property of the server side controls as:

 <asp:CheckBox ID="CB_Agree" 
       Text="I agree to the terms and conditions" runat="server" TabIndex="4"
       CssClass="terms checkbox"   />

Ref: ASP.NET HtmlInputHidden control - stop name from changing?

Upvotes: 0

Icarus
Icarus

Reputation: 63956

You won't be able to control the way names are outputted but you can definitely control the way Ids are outputted. One way to do this is to add the ClientIDMode ="Static" to the controls in your markup as so:

<asp:CheckBox ID="CB_Agree"  ClientIDMode ="Static"
   Text="I agree to the terms and conditions" runat="server" TabIndex="4" />

Tim just made me realize that you have an issue with the styles as well. For that, you need to add CssClass="your_class your_other_class" as so:

<asp:CheckBox ID="CB_Agree"  ClientIDMode ="Static" CssClass="terms checkbox"
   Text="I agree to the terms and conditions" runat="server" TabIndex="4" />

Upvotes: 1

Related Questions