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混合将是......很难。

为了达到你想要的目标，我认为有人（不是我）必须将AngularJS等同于jQuery Unobtrusive Validation library，它本身正在使用jQuery Validate plugin。不是微不足道的。我个人并不认为很快就会发生插入式Angular验证，特别是因为它更多地与标记有关，而与JS配置对象关系不大。

当视图使用the $viewContentLoaded event完成加载时，您可以重新初始化验证。但请不要。

Answer 2

让我感到痛心无处不在我看起来得到了相同的回复：“HTML应该只是一个模板”。或许，但我还没准备好将所有内容委托给JavaScript

请尝试使用词典

，而不是使用匿名对象传递HTML属性

@Html.TextBoxFor(m => m.Name, new Dictionary<string, object>(){{ "data_ng_model",  "band.Name" }})

确保

Dictionary<string, object>

而不是

Dictionary<string, string>

否则构造函数会将其混淆为

object HtmlAttribute

虽然不是很漂亮......但它大部分都有用。

最后，请记住，如果在 jQuery之后包含AngularJS ，那么它将使用jQuery作为选择器。

Answer 3

对于仍在寻找此问题解决方案的人来说，有一种简单的方法可以使其发挥作用。

    var currForm = $("#myForm");
currForm.removeData("validator");
currForm.removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(currForm);
currForm.validate();

您可以将此代码放在$ viewContentLoaded或其他与您的代码相关的地方。

虽然我理解这里的一些观点，不鼓励将MVC视图用作Angular代码的模板。我的理由是它不是一种自然的角度做事方式，因此有可能遇到像这样的问题。但是如果你从使用MVC视图作为模板中受益，它就不是通往地狱的途径。它可以工作，也可以使您受益。我的项目中有2个用例，使用MVC视图很有意义。

我的项目实际上有一个要求客户端可以在某些字段上转换所需的验证，为此我使用MVC自定义数据注释验证器，它允许我在渲染视图时添加或删除数据注释一个单独的类，如果要在angular中构建相同的灵活性，则必须编写更多代码。因此，MVC视图对我来说很有用，因为DisplayFor和EditorFor助手会触发自定义数据注释
我们在国际化方面投入了大量资金，而在其他方面也很有实力。国际化不是它强大的套件（在撰写本文时至少）我仍然觉得MVC的国际化支持与.RESX一起工作很好并且在这里很长。这再次使用了DisplayAttribute的数据注释功能。

TLDR：作为模板的MVC视图可能会给您带来一些意想不到的问题，但如果您真正使用Microsoft创建的数据注释管道的全部功能，那么它们是值得的。

希望将来有人想出一个Angular HTML Helpers库，这会更加简单。

Answer 4

使用Angular进行验证可能比您想象的要痛苦少。使用几个自定义指令，您可以轻松地获得与Razor非常接近的标记，标记简单如下：

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

查看我的示例here及其灵感here。它目前只实现了必需和数量，但定制它应该很容易。

Answer 5

您可以使用ngval库。它将数据注释作为angularjs验证指令提供给客户端。

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

5 个答案: