Как отобразить ошибки клиенту? Состояние модели AngularJS/WebApi

Я создаю приложение AngularJS SPA с WebApi для серверной части. Я использую атрибуты для проверки модели на сервере, если проверка не удалась, это то, что я возвращаю из ModelState.

     {"Message":"The request is invalid.","ModelState":{"model.LastName":["Last Name must be at least 2 characters long."]}}

Как мне передать это клиенту с помощью AngularJS?

      //Save User Info
    $scope.processDriverForm = function(isValid) {
        if (isValid) {
            //set button disabled, icon, text
            $scope.locked = true;
            $scope.icon = 'fa fa-spinner fa-spin';
            $scope.buttonText = 'Saving...';
            $scope.submitted = true;
            $scope.formData.birthDate = $scope.formData.birthMonth + '/' + $scope.formData.birthDay + '/' + $scope.formData.birthYear;
            $http({
                    method: 'POST',
                    url: 'api/Account/Register',
                    data: $.param($scope.formData),
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
                })
                .success(function (data) {
                    console.log(data);
                    toastr.success('User ' + $scope.formData.username + ' created!');
                    $scope.userForm.$setPristine();
                    $scope.formData = {};
                    //reset the button
                    $scope.locked = false;
                    $scope.icon = '';
                    $scope.buttonText = 'Save';
                    //reset validation submitted
                    $scope.submitted = false;
                })
                .error(function (data, response) {
                    console.log(data);
                    toastr.error('Ooops! There was an error creating the user. Try again and if the problem persists, contact Support.');
                    //reset the button
                    $scope.locked = false;
                    $scope.icon = '';
                    $scope.buttonText = 'Save';
                    $scope.submitted = false;

                    var resp = {};

                    var errors = [];
                    for (var key in resp.ModelState) {
                        for (var i = 0; i < resp.ModelState[key].length; i++) {
                            errors.push(resp.ModelState[key][i]);
                        }
                    }
                    $scope.errors = errors;

                });

        }
        else {
            toastr.warning('Invalid User Form, correct errors and try again.');
        }
    };

validation angularjs asp.net-web-api modelstate
person Brad Martin    schedule 15.04.2014    source источник
comment
что ты пробовал? Вы можете справиться с этим десятками методов. Этот вопрос слишком широк. Сначала вам нужно выбрать поведение вашего приложения для их отображения (предупреждение? всплывающее окно? липкое уведомление?) ...   -  person Jscti    schedule 15.04.2014
comment
Извините, я не имел в виду способ рендеринга. Я просто не знал, как получить ошибки из массива ModelState, который передается обратно с ошибкой 400 BadRequest.   -  person Brad Martin    schedule 15.04.2014

Ответы (2)


arrow_upward
18
arrow_downward

При вызове на сервер фиксируйте ошибку, основанную на отклонении обещания $http.

Затем в вашем контроллере я бы предложил сгладить ответ на массив ошибок при обработке ошибки для отображения, как показано на этом пример скрипки:

for (var key in resp.ModelState) {
    for (var i = 0; i < resp.ModelState[key].length; i++) {
        errors.push(resp.ModelState[key][i]);
    }
}

Чтобы собрать все вместе:

// Post the data to the web api/service
$http.post(url, data)
    .success(successHandler)
    .error(function (response) {
        // when there's an error, parse the error
        // and set it to the scope (for binding)
        $scope.errors = parseErrors(response);
    });

//separate method for parsing errors into a single flat array
function parseErrors(response) {
    var errors = [];
    for (var key in response.ModelState) {
        for (var i = 0; i < response.ModelState[key].length; i++) {
            errors.push(response.ModelState[key][i]);
        }
    }
    return errors;
}
person Brocco    schedule 15.04.2014
comment
Я добавил запрос $http в свой код, но как мне получить эти ошибки из возвращаемого BadRequest и поместить в переменную resp. Я все еще на ранней стадии изучения JS, всего 2 месяца, и это мое первое знакомство с JS и AngularJS. Это то, для чего нужен .push? - person Brad Martin; 15.04.2014
comment
Я обновил код в своем ответе, чтобы показать более полное решение. - person Brocco; 15.04.2014
comment
Хорошо идти, и теперь я понимаю процесс. Отличный материал. - person Brad Martin; 15.04.2014
comment
response.ModelState будет response.modelState — верблюжий случай, верно? веб-API будет сериализовать его в верблюжьем регистре, я полагаю. - person Austin Harris; 03.03.2017

arrow_upward
3
arrow_downward

Самый простой способ — взять все ошибки из ModelState и поместить их в новое свойство $scope.

$http.post(url, data).
    success(successHandler).
    error(function (response) {
        $scope.errors = getErrors(response);
    });

function getErrors(responseWithModelState) {
    var errors = [];
    /*
    Get error messages out of ModelState property, and push them into the errors variable...
    Brocco beat me to it. :-)
    */
    return errors;
};

Затем в вашем HTML...

<ul>
    <li ng-repeat="e in errors">{{e}}</li>
</ul>

Или вместо того, чтобы делать это в каждом обработчике ошибок, вы можете написать его один раз и применять к каждому HTTP-запросу с помощью перехватчика. Я никогда не писал его сам, поэтому я просто укажу вам на doc (прокрутите вниз до раздела «Перехватчики»).

person Andrew    schedule 15.04.2014
comment
Я добавил свой запрос $http, но не знаю, как это сделать. Скрипка @Brocco великолепна, но я не знаю, как это реализовать. Любая помощь с кодом, который я добавил? - person Brad Martin; 15.04.2014
comment
Похоже, обновление @Brocco должно вам помочь. Мне нечего добавить из того, что он не сказал. Удачи! :-) - person Andrew; 15.04.2014