如何在视图 Model 中使用 Html 验证从客户端验证？

Question

我只是 razor 的新手。 在使用 Html 标签助手时，我意识到验证是从 ViewModel 完成的。 我的代码看起来像：-

   @using (Html.BeginForm("UpdateServiceClientInformation", "contracts", new { id = Model.Id }, FormMethod.Post, new { role = "form" }))
                                        {
                                            <div id="clientInformationInputsWrapper">
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            @Html.LabelFor(m => m.Client.FirstName)
                                                            @Html.TextBoxFor(m => m.Client.FirstName, new { @class = "form-control" })
                                                            @Html.ValidationMessageFor(m => m.Client.FirstName, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            @Html.LabelFor(m => m.Client.LastName)
                                                            @Html.TextBoxFor(m => m.Client.LastName, new { @class = "form-control" })
                                                            @Html.ValidationMessageFor(m => m.Client.LastName, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>

                                                </div>

                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            @Html.LabelFor(m => m.Client.Phone)
                                                            @Html.TextBoxFor(m => m.Client.Phone, new { @class = "form-control", @placeholder = "5555555555" })
                                                            @Html.ValidationMessageFor(m => m.Client.Phone, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            @Html.LabelFor(m => m.Client.Email)
                                                            @Html.TextBoxFor(m => m.Client.Email, new { @class = "form-control", @placeholder = "example@mail.com" })
                                                            @Html.ValidationMessageFor(m => m.Client.Email, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            @Html.LabelFor(m => m.Client.StreetOne)
                                                            @Html.TextBoxFor(m => m.Client.StreetOne, new { @class = "form-control" })
                                                            @Html.ValidationMessageFor(m => m.Client.StreetOne, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            @Html.LabelFor(m => m.Client.AptSuite)
                                                            @Html.TextBoxFor(m => m.Client.AptSuite, new { @class = "form-control" })
                                                            @Html.ValidationMessageFor(m => m.Client.AptSuite, "", new { @class = "text-danger" })

                                                        </div>
                                                    </div>

                                                </div>

                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            @Html.LabelFor(m => m.Client.City)
                                                            @Html.TextBoxFor(m => m.Client.City, new { @class = "form-control" })
                                                            @Html.ValidationMessageFor(m => m.Client.City, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            @Html.LabelFor(m => m.Client.State)
                                                            @Html.DropDownListFor(m => m.Client.State, statesList, new { @class = "form-control" })
                                                            @Html.ValidationMessageFor(m => m.Client.State, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-sm-3">
                                                        <div class="form-group">
                                                            @Html.LabelFor(m => m.Client.Zip)
                                                            @Html.TextBoxFor(m => m.Client.Zip, new { @class = "form-control" })
                                                            @Html.ValidationMessageFor(m => m.Client.Zip, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <input type="submit" class="btn btn-sm btn-primary pull-right" value="Save Changes" />

                                        }

我的观点 Model 看起来像：-

  public class ServiceClientViewModel
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Phone { get; set; }
        public string Email { get; set; }
        public string StreetOne { get; set; }
        public string StreetTwo { get; set; }
        public string AptSuite { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string Zip { get; set; }
        public string Notes { get; set; }
    }

我从视图 Model 所需的验证是：-

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

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

        [Required, Display(Name = "Phone"), RegularExpression(RegexConstants.PhoneNumber, ErrorMessage = RegexConstants.PhoneNumbermessage)]
        public string Phone { get; set; }

        [Display(Name = "Email"), DataType(DataType.EmailAddress)]
        public string Email { get; set; }

        [Required, Display(Name = "Street 1")]
        public string StreetOne { get; set; }

        //[Display(Name = "Street 2")]
        //public string StreetTwo { get; set; }

        [Display(Name = "Apt/Suite#")] //Required,
        public string AptSuite { get; set; }

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

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

        [Required, Display(Name = "Zip"), RegularExpression(RegexConstants.ZipCode, ErrorMessage = RegexConstants.ZipCodeMessage)]
        public string Zip { get; set; }

        [Display(Name = "Ticket #")]
        public string Notes { get; set; }

        [Display(Name = "Company Contact Information")]
        public string DeviceRegistrationInformation { get; set; }


        [Display(Name = "System Information (Panel Type, Installer Code, etc)")]
        public string SpecialInstruction { get; set; }
    }

但是我不能在cshtml页面中使用第二个视图model（ServiceClientFormViewModel），但我需要像那样验证。 我们应该怎么做？

Answer 1

Razor应该是ServiceClientFormViewModel并且应该在页面底部使用

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