6

我在我的 MVC 应用程序中使用 AngularJS 并尝试使用两全其美。我真的很喜欢在 MVC 中如何在视图模型中设置验证逻辑，并通过 jQuery 验证在 Razor 视图中轻松生成客户端验证。我使用 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>
4

5 回答 5

7

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

为了实现你想要的，我认为有人（不是我）必须编写与jQuery Unobtrusive Validation library等效的 AngularJS ，它本身正在使用jQuery Validate 插件。不是微不足道的。我个人认为不会很快出现插入式 Angular 验证，特别是因为它更多地与标记有关，而与 JS 配置对象的关系较少。

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

于 2013-06-09T21:12:59.630 回答
4

让我很痛苦的是，我所看到的每一个地方都得到了相同的答复：“HTML 应该只是一个模板”。也许吧，但我还没有准备好将一切都委托给 JavaScript

不要使用匿名对象来传递 HTML 属性，而是尝试使用 Dictionary

@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 作为选择器。

于 2013-10-30T22:45:41.147 回答
4

对于仍在寻找解决此问题的方法的任何人，有一种简单的方法可以使其工作。

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

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

虽然我理解这里的一些视图不鼓励将 MVC 视图用作 Angular 代码的模板。我的原因是它不是一种以角度做事的自然方式，因此您可能会遇到这样的问题。但是，如果您从使用 MVC 视图作为模板中受益，那么它并不是一条通往地狱的道路。IT 有效，也可以使您受益。我的项目中有 2 个用例，其中使用 MVC 视图很有意义。

  1. 我的项目实际上有一个要求，客户可以在某些字段上打开所需的验证，为此我使用 MVC 自定义数据注释验证器，它允许我在使用单个类呈现视图时添加或删除数据注释，如果要在 angular 中构建相同的灵活性，则必须编写更多代码。所以 MVC 视图对我来说非常有用，因为自定义数据注释是由 DisplayFor 和 EditorFor 助手触发的
  2. 我们在国际化方面投入了大量资金，虽然 Angular 在其他方面很出色，但国际化并不是它的强大套件（至少在撰写本文时），我仍然觉得 MVC 中的 .RESX 国际化支持效果很好，并且已经存在很长时间了。这再次使用了 DisplayAttribute 的数据注释功能。

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

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

于 2015-06-05T11:42:59.800 回答
1

也许使用 Angular 进行验证可能没有你想象的那么痛苦。使用几个自定义指令，您可以轻松获得非常接近 Razor 的内容，其标记非常简单，如下所示：

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

在这里查看我的示例及其灵感。它目前只实现 required 和 number ，但自定义它应该很容易。

于 2013-11-05T10:21:03.813 回答
1

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

于 2014-01-03T10:14:47.633 回答