使用AngularJS的ASP.NET MVCvalidation表单

我在MVC 4和AngularJS(+ twitter引导)项目。 我通常在我的MVC项目中使用“jQuery.Validate”,“DataAnnotations”和“Razor”。 然后我在我的web.config中启用这些键来validation客户机上模型的属性:

<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有更多的function,比如:

 <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> 

那么具体呢。 我需要一些帮助或“数据注释”来parsing用于在客户端上使用AngularJS显示的属性(数据注解)。

如果它仍然不存在,也许是时候做,就像RazorForAngularJS一样

编辑

我想也许使用ASP.NET MVC和AngularJS最好的方法是手工完成( front-end )(手工编写所有的HTML)

作为一个创作了ASP.Net/Angular网站的人,我可以告诉你,你将会脱离使用Razor来渲染你的HTML。

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

其余完成在ASP.Net Web API调用在我的情况,但你也可以使用MVC行动与JSON结果。

只要我切换到这个架构,对我来说,事情发展更为顺利。

我赞同关于退出剃刀的一些想法,但是您可以创build一些工具来更快地创build页面。 恕我直言,最好是使用razor的function,而不是从工具箱中删除它们。

顺便说一句,看ngval 。 它将数据注释带到客户端作为angularjsvalidation器。 它有一个html助手和一个angular度模块。 我不得不提到这个项目正处于早期的发展阶段。

我写了一个指令,以平滑从MVC到AngularJs的过渡。 标记看起来像:

 <validated-input name="username" display="User Name" ng-model="model.username" required> 

其行为与Razor惯例相同,包括延迟validation,直到字段被修改。 随着时间的推移,我发现保持我的标记非常直观和简单。

我关于这个问题的文章

Plinkr

我想可能有六种方法可以做你想做的事情。 可能最简单的是使用一个能够识别jquery.validation标记的Angular指令。

这是一个这样的项目: https : //github.com/mdekrey/unobtrusive-angular-validation

还有另一个: https : //github.com/danicomas/angular-jquery-validate

我还没有尝试过,因为个人,我通过编写代码来使MVC输出angular度validation属性而不是jquery.validation.unobtrusive属性来解决此问题。

第三个select是仅依靠服务器端validation。 虽然这显然较慢,但对于更复杂的validation场景,这可能是您唯一的select。 在这种情况下,您只需编写javascript来parsingWeb API控制器通常返回的ModelStateDictionary对象。 在那里有一些例子,如何做到这一点,并将其集成到AngularJS的本地validation模型。

下面是parsingModelStateDictionary的一些不完整的代码:

““

 angular.module('app') .directive('joshServerValidate', ['$http', function ($http) { return { require: 'ngModel', link: function (scope, ele, attrs, c) { console.info('wiring up ' + attrs.ngModel + ' to controller ' + c.$name); scope.$watch('modelState', function () { if (scope.modelState == null) return; var modelStateKey = attrs.joshServerValidate || attrs.ngModel; modelStateKey = modelStateKey.replace(attrs.joshServerValidatePrefix, ''); modelStateKey = modelStateKey.replace('$index', scope.$index); modelStateKey = modelStateKey.replace('model.', ''); console.info('validation for ' + modelStateKey); if (scope.modelState[modelStateKey]) { c.$setValidity('server', false); c.$error.server = scope.modelState[modelStateKey]; } else { c.$setValidity('server', true); } }); } }; }]); 

““

我对这里提供的其他答案感到相当失望。 当你试图validation一些比电子邮件地址更难的东西时,“不要这么做”并不是一个很好的build议。

我认为这是一个问题,angular度的初学者会把(这是我怎么find的:)),这就是为什么我认为这是值得一个答案,也许解释了作者编辑,希望帮助那些问自己同样的问题,我种改写它:如何保持angular度validation和mvc模型validation之间的一致性?

要validation的模型字段从angular度视图 – >angular度控制器 – >angular度服务 – >到asp.webapi方法或者asp.mvc控制器动作,最终映射到一个mvc模型

这意味着,在所有这些(至less4台“投影仪”)上,您必须确保将您要使用razor的确切型号和字段进行转换。

所以我的意思是,有很多事情可能会影响你的一致性。

所以我同意:为客户端手动重写它们,并使用自动化testing来确保一致性