如何从客户端使用HTML验证而不在View Model中进行验证?

问题描述

我是剃刀新手。使用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,@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" />

                                        }

“我的视图模型”如下所示:-

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

和我从View 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页面中使用第二视图模型(ServiceClientFormviewmodel),但是我需要像这样进行验证。我们该怎么做?

解决方法

Razor页面顶部的模型应为ServiceClientFormViewModel,而页面底部应使用

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