使用AngularJS的ASP.NET MVC验证表单

Question

我正在使用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)

Answer 1

作为一个撰写ASP.Net/Angular网站的人,我可以告诉你,如果你不想使用Razor来渲染你的HTML,你会更好.

在我的项目中,我设置了一个剃刀视图来渲染我的主页面(我使用的是一个用Angular编写的单页面应用程序),然后我有一个直接.html文件的文件夹,我用它作为我的Angular模板.

其余部分在我的情况下在ASP.Net Web API调用中完成,但您也可以使用带有JSON结果的MVC操作.

一旦我切换到这个架构,对我来说事情变得更顺利,发展明智.

Answer 2

我同意关于离开剃刀的肉体想法,但你可以创建一些工具来更快地创建页面.恕我直言,最好在他们需要的地方使用剃刀功能,而不是从工具箱中删除它.

BTW看看ngval.它将数据注释作为angularjs验证器提供给客户端.它有一个html帮助器和一个角度模块.我必须提到该项目处于早期开发阶段.