ASP.NET MVC验证形成AngularJS [英] ASP.NET MVC Validation form with AngularJS

问题描述

我在MVC 4和AngularJS（+ Twitter的引导）的项目。我通常在我的MVC项目中使用jQuery.Validate，DataAnnotations和剃刀。然后，我能够在我的web.config这些键在客户端验证模型的属性：

I'm with a project in MVC 4 and AngularJS (+ twitter bootstrap). I usually use in my MVC projects "jQuery.Validate", "DataAnnotations" and "Razor". Then I enable these keys in my web.config to validate properties of model on the client:

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

例如，如果我有在我的模型是：

For example if I have in my model this:

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

有了这个CSHTML：

With this Cshtml:

@Html.LabelFor(model => model.Name)
@Html.TextBoxFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)

HTML结果将：

The html result would:

<label for="Name">Your name</label>
<input data-val="true" data-val-required="The field Your name is required." id="Name" name="Name" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>

但现在，当我使用AngularJS，我想也许呈现这样的：

But now when I use AngularJS, I want to render maybe like this:

<label for="Name">Your name</label>
<input type="text" ng-model="Name" id="Name" name="Name" required />
<div ng-show="form.Name.$invalid">
   <span ng-show="form.Name.$error.required">The field Your name is required</span>
</div>

我不知道是否有任何帮助或数据注解来解决这个问题。据我所知，AngularJS拥有更多的功能，如：

I do not know if there are any helper or "Data Annotation" to resolve this. I understand that AngularJS has many more features like:

<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
    <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
    <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>

好了，具体。我需要一些帮手或数据注解与AngularJS解决客户端上的属性（数据注解）显示。

Well, specifically. I need some helper or "Data Annotation" to resolve the attributes (Data Annotation) for display on the client with AngularJS.

如果它仍然不存在，也许是时候做的，像RazorForAngularJS

If it still does not exist, perhaps it is time to do, like RazorForAngularJS

修改

我想也许与ASP.NET MVC和AngularJS的工作最好的办法是这样做（前端）手动（手写所有的HTML）

I think perhaps the best way to work with ASP.NET MVC and AngularJS is do it (front-end) by hand (writing all the HTML by hand)

推荐答案

至于有人说是创作的ASP.Net/Angular网站，我可以告诉你，你将是更好的方式了使用剃刀渲染踏步而去你的HTML，你可以。

As someone that's authored an ASP.Net/Angular website, I can tell you that you're going to be way better off stepping away from using Razor to render your HTML where you can.

在我的项目，我设置一个剃须刀观点来呈现我的主网页（我用写在角单页的应用程序），那么我直.html文件的文件夹，我为我的模板使用棱角分明。

In my projects I've set up one razor view to render my main page (I'm using a single page app written in Angular), then I have a folder of straight .html files that I use as my templates for Angular.

剩下的就是在我的情况ASP.Net的Web API调用完成，但你也可以使用MVC行动JSON结果。

The rest is done in ASP.Net Web API calls in my case, but you can also use MVC action with JSON results.

当我切换到这个架构，事情发生了很多更顺畅对我来说，发展明智的。

As soon as I switched to this architecture, things went a lot more smoothly for me, development wise.

这篇关于ASP.NET MVC验证形成AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！