Try our conversational search powered by Generative AI!

[BUG?] Invalid markup for checkboxes in XForms for MVC


Hi, guys, do you have the same rendering for checkboxes for XForm in EPi 7?

<label title="Do you like the new site">
            <input type="radio" value="Wunderschoen" name="DoYouLikeNewSite" id="DoYouLikeNewSiteWunderschoen!">
            <input type="radio" value="Soso" name="DoYouLikeNewSite" id="DoYouLikeNewSiteSo so">
            So so
            <input type="radio" value="Ganz schlecth" name="DoYouLikeNewSite" id="DoYouLikeNewSiteGanz schlecht">
            Ganz schlecht


There are nested labels inside labels and in FF, for example, you can't change the checkbox value, unless you double click on the other choice! For a college of mine, in Chrome, if you click on the checkbox, all three of them are selected at the same time. This is due to the invalid markup, it depends on the browser behavior.

The same thing doesn't happen in EPi6, nor does in EPi7 for WebForms.

Is there perhaps something I can do to fix this, change EPiServer installation files?


Jan 21, 2013 11:41

Don't mind the strange id-s, I have tried it with simple id-s, names and values, the rendering is the same - labels inside label.

Jan 21, 2013 11:44


Yes, that is a bug, and it should be fixed for the next release.

You can update the html by adding custom editor templates for the different xform segments. The default ones can be found at "{Program Files}\EPiServer\CMS\{versionId}\Application\Util\Views\Shared\EditorTemplates".

My suggestion is that you copy the ones you want to change to {siteRoot}\Views\Shared\EditorTemplates, and make your changes there. The views in the site folder should have priority over the ones in Program Files.


Per Gunsarfs

Jan 21, 2013 14:41

It appears I have marked this as resolved too soon.

Is there anything else I should do besides placing the view inside Views\Shared\EditorTemplates?

I have tried just c/p of Select1AsRadiobuttonFragment.ascx, rewriting it to Select1AsRadiobuttonFragment.cshtml (as I am using  MVC). I have tried adding a controller and also I have deleted the ascx from EPiServer files.

Jan 21, 2013 15:33

Hmm, thought you could just drop a view in the site and it should have precedence. What happens if you do changes directly in the system files? Can you see those changes on the site?

Just a side note, Select1AsRadiobuttonFragment.ascx is an MVC view, just not a Razor view. But you are of course free to write your views for either view engine.

Jan 21, 2013 15:47

Haha, yes, sorry about that, I am starting to put equal between MVC and Razor :D

When I change them directly, I see the changes. Perhaps I can tell the rest of the team to change this and we can wait for the update. When is it expected, do you know?

Jan 21, 2013 15:50

If that works for you, go for it. Just make a note to check it when upgrading.

Sorry, can't say when the fix will make it's way into a release. Firstly, I don't know. Secondly, if I say something that's not true my boss will come by and hit me with a stick (and hopefully just a virutal one).

Jan 21, 2013 16:55
Jan 21, 2013 17:02

Haha, let's hold our fingers crossed for a small stick :D

Is there a possibility that we get the exact markup prior to the release?

I have realized that we can't go on with GUI tasks, if we don't know how the markup will look like. Will you just revert it to EPi 6 looks?

Thank you in advance for this info.

Jan 21, 2013 17:02

Sure. You can see the updated code for Select1AsRadiobuttonFragment.ascx below. The SelectFragment.ascx was changed in the same way, i.e. the wrapping tag was changed to a div, and the for attribute was set on the other label(s).

<%@ Import Namespace="EPiServer.XForms.Parsing" %>
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Select1Fragment>" %>
<fieldset class="<%: Model.Class %> orientation<%: Model.Orientation %>">
        <%: Model.Label %>
    <div title="<%: Model.Title %>">
        <% foreach (SelectOption selectoption in Model.Options)
           { %>

        <label for="<%: selectoption.Id %>">
            <%: Html.RadioButton(Model.Reference, Server.HtmlDecode(selectoption.Value) ?? string.Empty, selectoption.SelectedItem, new { id = selectoption.Id })%>
            <%: Html.Raw(selectoption.Text) %>
        <% } %>
        <%: Html.ValidationMessage(Model.Reference)%>


Edited, Jan 21, 2013 17:19
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.