客户端验证与Angularjs和服务器端验证与Asp.net MVC

Question

我正在使用Angularjs与Asp.net MVC。由于我是Angularjs中的新成员，因此我正面临着与MVC一起使用它的一些问题。目前我想验证一个表单。我使用 -

1.对于客户端：Angularjs

2.对于服务器端：

• Asp.net MVC使用数据标注默认验证TECHNIC。
• 将在表单提交后检查ModelState IsValid。

ModelState.IsValid工作，只有当每个HTML元素的名称标签是完全一样的我的模型的属性名称。

是否有任何其他方式进行服务器端验证，同时使用MVC与angularjs，因为当我们有一个大表格充满控件，然后我们必须照顾每个元素，以便名称标记保持与相应的属性名称相同我的模型。

我的HTML：

@model AngularMVC.Models.StudentModel 
    @{ 
     ViewBag.Title = "student"; 
    } 

    @using (Html.BeginForm("Submit", "Test", FormMethod.Post, new { name = "addstudent" })) 
    { 

     <div class="row"> 
      <section> 
       <div class="form-group"> 
        <div class="col-md-2">Name:</div> 
        <div class="col-md-10"> 
         <div class="col-md-4"> 
          <input class="form-control" name="Name" id="Name" type="text" placeholder="Enter Name" ng-model="Name" ng-required="true" /> 
         </div> 
         <div class="col-md-4"> 
          <span style="color:red" ng-show="addstudent.Name.$invalid"> 
           <span ng-show="addstudent.Name.$dirty && addstudent.Name.$invalid">Name is required.</span> 
          </span> 
         </div> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-md-2">Mobile Number:</div> 
        <div class="col-md-10"> 
         <div class="col-md-4"> 
          <input class="form-control" type="text" placeholder="Enter Mobile Number" name="MobileNumber" ng-model="MobileNumber" ng-pattern="/^\d{0,9}(\.\d{1,9})?$/" /> 
         </div> 
         <div class="col-md-4"> 
          <span style="color:red" ng-show="addstudent.MobileNumber.$invalid"> 
           <span ng-show="addstudent.MobileNumber.$dirty && addstudent.MobileNumber.$invalid">Mobile number is required.</span> 
           <span ng-show="addstudent.MobileNumber.$dirty && addstudent.MobileNumber.$error.pattern">Not a valid mobile number!</span> 
          </span> 
         </div> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-md-2">Email:</div> 
        <div class="col-md-10"> 
         <div class="col-md-4"> 
          <input class="form-control" type="email" name="EmailAddress" placeholder="Enter email" ng-model="email" /> 
         </div> 
         <div class="col-md-4"> 
          <span style="color:red" ng-show="addstudent.EmailAddress.$invalid"> 
           <span ng-show="addstudent.EmailAddress.$dirty && addstudent.EmailAddress.$invalid">email is required.</span> 
           <span ng-show="addstudent.EmailAddress.$dirty && addstudent.EmailAddress.$error.pattern">Not a valid email address!</span> 
          </span> 
         </div> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-md-2">Address:</div> 
        <div class="col-md-10"> 
         <div class="col-md-4"> 
          <input class="form-control" type="text" placeholder="Enter Addess" name="Address" ng-model="address" ng-required="true" /> 
         </div> 
         <div class="col-md-4"> 
          <span style="color:red" ng-show="addstudent.Address.$invalid"> 
           <span ng-show="addstudent.Address.$dirty && addstudent.Address.$invalid">Address is required.</span> 
          </span> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-12"> 
        <div class="form-group"> 
         <div class="col-md-offset-2 col-md-10"> 
          <input type="submit" value="Add Student" class="btn btn-default" /> 
         </div> 
        </div> 
       </div> 
      </section> 
     </div> 

    } 
    <script src="~/Scripts/ng-module.js"></script> 

学生型号：

public class StudentModel 
    { 
     public int Id { get; set; } 

     [Required] 
     public string Name { get; set; } 

     [RegularExpression(@"/^\d{0,9}(\.\d{1,9})?$/")] 
     public long MobileNumber { get; set; } 

     [RegularExpression("^[a-zA-Z0-9_\\.-]+@([a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,6}$")] 
     public string EmailAddress { get; set; } 

     [Required] 
     public string Address { get; set; } 
    } 

Answer 1

而不是

input class="form-control" name="Name" 

可以使用

@Html.TextBoxFor(r=>r.Name) 

这样，你就不会在意名称。智能感知将为您完成所有工作。