MVC XForm issue

Mari Jørgensen

Vote:

A customer is reporting issues with selecting a radio button option when using Firefox. Clicking the label works, but it does not work clicking the input itself.

After doing some research I have concluded that it is the html produced by the xforms control that is the problem. A radio button list with two options, returns the following html:

<fieldset class=" orientationVertical">
   <legend></legend>
   <label title="">
      <label>
          <input type="radio" value="A" name="Demo" id="DemoA">
             Plan A       
           </label>
       <label>
          <input type="radio" value="b" name="Demo" id="DemoB">
             Plan B      
        </label>
   </label>
</fieldset>

I'm running latest version of EPiServer 7 including all AddOnStore patches and is the following code to render the xform control

<section id="form" class="xform">
    @Html.ValidationSummary(true, "* Vennligst fyll ut påkrevde felt(er).")
    @Html.DisplayForModel(new { XFormParameters = new XFormParameters() { SuccessAction = "Success", FailedAction = "Failed" } })
</section>

By testing using dummy html I can see that the radiobuttons works well if I remove the following tags from the html:

<legend></legend>
   <label title="">

Is this an EPiServer bug?

#75045

Sep 16, 2013 13:50

Per Gunsarfs

Vote:

I think you've run into this bug:

MVC Xforms: Rendering <input> inside <label> is not optimal

The fix for that issue doesn't touch the legend element, but it fixes the problem with the nested labels. And I think that is the cause of the strange behavior.

Regards

Per Gunsarfs

#75054

Sep 16, 2013 17:06

Vote:

Is there a fix available for this bug?

#75059

Sep 16, 2013 20:27

Per Gunsarfs

Vote:

I'm not sure if the fix is available somehow, the support team could better answer that.However, it shouldn't be that hard to make a workaround for it.

The MVC rendering for radio buttons in an XForm is done by an editor template called Select1tAsDropdownListFragment.ascx. The default one can be located in the installed application, under "/UI/Util/Views/Shared/EditorTemplates". You should be able to override that by dropping a custom one under "/Views/Shared/EditorTemplates" of your site root.

This is how the template looks after the bugfix(but you could of course change it to anything you'd like):

<%@ Import Namespace="EPiServer.XForms.Parsing" %>
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Select1Fragment>" %>
<fieldset class="<%: Model.Class %> orientation<%: Model.Orientation %>">
    <legend>
        <%: Model.Label %>
    </legend>
    <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) %>
        </label>
        <% } %>
        <%: Html.ValidationMessage(Model.Reference)%>
    </div>
</fieldset>

#75071

Sep 17, 2013 9:27

Vote:

Ah, I see.

Btw, It should be Select1AsRadiobuttonFragment.ascx, not Select1tAsDropdownListFragment.ascx

Anyway I've tried adding the .ascx under "/Views/Shared/EditorTemplates" but it is not being picked up by the rendering. Still using EPiServer built in one. Any tips?

#75155

Sep 18, 2013 18:06

Marija Jemuovic

Vote:

I've had the same problem earlier, we ended up with changing EPiServer templates inside program files :(

This is the old post:

http://world.episerver.com/Modules/Forum/Pages/Thread.aspx?id=65108

#75173

Sep 19, 2013 11:21

Per Gunsarfs

Vote:

Yes, Select1AsRadiobuttonFragment.ascx is the right one. The other is for drop down lists.

Had a chat with a colleague, and it should be possible to replace built in views that way. If it doesn't, I would consider it a bug. We'll do some controlled testing over here, and then get back with some more info.

#75174

Sep 19, 2013 11:24

Per Gunsarfs

Vote:

We tested this in a default alloy tech installation, and noticed the same problem there. So, it is a bug, and now it's registered as:

#105779: MVC: Not possible to override XForm fragments in EditorTemplates

Regards

Per Gunsarfs

#75192

Sep 19, 2013 16:55

Vote:

Ok, I'll change the EPiServer view in order to fix this. Thanks for the feedback!

#75193

Sep 19, 2013 16:59