从三个中选择 1 个单选按钮

Question

我以前在 MVC 项目中没有使用过单选按钮。 现在，自从我第一次使用它以来，我似乎遇到了一个问题。

我想要做的是，会有问题，用户可以从可用的答案中选择一个答案。每个答案都有一个单选按钮。

这是我的模型

public class CreateAppointmentSelectOptions
{
    public Guid AppointmentId { get; set; }

    //question1
    [Display(Name = "Repeat invitation untill a common date is found")]
    public bool RepeatTillCommonDateIsFound { get; set; }


    [Display(Name = "Repeat times")]
    [Range(1,5,ErrorMessage="Repeat times must be between {1} and {2}")]
    public int RepeatTimes { get; set; }

    //question 1
    [Display(Name="Repeat invitation once")]
    public Boolean RepeatOnce { get; set; }

    //question 1
    [Display(Name="Do not repeat invitation")]
    public Boolean NoRepeat { get; set; }

    //question 2
    [Display(Name = "Cancel the invitation")]
    public Boolean CancelInvitation { get; set; }

    //question 2    
    [Display(Name="Plan appointment with my first available date")]
    public Boolean FirstAvailableCommon { get; set; }

    //question 2 
    [Display(Name="Plan with all participants available on the first available common date")]
    public Boolean OwnerFirstAvailableCommon { get; set; }       
}

和控制器

[HttpGet]
public ActionResult Create_WhatIf(Guid appointmentId)
{
    var appointmentCondition = new CreateAppointmentSelectOptions
    {
        AppointmentId = appointmentId,
        RepeatOnce = true,
        NoRepeat = false,
        RepeatTillCommonDateIsFound=false,
        CancelInvitation = false,
        OwnerFirstAvailableCommon=false,
        FirstAvailableCommon = true
    };
    return View(appointmentCondition);
}

[HttpPost]
public ActionResult Create_WhatIf(CreateAppointmentSelectOptions options)
{
    return View();
}

以及观点

@model CreateAppointmentSelectOptions
@{
    ViewBag.Title = "Create_WhatIf";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>What If?</h2>
@using (Html.BeginForm("Create_WhatIf", "Appointment", FormMethod.Post))
{
    @Html.HiddenFor(m=>m.AppointmentId)


    <div class="col-md-10">
        <h3>What would you like to do if a common appointment with all participants cannot be made after the first invitation?</h3>
        <div class='well'>
            <div class="form-group">              
                <div class="input-group">
                    @Html.RadioButtonFor(m => m.RepeatTillCommonDateIsFound,Model.RepeatTillCommonDateIsFound)
                    @Html.LabelFor(m => m.RepeatTillCommonDateIsFound)
                </div>               
                <div id="RepeatTimes">
                    @Html.EditorFor(m=>m.RepeatTimes)
                </div>
                <div class="input-group">
                    @Html.RadioButtonFor(m => m.RepeatOnce,Model.RepeatOnce)&nbsp;&nbsp;
                    @Html.LabelFor(m => m.RepeatOnce)
                </div> 
                <div class="input-group">
                    @Html.RadioButtonFor(m => m.NoRepeat,Model.NoRepeat)&nbsp;&nbsp;
                    @Html.LabelFor(m => m.NoRepeat)
                </div>           
            </div>
        </div>
    </div>

    <div class="col-md-10">
        <h3>What would you like to do if a common appointment cannot be made in the end?</h3>
        <div class='well'>
            <div class="form-group">         
                <div class="input-group">
                    @Html.RadioButtonFor(m => m.CancelInvitation,Model.CancelInvitation)&nbsp;&nbsp;
                    @Html.LabelFor(m => m.CancelInvitation)
                </div>                             
                <div class="input-group">
                    @Html.RadioButtonFor(m => m.OwnerFirstAvailableCommon,Model.OwnerFirstAvailableCommon)&nbsp;&nbsp;
                    @Html.LabelFor(m => m.OwnerFirstAvailableCommon)
                </div> 
                <div class="input-group">
                    @Html.RadioButtonFor(m => m.FirstAvailableCommon,Model.FirstAvailableCommon)&nbsp;&nbsp;
                    @Html.LabelFor(m => m.FirstAvailableCommon)
                </div>           
            </div>
        </div>
    </div>

     <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input class="btn btn-default" value="<<Previous" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="submit" class="btn btn-default" value="Next>>" />
        </div>
    </div>

}
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jqueryval")

这是当前在浏览器中呈现的视图 问题

（好吧，问题下方的编辑器是您可以忽略的。） 为什么默认选择所有单选按钮？为了确保每个问题只能选择 1 个单选按钮，我应该怎么做？

Answer 1

我认为您忘记为单选按钮设置 groupName。

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.radiobutton.groupname(v=vs.110).aspx

Answer 2

试试这个

@Html.RadioButtonFor(m => m.CancelInvitation,Model.CancelInvitation,new { Name = "grp" })  
@Html.RadioButtonFor(m => m.OwnerFirstAvailableCommon,Model.OwnerFirstAvailableCommon,new { Name = "grp" })  
@Html.RadioButtonFor(m => m.FirstAvailableCommon,Model.FirstAvailableCommon,new { Name = "grp" }) &nbsp

Answer 3

每组单选按钮都应绑定到模型上的相同属性。目前，每台收音机都是自己的财产，因此属于自己的组。并且它们都被检查，因为传递给它的 2 个参数是相同的，所以比较总是返回 true（例如，m => m.RepeatOnce 和 Model.RepeatOnce 相等，因此检查无线电）。

相反，您需要在视图模型上添加 1 个属性来表示每个组。比如第2题……

@Html.RadioButtonFor(m => m.Question2Answer, "CancelInvitation")
@Html.RadioButtonFor(m => m.Question2Answer, "OwnerFirstAvailableCommon")
@Html.RadioButtonFor(m => m.Question2Answer, "FirstAvailableCommon")

如果选择了相应的值，则第二个值是分配给Question2Answer 的值。 （这里我使用的是字符串，但你也可以使用枚举）

提交表单时，您必须使用Question2Answer 中的值来填充模型上的CancelInvitation、OwnerFirstAvailableCommon 和FirstAvailableCommon 属性。同样，如果您显示现有实体，则必须在渲染视图之前填充视图模型上的 Question2Answer 属性。

--- 更新---

视图模型看起来像这样。在您的控制器中，您需要从模型中填充它...

public class CreateAppointmentSelectOptionsViewModel
{
    public Guid AppointmentId { get; set; }


    [Display(Name = "Repeat times")]
    [Range(1,5,ErrorMessage="Repeat times must be between {1} and {2}")]
    public int RepeatTimes { get; set; }

    public string Question1Answer { get; set; } // should have a more meaningful name

    public string Question2Answer { get; set; } 
}