Asp.net MVCを使用したAngularjsとサーバー側の検証によるクライアント側の検証

Question

Asp.net MVCでAngularjsを使用しています。私がAngularjsで新しくなったので、私はMVCでそれを使用するいくつかの問題に直面しています。現在私はフォームを検証したいと思っています。私が使用しています -

1.Forクライアント側：Angularjs

2.Forサーバー側：データアノテーションを使用して

• Asp.net MVCのデフォルトの検証技術を。
• は、フォーム送信後にModelState IsValidをチェックします。

ModelState.IsValidは各HTML要素の名前タグが私のモデルのプロパティ名とまったく同じであるときにのみ働いています。

anglejを持つMVCを使用しているときに、大きなフォームにコントロールがあり、nameタグがそれぞれのプロパティ名と同じになるように各要素を管理する必要がある場合など、私のモデル。

マイ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) 

このようにして、名前については気にしません。 IntelliSenseはすべての作業を行います。