ASP.net MVC Html.RadioButtonFor Grouping within Html.DisplayFor

Question

I'm having an issue getting a dynamic set of radio buttons (driven by a CMS) working with Model binding.

So far I've gotten the radios to render, but they behave more like checkboxes, which I believe is down to the name atribute on the input being different. I had thought I'd resolved this by using a parent id to group them, but that doesn't work. On save I want to bind the state (checked / not checked) to the IsSelected property on my Option model. If I pass in a name attribute as part of the RadioButtonFor I can get the radio to work as a group but lose the model binding.

I'm using the same setup with a different Display template for checkboxes which works fine, not sure where I'm going wrong here. Anyone get any suggestions?

Models

public class Question
{
    public int QuestionId { get; set; } // 1044
    public string QuestionText { get; set; } // Whats your favourite colour
    public HelpText HelpText { get; set; } 
    public IEnumerable<Option> Options { get; set; } // colours
}

public class Option
{
    public int OptionId { get; set; } // 
    public int ParentId { get; set; } // Set as QuestionId for radio button grouping :: 1044
    public string Label { get; set; }
    public string Value { get; set; }
    public bool IsSelected { get; set; }
}

public class RadioOption : Option {} // derived classes to drive DisplayFor template matching

public class CheckboxOption : Option {}

Views

Simplified partial view, which is passed the Question model and is looping through all the options and rendering a display template

<fieldset>
    @Html.DisplayFor(x => x.Options)
</fieldset>

Radio button Display Template

@model ViewModels.RadioOption

@Html.RadioButtonFor(m => m.ParentId, Model.Label, Model.OptionId)
@Html.LabelFor(m => m.ParentId, Model.Label)

@Html.HiddenFor(m => m.Value)
@Html.HiddenFor(m => m.OptionId)
@Html.HiddenFor(m => m.Label)
@Html.HiddenFor(m => m.ParentId)

Rendered HTML

<fieldset>
    <input id="Questions_5__Options_0__ParentId" name="Questions[5].Options[0].ParentId" type="radio" value="Red">
    <label for="Questions_5__Options_0__ParentId">Red</label>

    <input id="Questions_5__Options_1__ParentId" name="Questions[5].Options[1].ParentId" type="radio" value="Green">
    <label for="Questions_5__Options_1__ParentId">Green</label>

    <input id="Questions_5__Options_2__ParentId" name="Questions[5].Options[2].ParentId" type="radio" value="Blue">
    <label for="Questions_5__Options_2__ParentId">Blue</label>

    <input id="Questions_5__Options_3__ParentId" name="Questions[5].Options[3].ParentId" type="radio" value="Yellow">
    <label for="Questions_5__Options_3__ParentId">Yellow</label>
</fieldset>

First, you editing data, so use an `EditorTemplate`, not a `DisplayTemplate`. Your `Question` model needs a property to bind to - say `int SelectedOption` (which I assume is actually the answer?) and the `Option` class should not have a `IsSelected` property — , Mar 26 '18 at 10:07
Refer [ASP.NET MVC 5 group of radio buttons](https://stackoverflow.com/questions/28055287/asp-net-mvc-5-group-of-radio-buttons/28057533#28057533) for a typical example — , Mar 26 '18 at 10:08
@StephenMuecke I'll give that go, thanks for the link. In terms of Editor vs Display Template I'm using a display template for the checkbox version of this with no issues, and I'm extending that code to work with Radio buttons. — Mike, Mar 26 '18 at 10:29
A `DisplayTemplate` is for display. An `EditorTemplate` is for editing :) — , Mar 26 '18 at 10:30
In any case you will not have an template for type of `RadioOption` - but you might have a template for typeof `Question`, especially if you are rendering multiple Questions in the view. — , Mar 26 '18 at 10:32

ASP.net MVC Html.RadioButtonFor Grouping within Html.DisplayFor

0 Answers0