ASP.Net MVC：用户必须 select 一个复选框在客户端验证

Question

我有 UI，我在其中显示了 3 个复选框，每个复选框都引用了模型 class 的不同属性。我正在使用 jquery 仅通过 mvc 数据注释进行不显眼的验证。我希望当用户提交表单时，用户必须 select 一个复选框，否则将显示客户端错误消息并且不会提交表单。

我可以通过 jquery 来完成，但我想通过 mvc 数据注释来完成。

查看我的模型class

public class Customer
{
    [Required]
    [Display(Name = "First Name")]
    public string FirstName { get; set; }

    [Required]
    [Display(Name = "Last Name")]
    public string LastName { get; set; }

    [Display(Name = "Mail to me")]
    public bool SelfSend { get; set; }

    [Display(Name = "3rd party")]
    public bool thirdParty { get; set; }

    [Display(Name = "Others")]
    public bool Others { get; set; }
}

控制器

[ValidateAntiForgeryToken()]
[HttpPost]
public ActionResult Index(Customer customer)
{
    if (customer.Others == false || customer.SelfSend == false || customer.thirdParty == false)
        ModelState.AddModelError("Error", "Must select one option");

    return View();
}

使用下面的代码，我可以验证任何复选框是否从服务器端代码 select 编辑，并添加在客户端显示错误的模型错误。

但我想通过客户端使用普通数据注释进行验证。

查看我的剃须刀代码

<div class="row">
    <div class="col-md-8">
        <section id="testform">
            @using (Html.BeginForm("Index", "Customers", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
            {
                @Html.AntiForgeryToken()
                <h4>Enter customer info.</h4>
                <hr />
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group">
                    @Html.LabelFor(m => m.FirstName, new { @class = "col-md-2 control-label" })
                    <div class="col-md-10">
                        @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control" })
                        @Html.ValidationMessageFor(m => m.FirstName, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(m => m.LastName, new { @class = "col-md-2 control-label" })
                    <div class="col-md-10">
                        @Html.TextBoxFor(m => m.LastName, new { @class = "form-control" })
                        @Html.ValidationMessageFor(m => m.LastName, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <div class="checkbox">
                            @Html.CheckBoxFor(m => m.SelfSend)
                            @Html.LabelFor(m => m.SelfSend)
                        </div>
                    </div>

                    <div class="col-md-offset-2 col-md-10">
                        <div class="checkbox">
                            @Html.CheckBoxFor(m => m.thirdParty)
                            @Html.LabelFor(m => m.thirdParty)
                        </div>
                    </div>

                    <div class="col-md-offset-2 col-md-10">
                        <div class="checkbox">
                            @Html.CheckBoxFor(m => m.Others)
                            @Html.LabelFor(m => m.Others)
                        </div>
                    </div>
                    <div class="col-md-offset-2 col-md-10">
                        @Html.ValidationMessage("Error", "", new { @class = "text-danger" })
                    </div>
                    </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="Save" class="btn btn-default" />
                    </div>
                </div>

            }
        </section>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Answer 1

你可以尝试写一个客户模型验证属性。

在您的三个验证之一中添加 CheckBoxAuthAttribute 属性。

有一个方法protected virtual ValidationResult IsValid(object value, ValidationContext validationContext)你可以override inValidationAttribute.

public class CheckBoxAuthAttribute : ValidationAttribute
{
    public CheckBoxAuthAttribute(params string[] propertyNames)
    {
        this.PropertyNames = propertyNames;
    }

    public string[] PropertyNames { get; private set; }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        var properties = this.PropertyNames.Select(validationContext.ObjectType.GetProperty);
        var values = properties
                .Select(p => p.GetValue(validationContext.ObjectInstance, null))
                .OfType<bool>();

        if (values.Contains(true) || (bool)value == true)
        {
            return null;
        }
        return new ValidationResult(this.FormatErrorMessage(validationContext.DisplayName));
    }
}
public class Customer
{
    [Required]
    [Display(Name = "First Name")]
    public string FirstName { get; set; }

    [Required]
    [Display(Name = "Last Name")]
    public string LastName { get; set; }

    [Display(Name = "Mail to me")]
    [CheckBoxAuth("thirdParty", "Others", ErrorMessage = "Must select one option"))]
    public bool SelfSend { get; set; }

    [Display(Name = "3rd party")]
    public bool thirdParty { get; set; }

    [Display(Name = "Others")]
    public bool Others { get; set; }
}

Answer 2

由于您希望选择 3 个可能的选项之一，因此请使用单选按钮并绑定到具有必需属性的属性。

从定义视图模型开始

public class CustomerVM
{
    [Required]
    [Display(Name = "First Name")]
    public string FirstName { get; set; }
    [Required]
    [Display(Name = "Last Name")]
    public string LastName { get; set; }
    [Required]
    public int? Mailing { get; set; } // see notes below
}

并在视图中

@model CustomerVM
....
@using (Html.BeginForm())
{
    ....
    <label>
        @Html.RadioButtonFor(m => m.Mailing, 1, new { id = ""})
        <span>Mail to me</span>
    </label>
    <label>
        @Html.RadioButtonFor(m => m.Mailing, 2, new { id = ""})
        <span>3rd party</span>
    </label>
    .... // ditto for "Others"
    @Html.ValidationMessageFor(m => m.Mailing)
    ....
}

并且 POST 方法将是

[HttpPost]
public ActionResult Index(CustomerVM model)
{
    if(!ModelState.IsValid)
    {
        return View(model);
    }
    .... // map to instance of data model, save and redirect
}

请注意，如果这些选项不太可能更改，则将属性设为 enum 比 int 更合适，例如

public enum Mailing
{
    [Display(Name = "Mail to me")]
    SelfSend = 1,
    [Display(Name = "3rd party")]
    ThirdParty = 2,
    [Display(Name = "Others")]
    Others = 3
}

public class CustomerVM
{
    ....
    [Required]
    public Mailing? Mailing { get; set; }
}

视图代码为

@Html.RadioButtonFor(m => m.Mailing, Mailing.SelfSend, new { id = ""})

ASP.Net MVC：用户必须 select 一个复选框在客户端验证

ASP.Net MVC: User must select one check box validate at client side

asp.net-mvc

asp.net-validators

查看我的模型class

控制器

查看我的剃须刀代码