İstemciye nasıl hata yapılır? AngularJS/WebApi ModelState

Question

Arka uç için WebApi ile bir AngularJS SPA uygulaması yapıyorum. Sunucuda model doğrulama için öznitelikleri kullanıyorum, doğrulama başarısız olursa bu, ModelState'den döndüğüm şeydir.

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

Bunu daha sonra AngularJS ile istemciye nasıl yaparım? sunucunuza çağrı yaparken

 //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.'); 
     } 
    }; 

Answer 1

, $http sözünün reddi dayalı hatayı yakalamak. Bu fiddle example gösterildiği gibi

Sonra denetleyicisi ben ekran için hata işleme sırasındaki hatalar dizisi yanıtı düzleştirme öneririm:

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

hep birlikte koymak için:

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

Answer 2

ModelState'deki tüm hataları almanın ve $ kapsamı üzerinde yeni bir mülke yerleştirmenin en basit yolu olabilir. HTML'nize Sonra

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

...

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

Veya, bunun yerine her hata işleyicisi içinde bunu yapmanın, bunu bir kez yazıp bir önleme kullanarak her HTTP isteğine uygulamak olabilir. Hiç kendim yazmamıştım, o yüzden sizi sadece doc numaralı telefona göstereceğim (Interceptors bölümüne ilerleyin).