Question

我有6个问题的调查。每个问题的评分都在（1-5）之间。我想捕获为每个问题选择的值。每个问题只能选择一个值以下是允许我为每个问题选择多个选项，我应该限制为每个问题只选择一个。所有单选按钮应分组为一个，只能选择一个按钮。我应该能够在提交时捕获每个选定的值。

public class SurveyViewModel
{
    public GroupViewModel GroupA { get; set; }
    public GroupViewModel GroupB { get; set; }
    public GroupViewModel GroupC { get; set; }
    public SurveyViewModel()
    {
        GroupA = new GroupViewModel();
        GroupA.GroupName = "A";
        GroupB = new GroupViewModel();
        GroupB.GroupName = "B";
        GroupC = new GroupViewModel();
        GroupC.GroupName = "C";
    }
}

public class GroupViewModel
{
    public string GroupName { get; set; }
    public bool radio1 { get; set; }
    public bool radio2 { get; set; }
    public bool radio3 { get; set; }
    public bool radio4 { get; set; }
    public bool radio5 { get; set; }
}

编辑模板：

<div>
    <h4>GroupViewModel</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>@Html.RadioButtonFor(model => model.radio1, true, new { id = Model.GroupName + "1" })</dt>
        <dd>@Html.DisplayNameFor(model => model.radio1)</dd>
        <dt>@Html.RadioButtonFor(model => model.radio2, true, new { id = Model.GroupName + "2" })</dt>
        <dd>@Html.DisplayNameFor(model => model.radio2)</dd>
        <dt>@Html.RadioButtonFor(model => model.radio3, true, new { id = Model.GroupName + "3" })</dt>
        <dd>@Html.DisplayNameFor(model => model.radio3)</dd>
        <dt>@Html.RadioButtonFor(model => model.radio4, true, new { id = Model.GroupName + "4" })</dt>
        <dd>@Html.DisplayNameFor(model => model.radio4)</dd>
        <dt>@Html.RadioButtonFor(model => model.radio5, true, new { id = Model.GroupName + "5" })</dt>
        <dd>@Html.DisplayNameFor(model => model.radio5)</dd>
    </dl>
</div>

和调查视图如下：

@using (Html.BeginForm())
{ 
    @Html.EditorFor(m => m.GroupA)
    @Html.EditorFor(m => m.GroupB)
    @Html.EditorFor(m => m.GroupC)
    <input type="submit" value="Continue" />
}

我添加了一个如下所示的群组名称，但我无法在http帖子中捕获所选值

 @Html.RadioButtonFor(model => model.radio1, true, new { id = Model.GroupName + "1", @Name = Model.GroupName })

Answer 1

您必须覆盖名称属性：

 @Html.RadioButtonFor(model => model.radio1, true, new { id = Model.GroupName + "1", @Name = "Group" })

您必须为每个只想选择一个的单选按钮执行此操作。

当您使用Html.RadioButtonFor时，它希望您使用相同的属性来绑定所有单选按钮，如：

@Html.RadioButtonFor(model => model.radio, "answer1")
@Html.RadioButtonFor(model => model.radio, "answer2")
@Html.RadioButtonFor(model => model.radio, "answer3")

或使用枚举代替＆＃34; answer1＆＃34;，＆＃34; answer2＆＃34;和＆＃34;回答3＆＃34;

Answer 2

您生成的每个单选按钮，如果属于不同的属性并且具有不同的名称（它们未分组），则所有单选按钮都在“问题”中。可以选择，更糟糕的是，一旦被选中，就不能取消选择。

此外，SurveyViewModel中的属性都是相同的类型，因此您应该使用集合属性，而不是为每个项生成单独的属性。

首先创建一个视图模型，该模型表示您要在视图中显示/编辑的内容。

public class QuestionVM
{
    public string Name { get; set; }
    [Required(ErrorMesage = "Please select a rating")]
    public int? Rating { get; set; }
}

和控制器GET方法

List<QuestionVM> model = new List<QuestionVM>()
{
    new QuestionVM() { Name = "A" },
    new QuestionVM() { Name = "B" },
    new QuestionVM() { Name = "C", Rating = 3 } // use this if you want to pre-select a radio button
};
return View(model);

接下来，为EditorTemplate创建QuestionVM。模板需要命名为/Views/Shared/EditorTemplates/QuestionVM.cshtml

@model QuestionVM
<div class="question">
    @Html.HiddenFor(m => m.Name) // so this value posts back
    <h2>@Model.Name</h2>
    @for(int i = 1; i < 6; i++)
    {
        <label>
            @Html.RadioButtonFor(m => m.Rating, i, new { id = "" })// remove id attribute to prevent invalid html
            <span>@i</span>
        </label>
    }
    @Html.ValidationMessageFor(m => m.Rating)
</div>

最后在主视图中

@model IEnumerable<QuestionVM>
@using (Html.BeginForm())
{
    @Html.EditorFor(m => m)
    <input type="submit" value="Save" />
}

将发回

public ActionResult Edit(IEnumerable<QuestionVM model) // adjust method name to suit

允许只选择一个radiobutton

2 个答案: