在ASP.NET MVC中使用AngularJS显示ModelState错误

Question

更新

您在示例链接中发布的那个非常简单，就像错误消息的渲染方式一样，但是如果你看下面的我的节目有点不同那么你有什么我有data.Errors=>ErrorId>>Message

更新END

我正在尝试使用AngularJS在ASP.NET MVC中显示ModelState错误（如ValidationSummary）。

我无法显示我从data.Errors

收到的错误消息

这是我在AngularJS中的代码：

$scope.AddUser = function ()
{
    $http.post('adduser', $scope.User).success(function (data, status, headers, config)
    {
        $scope.message = '';
        $scope.errors = [];

        if (data.success === false) {
            $scope.errors = [];
            $scope.errors = data.errors;
        }
        else {
            $scope.message('Successfully Added ' + $scope.User.UserName + '!');
            $scope.user = {};
        }
    }).error(function (data, status, headers, config)
    {
        $scope.errors = [];
        $scope.errors = data.errors;
        $scope.message = 'Unexpected Error';
    }); 
}

// html代码：

 <form name="AddUsr" ng-submit="AddUser()">
            <div class="error">{{message}}</div>
            <div class="row">
                <div class="column third">User Name</div>
                <div class="column two-thirds"><input ng-model="User.UserName" required /></div>
            </div>
            <div class="row">
                <div class="column third">Email</div>
                <div class="column two-thirds"><input ng-model="User.Email" required /></div>
            </div>
            <div class="row">
                <div class="column full"><input type="submit" value="Add User" /></div>
            </div>
            <ul>
                <li id="errorMessages" class="error" data-ng-repeat="error in errors">{{error}}</li>
            </ul>
        </form>

Answer 1

根据您的代码，您的控制器操作应该执行类似这样的操作，以便在模型状态无效时通过JSON返回.success和.errors。这样做了吗？

      if (ModelState.IsValid)
      {
            // Your logic here ...
            // ...

            // return true if successfull
           return Json(new { success = true});    
      }
      return Json(new
      {
          success = false,
          errors = ModelState.Keys.SelectMany(k => ModelState[k].Errors)
                          .Select(m => m.ErrorMessage).ToArray()
      });

Answer 2

假设这是一个拼写错误你正在做$ scope.errors = data.Errors;

您的转发器应该是：

<ul>
   <li id="errorMessages" class="error" data-ng-repeat="error in errors">{{error[0].Message}}</li>
</ul>

Answer 3

为了显示ModelState错误，请尝试访问应作为错误属性返回的ModelState对象。

<ul>
    <li id="errorMessages" class="error" data-ng-repeat="error in errors">
        {{error[0].ModelState[Object.keys(error[0].ModelState)[0]]}}
    </li>
</ul>

但是，你必须确保你的后端正在返回＆＃39; ModelState＆＃39;在其回应中。你的错误＆＃39;对象有一条消息＆＃39;财产，但它也应该有一个＆＃39; ModelState＆＃39;那里也有财产。