Question

Having a bizarre issue that I’m hoping people can shed some like on.
When I’ve been making forms with check boxes and radio buttons in my jQuery Mobile MVC 4 project, if I use Razor syntax to spit out the controls according to the view model e.g. @Html.RadioButtonFor etc instead of just writing the standard input type=”radio”, jQuery Mobile doesn’t apply the styles to the elements. Screen shots and code differences included. Is this something to do with the way the controls are being rendered? Happens in both Views and Partial Views.

I have changed just the first set of radio buttons here to demonstrate the point. If I change the whole form to Razor HTML helpers, I would get the same across all of the controls.

Non-Razor:

Razor:

Non-Razor code:

<fieldset data-role="controlgroup" data-type="vertical" class="recurrencyArea">
                                <legend></legend>
                                <input type="radio" data-theme="b" name="Period" id="Daily" value="Daily" checked="checked" />
                                <label for="Daily">Daily</label>

                                <input type="radio" data-theme="b" name="Period" id="Weekly" value="Weekly" />
                                <label for="Weekly">Weekly</label>

                                <input type="radio" data-theme="b" name="Period" id="Monthly" value="Monthly" />
                                <label for="Monthly">Monthly</label>
                            </fieldset>

Razor code:

<fieldset data-role="controlgroup" data-type="vertical" class="recurrencyArea">
                                <legend></legend>
                                @Html.LabelFor(x=>x.Period, "Daily")
                                @Html.RadioButtonFor(x => x.Period, "Daily", new { data_theme = "b", @Checked = "checked", id = "Daily"  })

                                @Html.LabelFor(x=>x.Period, "Weekly")
                                @Html.RadioButtonFor(x => x.Period, "Weekly", new { data_theme = "b", @Checked = "checked", id = "Weekly"  })

                                @Html.LabelFor(x=>x.Period, "Monthly")
                                @Html.RadioButtonFor(x => x.Period, "Monthly", new { data_theme = "b", @Checked = "checked", id = "Monthly"  })
                            </fieldset>

Is the razor html being generated after the jquery mobile scripts have run over the page?

Anybody with any helpful ideas/or indeed anyone who can spot any stupid mistakes would be a hero!

Many thanks,
Christian

Answer 1

I’m not too familiar with jquerymobile, but the on glitch i can see here, is that for the html code you have labels that look like this:

<label for="Daily">Daily</label>

while the razor code will output the labels like this:

<label for="Period">Daily</label>

The “for” attribute is wrong for your sceanrio in the razor code, maybe jquery mobile is sensitive to that?