如何利用客户端编程(如jsRender)来利用服务器端数据注释

时间:2012-08-13 18:34:04

标签: asp.net-mvc-4 data-annotations asp.net-web-api jsrender

在我们在MVC4中使用WebAPI之前和jsRender转为beta之前,我们使用服务器端编程生成表单。也就是说,在视图模型上添加数据注释,然后生成包含大量@Html.EditorFor@Html.LabelFor的表单。 (如果你是MVC程序员,你知道我的意思。)然后jQuery验证将帮助我们在客户端进行数据验证,DataAnnotation属性通过检查Model.IsValid来完成服务器端的工作。 。一切都很好。

现在我们有WebAPI。大多数示例都是使用Javascript将Ajax调用到WebAPI操作,以便在服务器和客户端之间传输表单数据(主要是在json中)。 jsRender(或其他类型的模板库)用于显示数据。

我喜欢进行Ajax调用以避免不必要的整页呈现。但主要的困难在于,由于表单是作为模板准备的,它与客户端的数据绑定,因此无法将DataAnnotation等服务器端技术与jQuery验证结合起来。我们无法使用@Html.EditorFor生成模板。看来我们在MVC3中失去了许多好处。

那么,你们如何处理这个问题呢?您是否完全转储服务器端技术并在模板中写出所有内容以供客户端使用?

如果我们只能在客户端做所有事情,我们如何才能使用jQuery验证?我们手动添加这些data-val-xxx代码吗?

感谢您提出任何建议。

2 个答案:

答案 0 :(得分:1)

对ASP.NET MVC采用AJAX方法排除使用ASP.NET验证功能。但是,您必须编写自己的服务器端和客户端体系结构来处理这些情况。基本上,您希望Web API能够为任何方法抛出验证消息。此外,您希望您的客户端JavaScript能够随时处理这些消息。

在我正在开发的ASP.NET MVC + Knockout应用程序中,我正在这样做。它涉及:

  • 服务器侧即可。自定义ActionFilterAttribute,用于将模型验证错误转换为JSON
  • 客户端即可。一些JavaScript技巧来解释验证错误。

在我对服务器进行的每次REST调用中,我都会在返回时检查HTTP状态代码。 200表示成功,应用程序正常进行。 400表示错误请求,表示返回了一条或多条验证消息。

如果是400,则响应正文包含一个包含所有验证消息的JSON数组。这些消息是简单的元组,包含input元素的名称和错误消息。

我添加了一个新的data-val-server属性,该属性始终使其设置的输入元素无效。我从服务器获得的数据告诉我要放置属性的元素。属性的值是也来自服务器的错误消息。之后,我只是启动客户端验证,它将解析表单,使表单无效并查看相应的消息。

答案 1 :(得分:0)