ASP.NET C＃使用Validation Attribute实现客户端验证

Question

我直截了当地说到这里。 我试图在客户端实现我的服务器端验证。 我对此非常陌生，所以请耐心等待。

我已尝试在服务器端进行验证，但效果非常好，但当我在我的视图中添加jqueryval时，它不再进行自定义验证。

这是我的代码：

模型

  public class AgentViewModel : AgentModel
    {
        [Required]
        [FileSize(10240)]
        [FileTypes("jpg,jpeg,png")]
        public HttpPostedFileBase photo { get; set; }
        public List<ProvinceModel> Provinces { get; set; }
        public List<CityModel> Cities { get; set; }
    }

自定义验证

 public class FileTypesAttribute : ValidationAttribute
    {
        private readonly List<string> _types;

        public FileTypesAttribute(string types)
        {
            _types = types.Split(',').ToList();
        }

        public override bool IsValid(object value)
        {
            if (value == null) return true;

            var fileExt = System.IO.Path.GetExtension((value as HttpPostedFileBase).FileName).Substring(1);
            return _types.Contains(fileExt, StringComparer.OrdinalIgnoreCase);
        }

        public override string FormatErrorMessage(string name)
        {
            return string.Format("Invalid file type. Only the following types {0} are supported.", String.Join(", ", _types));
        }
    }

查看

@using (Html.BeginForm("Save", "Agent", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {

        <div class="row">
            <div class="col-md-3">
                <div id="preview">
                    <img src="~/Content/Assets/no-image.png" id="profile_image" class="img-thumbnail" />
                </div>
                <div class="form-group">
                    @Html.TextBoxFor(m => m.photo, new { @class = "form-control", type = "file" })
                    @Html.ValidationMessageFor(m => m.photo)
                </div>
            </div>
            <div class="col-md-9">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            @Html.LabelFor(m => m.FirstName)
                            @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control" })
                            @Html.ValidationMessageFor(m => m.FirstName)
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            @Html.LabelFor(m => m.MiddleName)
                            @Html.TextBoxFor(m => m.MiddleName, new { @class = "form-control" })
                            @Html.ValidationMessageFor(m => m.MiddleName)
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            @Html.LabelFor(m => m.LastName)
                            @Html.TextBoxFor(m => m.LastName, new { @class = "form-control" })
                            @Html.ValidationMessageFor(m => m.LastName)
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="row">
                            <div class="col-md-12">
                                @Html.LabelFor(m => m.ProvinceID)
                                @Html.DropDownListFor(m => m.ProvinceID, new SelectList(Model.Provinces, "ProvinceID", "Description"), "Select Province", new { @class = "form-control province" })
                                @Html.ValidationMessageFor(m => m.ProvinceID)
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="row">
                            <div class="col-md-12">
                                @Html.LabelFor(m => m.CityID)
                                @Html.DropDownListFor(m => m.CityID, new SelectList(Model.Cities, "CityID", "Description"), "Select City", new { @class = "form-control city" })
                                @Html.ValidationMessageFor(m => m.CityID)
                            </div>
                        </div>
                    </div>
                </div>
                <br />
                <div class="row">
                    <div class="col-md-4">
                        <div class="row">
                            <div class="col-md-12">
                                @Html.LabelFor(m => m.Street)
                                @Html.TextBoxFor(m => m.Street, new { @class = "form-control" })
                                @Html.ValidationMessageFor(m => m.Street)
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="row">
                            <div class="col-md-12">
                                @Html.LabelFor(m => m.ContactNumber)
                                @Html.TextBoxFor(m => m.ContactNumber, new { @class = "form-control" })
                                @Html.ValidationMessageFor(m => m.ContactNumber)
                            </div>
                        </div>
                    </div>
                </div>
                <br />
                <div class="row">
                    <div class="col-md-4">
                        <div class="row">
                            <div class="col-md-12">
                                @Html.LabelFor(m => m.Employer)
                                @Html.TextBoxFor(m => m.Employer, new { @class = "form-control" })
                                @Html.ValidationMessageFor(m => m.Employer)
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="row">
                            <div class="col-md-12">
                                @Html.LabelFor(m => m.EmployerContactNumber)
                                @Html.TextBoxFor(m => m.EmployerContactNumber, new { @class = "form-control" })
                                @Html.ValidationMessageFor(m => m.EmployerContactNumber)
                            </div>
                        </div>
                    </div>
                </div>
                <br />
                <div class="row">
                    <div class="col-md-4">
                        <div class="row">
                            <div class="col-md-12">
                                @Html.LabelFor(m => m.MonthlyIncome)
                                @Html.TextBoxFor(m => m.MonthlyIncome, new { @class = "form-control", @type = "number" })
                                @Html.ValidationMessageFor(m => m.MonthlyIncome)
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr />
        <div class="row">
            <div class="col-md-9">
                <div class="pull-right">
                    @Html.AntiForgeryToken()
                    @Html.HiddenFor(m => m.AgentID)
                    <a href="@Url.Action("Index","Agent")" class="btn btn-default">Cancel</a>
                    <button type="submit" class="@(Model.IsNew ? "btn  btn-primary" : "btn btn-success")">@(Model.IsNew ? "Save" : "Update")</button>
                </div>
            </div>
        </div>


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

当我在jqueryval和FileTypes上添加FileSize验证时，我的工作不再有效......我猜测它无法读取{{1} }和FileTypes验证。

提前致谢。