Форма проверки ASP.NET MVC с помощью AngularJS

У меня есть проект в MVC 4 и AngularJS (+ twitter bootstrap). Обычно я использую в своих проектах MVC "jQuery.Validate", "DataAnnotations" и "Razor". Затем я включаю эти ключи в свой web.config для проверки свойств модели на клиенте:

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

Например, если у меня в моей модели это:

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

С помощью этого Cshtml:

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

Результат html:

<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, я хочу сделать так, как это:

<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 есть много других функций, таких как:

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

Ну, в частности. Мне нужен помощник или "Аннотации данных" для разрешения атрибутов (Data Annotation) для отображения на клиенте с помощью AngularJS.

Если он все еще не существует, возможно, пришло время сделать, например RazorForAngularJS

Edit

Я думаю, что лучший способ работать с ASP.NET MVC и AngularJS - это делать (front-end) вручную (записывая все HTML вручную)

Ответы

Ответ 1

Как кто-то, кто создал веб-сайт ASP.Net/ Angular, я могу сказать вам, что вам удастся уйти от использования Razor, чтобы отобразить ваш HTML, где вы можете.

В моих проектах я настроил одно бритвенное представление для рендеринга моей главной страницы (я использую одностраничное приложение, написанное в Angular), тогда у меня есть папка с прямыми файлами .html, которые я использую как мои шаблоны для Angular.

Все остальное сделано в вызовах ASP.Net Web API в моем случае, но вы также можете использовать действие MVC с результатами JSON.

Как только я переключился на эту архитектуру, все стало для меня намного более плавным, мудрый путь развития.

Ответ 2

Я согласен с идеей blesh о выходе из бритвы, но вы можете создать несколько инструментов для быстрого создания страниц. IMHO лучше использовать функции бритвы, где им нужно, а не удалять их из набора инструментов.

Посмотрите ngval. Он привносит аннотации данных на клиентскую сторону в качестве валидаторов angularjs. Он имеет html-помощник и модуль angular. Я должен упомянуть, что проект находится на ранних стадиях разработки.

Ответ 3

Я написал директиву, чтобы сгладить переход от MVC к AngularJs. Разметка выглядит так:

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

который ведет себя идентично соглашениям Razor, включая отсрочку проверки до тех пор, пока поле не будет изменено. Со временем я обнаружил, что моя разметка довольно понятна и проста.

Моя статья по теме

Plinkr

Ответ 4

Я думаю, что есть, вероятно, полдюжины способов сделать то, что вы хотите. Вероятно, проще всего использовать директиву Angular, которая распознает разметку jquery.validation.

Вот такой проект: https://github.com/mdekrey/unobtrusive-angular-validation

И вот еще: https://github.com/danicomas/angular-jquery-validate

Я не пробовал ни потому, что лично, я решил эту проблему, написав код, чтобы сделать MVC-вывод Angular атрибутами проверки вместо атрибутов jquery.validation.unobtrusive.

Третий вариант - полагаться только на проверку на стороне сервера. Хотя это явно медленнее, это может быть ваш единственный вариант иногда для более сложных сценариев проверки. В этом случае вам просто нужно написать javascript для анализа объекта ModelStateDictionary, который обычно возвращают контроллеры Web API. Есть несколько примеров того, как это сделать и интегрировать их в собственную модель валидации AngularJS.

Вот неполный код для разбора ModelStateDictionary:

`` ``

angular.module('app')
    .directive('joshServerValidate', ['$http', function ($http) {
        return {
            require: 'ngModel',
            link: function (scope, ele, attrs, c) {
                console.info('wiring up ' + attrs.ngModel + ' to controller ' + c.$name);
                scope.$watch('modelState', function () {
                    if (scope.modelState == null) return;
                    var modelStateKey = attrs.joshServerValidate || attrs.ngModel;
                    modelStateKey = modelStateKey.replace(attrs.joshServerValidatePrefix, '');
                    modelStateKey = modelStateKey.replace('$index', scope.$index);
                    modelStateKey = modelStateKey.replace('model.', '');
                    console.info('validation for ' + modelStateKey);
                    if (scope.modelState[modelStateKey]) {
                        c.$setValidity('server', false);
                        c.$error.server = scope.modelState[modelStateKey];
                    } else {
                        c.$setValidity('server', true);
                    }
                });
            }
        };
    }]);

`` ``

Я довольно разочарован другими ответами, представленными здесь. "Не делай этого" - не такое замечательное предложение, когда вы пытаетесь проверить что-то немного сложнее, чем адрес электронной почты.

Ответ 5

Я думаю, что это вопрос Angular новички будут помещать (вот как я нашел это:)), и поэтому я думаю, что он заслуживает ответа, который, возможно, объясняет, что авторы редактируют и надеются, помогают тем, кто задает себе вопрос тот же вопрос, и я как бы перефразирую его: как сохранить согласованность между валидацией w00 и валидацией mvc?

Поле модели для проверки получает из представления Angular → в контроллер Angular → в службу Angular → в метод asp.webapi или действие контроллера asp.mvc, которое в конце карты → к модели mvc

Это означает, что на всех этих (по крайней мере, 4 "проекторах) вы должны обязательно передать точную модель и поле, которое вы укажете с помощью бритвы.

Итак, я имею в виду, что есть много вещей, которые могут повлиять на вашу последовательность на пути.

Итак, я согласен с: переписывать их вручную для клиентской стороны и использовать автоматические тесты для обеспечения согласованности