带有 AngularJS 的 ASP.NET MVC 验证表单 [英] ASP.NET MVC Validation form with AngularJS

问题描述

我在 MVC 4 和 AngularJS(+ twitter bootstrap)中有一个项目.我通常在我的 MVC 项目中使用jQuery.Validate"、DataAnnotations"和Razor".然后我在 web.config 中启用这些键来验证客户端模型的属性:

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

例如，如果我的模型中有这个:

[必填][Display(Name = "你的名字")]公共字符串名称{获取；放;}

使用这个 Cshtml:

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

html 结果将:

你的名字<input data-val="true" data-val-required="您的姓名是必填字段."id="Name" name="Name" type="text" value=""/><span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>

但是现在当我使用 AngularJS 时，我想渲染可能是这样的:

你的名字<input type="text" ng-model="Name" id="Name" name="Name" required/><div ng-show="form.Name.$invalid"><span ng-show="form.Name.$error.required">你的名字是必填字段</span>

我不知道是否有任何帮助程序或数据注释"来解决此问题.我知道 AngularJS 有更多的特性，比如:

<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">无效:<span ng-show="form.uEmail.$error.required">告诉我们您的电子邮件地址.</span><span ng-show="form.uEmail.$error.email">这不是有效的电子邮件.</span>

嗯，具体来说.我需要一些帮助程序或数据注释"来解析属性(数据注释)以使用 AngularJS 在客户端上显示.

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

编辑

我认为使用 ASP.NET MVC 和 AngularJS 的最佳方式可能是手工完成(前端)(手工编写所有 HTML)

解决方案

作为编写 ASP.Net/Angular 网站的人，我可以告诉您，您最好不要使用 Razor 进行渲染尽可能使用 HTML.

在我的项目中，我设置了一个 razor 视图来呈现我的主页(我使用的是一个用 Angular 编写的单页应用程序)，然后我有一个直接 .html 文件的文件夹，用作我的模板角度.

在我的例子中，其余部分是在 ASP.Net Web API 调用中完成的，但您也可以将 MVC 操作与 JSON 结果一起使用.

一旦我切换到这种架构，事情就变得更加顺利了，在开发方面.

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; }

With this Cshtml:

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

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>

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>

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>

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

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

Edit

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)

解决方案

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.

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.

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.

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