Question

我之前在MVC项目中没有使用过radiobuttons。现在，当我第一次使用它时，我似乎遇到了问题。

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

这是我的模型

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")

这是目前在浏览器中呈现的视图 enter image description here 的问题

（问题下面的编辑是你可以忽略的。）为什么默认选择所有单选按钮？我应该怎么做才能确保每个问题只能选择1个单选按钮？

Answer 1

每组单选按钮应绑定到模型上的相同属性。目前，每个无线电都是它自己的属性，因此属于它自己的组。并且它们都被检查，因为传递给它的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属性。

---更新---

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

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; } 
}

Answer 2

我想你忘了为你的单选按钮设置groupName。

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

Answer 3

试试这个

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

从三个中选择1个radiobutton

3 个答案: