使用 WebApi 进行客户端验证答案

【问题标题】：Client Side Validation with WebApi使用 WebApi 进行客户端验证
【发布时间】：2012-12-06 09:50:17
【问题描述】：

我正在尝试对通过 WebApi 返回的对象执行客户端验证。我通过 webapi 将实体发送到我的实体编辑屏幕。我使用敲除将对象绑定到字段。

我已经有一个处理所有服务器端验证的操作过滤器。如何在不必复制域模型数据注释的情况下合并客户端验证？

【问题讨论】：

标签： asp.net-mvc entity-framework validation asp.net-web-api

【解决方案1】：

使用 WebApi，您需要一些“粘合”代码来将模型验证失败返回的错误连接到客户端验证器。

function extractErrors(jqXhr, validator) {
    var data = JSON.parse(jqXhr.responseText), // parse the response into a JavaScript object
        errors = {};

    $.each(data.ModelState, function (key, value) {
        var pieces = key.split('.');
        key = pieces[pieces.length - 1];
        errors[key] = value
    });

    validator.showErrors(errors); // show the errors using the validator object
}

在模型上，照常注释：

[Required]
[Display(Name = "Group Name")]
public string Name { get; set; }

在视图中，添加 ValidationMessageFor 标签：

@Html.EditorFor(m => m.Name)
@Html.ValidationMessageFor(m => m.Name)

【讨论】：

感谢菲利普的回复。在向用户显示任何验证之前，这仍然需要服务器端往返。使用 [Required] 属性，您不会看到它添加到您的错误变量中，直到它在服务器上失败。除非我误解了您的解决方案，或者无法解释我的问题。
是的，它确实将值发布到服务器，并返回一个 json 字符串。就我而言，我的表单并不大，所以我得到了客户端“点赞”的表现和客户端“点赞”的行为，没有明显的回传。在具有 10 次验证的小型表单上，服务器行程成本：本地访问开发服务器的 1/100 秒。从公司 LAN 访问 AWS 云服务器的时间为 1/10 秒。这是针对企业 LOB 类型的应用程序，可能不适合移动/慢速连接。在我的例子中，通过注释模型来控制验证是值得一试的，并且使开发更简洁、更快捷。
感谢您提供的额外信息，这实际上很有帮助。不幸的是，我们的一些表单可能非常复杂（例如，最坏的情况是 50-100 个表单字段，因为我们正在开发交易金融系统），可能不是最好的设计，但我们的业务决定了这一点。我们将获得大约 300-400 毫秒的 Azure 往返行程。
你有机会压缩 JSON 吗？在 Fiddler 中观看流量，它可能已经被压缩了。如果没有，请查看hanselman.com/blog/…

【解决方案2】：

当我创建我的 HTTP API 时，我将模型对象（DTO、请求模型等）放入一个单独的程序集中，我可以为 .NET 客户端分发该程序集。

考虑以下类：

public abstract class UserUpdateRequestModel {

    [Required]
    [StringLength(50)]
    public string Name { get; set; }

    [Required]
    [EmailAddress]
    [StringLength(320)]
    public string Email { get; set; }
}

这是我在 API 中使用的：

public UserDto PutUser(Guid key, UserUpdateRequestModel requestModel) {

    // Do something here
}

您可以在 ASP.NET MVC 客户端应用程序中使用相同的模型，例如生成带有验证 data- 属性的 HTML 输入，因为 ASP.NET MVC 有一种基于数据注释验证属性生成这些输入的方法。

【讨论】：

所以你会在 webapi 响应中添加某种元数据对象（其中包含验证属性）？您将如何创建客户端代码？
@kpore 如果你打算使用 ASP.NET MVC，它有一种创建这些的方法。例如TextBoxFor html 辅助方法。看看：asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/…
感谢您的回复。我实际上没有使用 MVC。我正在使用 WebApi 进行所有的通信和持久性。 HTML Helpers 仅适用于您使用经典 MVC 控制器时。