使用带有angularJS的jQuery验证的剃刀视图

Question

我在我的MVC应用程序中使用AngularJS并尝试使用两者中最好的.我非常希望你能在MVC中在viewmodels中设置验证逻辑,并在剃须刀视图中轻松地使用jQuery验证生成客户端验证.我使用AngularJS来获取路由等的SPA行为,但是当我创建一个剃刀视图时,我用它来注入一个页面: <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>

Answer 1

首先,使用Razor渲染模板的IMO充其量只是充满了危险.通常,您希望为页面和指令模板使用静态HTML,然后检索并将数据作为AJAX发布到API.实际上,ASP.NET Web API非常擅长这一点.如果底层模型有验证,那么错误的Web API调用将抛出异常,您可以在$ http或$ resource处理程序中捕获该异常并向用户显示.将标准HTTP表单帖子与AngularJS混合将很难.

为了实现你想要的,我认为有人(不是我)必须编写与jQuery Unobtrusive Validation库等效的AngularJS ,它本身使用的是jQuery Validate插件.不是微不足道的.我个人并不认为很快就会出现插件角度验证,特别是因为它更多地与标记有关,而与JS配置对象关系不大.

可能您可以在视图使用$ viewContentLoaded事件加载完成后重新初始化验证.但请不要.