我在我的MVC应用程序中使用AngularJS并尝试使用两者中最好的.我非常希望你能在MVC中在viewmodels中设置验证逻辑,并在剃须刀视图中轻松地使用jQuery验证生成客户端验证.我使用AngularJS来获取路由等的SPA行为,但是当我创建一个剃刀视图时,我用它来注入一个页面：
< div data-ng-view =“data-ng-view”>< / div>
< div data-ng-view =“data-ng-view”>< / div>
然后jQuery验证停止工作,即使脚本文件是注入视图的页面上的引用.请参阅下面的剃刀视图：
@model Bandviewmodel <div data-ng-controller="App.BandCreateCtrl"> <form name="startBandForm"> @Html.ValidationSummary(true) <br /> @Html.LabelFor(m => m.Name) @Html.TextBoxFor(m => m.Name,new { data_ng_model = "band.Name" }) @Html.ValidationMessageFor(m => m.Name) <br/> <input data-ng-disabled="startBandForm.$invalid" type="submit" data-ng-click="createBand(band)" value="Create"/> </form> </div>
解决方法
首先,使用Razor渲染模板的IMO充其量只是充满了危险.通常,您希望为页面和指令模板使用静态HTML,然后检索并将数据作为AJAX发布到API.实际上,ASP.NET Web API非常擅长这一点.如果底层模型有验证,那么错误的Web API调用将抛出异常,您可以在$http或$resource处理程序中捕获该异常并向用户显示.将标准HTTP表单帖子与AngularJS混合将很难.
为了达到你想要的效果,我认为有人(不是我)必须编写相当于jQuery Unobtrusive Validation library的AngularJS,它本身使用的是jQuery Validate plugin.这不是一件容易的事.我个人并不认为很快就会出现插件角度验证,特别是因为它更多地与标记有关,而与JS配置对象关系不大.
可能您可以在视图使用the $viewContentLoaded event加载完成后重新初始化验证.但请不要.
