帶有 AngularJS 的 ASP.NET MVC 驗證表單

我在 MVC 4 和 AngularJS (+ twitter bootstrap) 中有一個項目。我通常在我的 MVC 項目中使用“jQuery.Validate”、“DataAnnotations”和“Razor”。然後我在 web.config 中啟用這些鍵來驗證客戶端上模型的屬性：

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

例如，如果我的模型中有這個：

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

使用這個 Cshtml：

@Html.LabelFor(model => model.Name)
@Html.TextBoxFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)

html結果將：

<label for="Name">Your name</label>
<input data-val="true" data-val-required="The field Your name is required." id="Name" name="Name" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>

但是現在當我使用 AngularJS 時，我想渲染可能是這樣的：

<label for="Name">Your name</label>
<input type="text" ng-model="Name" id="Name" name="Name" required />
<div ng-show="form.Name.$invalid">
  <span ng-show="form.Name.$error.required">The field Your name is required</span>
</div>

我不知道是否有任何幫助或“數據註釋”來解決這個問題。我了解 AngularJS 具有更多功能，例如：

<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
   <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
   <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>

嗯，具體來說。我需要一些幫助器或“數據註釋”來解析屬性（數據註釋），以便使用 AngularJS 在客戶端上顯示。

如果它仍然不存在，也許是時候這樣做了，比如 RazorForAngularJS

編輯

我認為使用 ASP.NET MVC 和 AngularJS 的最佳方式可能是手工完成（front-end）（手工編寫所有 HTML）

作為編寫 ASP.Net/Angular 網站的人，我可以告訴您，如果您不再使用 Razor 來呈現您的 HTML，那麼您會更好。

在我的項目中，我設置了一個 razor 視圖來呈現我的首頁（我使用的是用 Angular 編寫的單頁應用程序），然後我有一個包含直接 .html 文件的文件夾，用作 Angular 的模板。

在我的例子中，其餘部分是在 ASP.Net Web API 呼叫中完成的，但您也可以將 MVC 操作與 JSON 結果一起使用。

一旦我切換到這個架構，事情對我來說就順利多了，開發方面。

引用自：https://stackoverflow.com/questions/15046817