2016-09-28 173 views
1

我正在使用Angularjs與Asp.net MVC。由於我是Angularjs中的新成員,因此我正面臨着與MVC一起使用它的一些問題。目前我想驗證一個表單。我使用 -客戶端驗證與Angularjs和服務器端驗證與Asp.net 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_\\.-][email protected]([a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,6}$")] 
     public string EmailAddress { get; set; } 

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

如果您使用的是AngularJs,最好在服務器端使用WebAPI併發送來自AngularJs的發佈請求。我認爲它提供了更多的可能性來使用$ http或$ resource來發出AJAX請求,而不是使用AngularJs和ASP.NET MVC的混合。 –

+0

@CarlesCompany是一個很好的觀點。保持你的服務器端驗證,因爲你需要一個gaurd抵禦任何流程角度,但有你的用戶友好的驗證,包括消息等純粹在用戶界面使用角度。此外,切換到所有數據調用的Web API並僅使用MVC提供以html爲中心的視圖是一個好主意。 – Igor

+0

我有我的服務器端驗證,但我關心的是我在這裏遵循的過程是唯一的過程?有沒有更好的解決方案? – Anadi

回答

0

而不是

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

可以使用

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

這樣,你就不會在意名稱。智能感知將爲您完成所有工作。