Formulaire de validation ASP.NET MVC avec AngularJS

Question

Je suis avec un projet MVC 4 et AngularJS (+ twitter bootstrap). J'ai l'habitude de les utiliser dans mes projets MVC "jQuery.Valider", "DataAnnotations" et "Rasoir". Puis-je activer ces touches de mon web.config pour valider les propriétés de modèle sur le client:

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

Par exemple, si j'ai dans mon modèle ce:

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

Avec cette Cshtml:

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

Le html résultat:

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

Mais maintenant, quand je utiliser AngularJS, je veux rendre peut-être comme ceci:

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

Je ne sais pas si il y a un helper ou "Annotation de Données" pour résoudre ce problème. Je comprends que AngularJS a beaucoup plus de fonctionnalités comme:

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

Eh bien, précisément. J'ai besoin d'aide ou de "Annotation de Données" pour résoudre les attributs (Annotation de Données) pour l'affichage sur le client avec AngularJS.

Si il n'existe pas encore, il est peut être temps de faire, comme RazorForAngularJS

Modifier

Je pense que peut-être la meilleure façon de travailler avec ASP.NET MVC et AngularJS est de le faire (front-end) à la main (écrit tout le code HTML à la main)

Answer 1

Comme quelqu'un qui est l'auteur d'une ASP.Net/Angular site web, je peux vous dire que vous allez être mieux fait de pas à pas loin de l'aide de Rasoir pour rendre votre code HTML où vous pouvez.

Dans mes projets j'ai mis en place un rasoir vue de rendre ma page principale (je suis en utilisant une page unique application écrite dans Angulaire), puis j'ai un dossier de droit .les fichiers html que j'utilise comme mes modèles Angulaire.

Le reste est fait dans ASP.Net Web des appels d'API dans mon cas, mais vous pouvez également utiliser MVC action avec des résultats JSON.

Dès que je suis passé à cette architecture, les choses allaient beaucoup plus en douceur pour moi, le développement de la sagesse.

Answer 2

Je suis d'accord avec l'idée de Blesh de s'éloigner du rasoir, mais vous pouvez créer des outils pour créer des pages plus rapidement. À mon humble avis, il est préférable d'utiliser les fonctionnalités de rasoir là où elles étaient nécessaires au lieu de le supprimer de l'ensemble d'outils.

BTW jette un œil à ngval . Il apporte des annotations de données côté client en tant que validateurs angularjs. Il a un assistant html et un module angulaire. Je dois mentionner que le projet en est aux premiers stades de développement.

Answer 3

J'ai écrit une directive pour lisser la transition de la MVC à AngularJs. Le balisage ressemble à:

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

Qui se comporte de manière identique à un Rasoir conventions, y compris le report de validation avant la fin d'un champ est modifié. Au fil du temps, j'ai trouvé le maintien de balisage assez intuitive et simple.

Mon article sur le sujet

Plinkr

Answer 4

Je pense que c'est une question Angulaire des débutants, mettre (c'est comment je l'ai trouvé :)), et c'est pourquoi je pense qu'il mérite une réponse qui peut-être explique les auteurs de modifier et d'espoir aide à ceux qui se sont posé la même question et j'ai une sorte de reformuler: comment faire pour garder la cohérence entre angulaire de la validation et de la validation du modèle mvc?.

Le modèle de champ pour valider obtient à partir de l'angle de vue -> pour une angulaires controller -> à angulaire de service -> pour asp.webapi méthode ou asp.mvc contrôleur de l'action, qui, à la fin des cartes -> pour un modèle mvc

Cela signifie que sur tous ceux (au moins 4 "projecteurs"), vous devez être sûr de transférer le modèle exact et le champ que vous consultez avec le rasoir.

Donc, ce que je veux dire, c'est qu'il y a beaucoup de choses qui peuvent souffler votre cohérence sur le chemin.

Je suis d'accord avec: réécrire manuellement pour le côté client, et l'utilisation de tests automatisés pour assurer la cohérence