Additional html tags with dynamic radio button

Question

I am creating some radio buttons dynamically by:

Regions.ascx

<ul class="form_items" ID="radioList" runat="server" clientidmode="Static">    
    </ul>

In Regions.ascx.cs

 foreach (var region in Config.ConfigString("str_Regions").Split(','))
        {
            HtmlGenericControl li = new HtmlGenericControl("li");
            RadioButton regionRadio = new RadioButton();
            regionRadio.Text = region;
            regionRadio.ID = "Radio"+(i++).ToString();
            regionRadio.Attributes.Add("name", "region");
            regionRadio.Attributes.Add("value", region);
            regionRadio.TextAlign = TextAlign.Right;
            li.Controls.Add(regionRadio);
            radioList.Controls.Add(li);
        }

A lot of extra HTML tags are appearing which I don't want. I am getting output as:

<ul id="radioList" class="form_items">    
  <li>
    <span name="region"><input id="MainContent_contactUs_Radio1" type="radio" name="ctl00$MainContent$contactUs$Radio1" value="Australia">
    <label for="MainContent_contactUs_Radio1">Australia</label>
    </span>
    </li>
    <li>
    <span name="region"><input id="MainContent_contactUs_Radio2" type="radio" name="ctl00$MainContent$contactUs$Radio2" value="America">
    <label for="MainContent_contactUs_Radio2">America</label>
    </span>
    </li>
    </ul>

The label under which the 'Australia/America' is coming causes the wrong look by inheriting the styles aligned to all labels. While I just want

<ul id="radioList" class="form_items">    
        <li><input id="MainContent_contactUs_Radio1" type="radio" name="ctl00$MainContent$contactUs$Radio1" value="Australia">"Australia"</li><li><input id="MainContent_contactUs_Radio2" type="radio" name="ctl00$MainContent$contactUs$Radio2" value="America">"America"</li></ul>

Answer 1

If you are using System.Web.UI.Webcontrols it will render your control with span. You can see why its rendering between span.

Why does ASP.Net RadioButton and CheckBox render inside a Span?

There two ways to overcome this. First you need to add attribute to input controls not span right now when you directly add attribute it will do that way.

See my blog post about it- http://www.dotnetjalps.com/2014/04/aspnet-checkbox-button-attributes-javascript.html

You need to add attribute like below.

myCheckBox.InputAttributes.Add("onblur", "onBlur();");

For text align and other stuff I suggest you use System.Web.UI.HtmlControls where you can use HtmlInputRadioButton instead of System.Web.UI.Webcontrols radio button. Here you can also manage all HTML attribute very easily.

Another thing you can do like adding labels and HTMLInputRadioButton separately and add class to your label as per your requirement.

string[] regions = {"Autralia", "Asia", "US"};
        foreach (var region in regions)
        {
            HtmlGenericControl li = new HtmlGenericControl("li");
            HtmlInputRadioButton radioButton=new HtmlInputRadioButton 
                {Value = region,
                 Name = region};
            li.Controls.Add(radioButton);
            Label label=new Label {Text = region, CssClass = "YourCSSClass"};
            li.Controls.Add(label);
            radioList.Controls.Add(li);
        }

Hopefully this have more controls on css style

Answer 2

I think text-align set the horizontal position of your radio button in its container.

so, check if your container does or not wrap to your radio button.