C# 在ASP.NET MVC中使用AngularJS显示模型状态错误

C# 在ASP.NET MVC中使用AngularJS显示模型状态错误,c#,jquery,asp.net-mvc,angularjs,asp.net-mvc-5,C#,Jquery,Asp.net Mvc,Angularjs,Asp.net Mvc 5,更新: 你在你的示例链接中发布的一条非常简单,错误消息的呈现方式非常简单,但如果你看我下面的显示,它与你和我的数据有点不同。错误=>ErrorId>>消息 更新结束 我试图使用AngularJS在ASP.NETMVC中显示模型状态错误(如ValidationSummary) 我无法显示从数据中获取的错误消息。错误 以下是我在AngularJS中的代码: $scope.AddUser = function () { $http.post('adduser', $scope.User).s

更新:

你在你的示例链接中发布的一条非常简单,错误消息的呈现方式非常简单,但如果你看我下面的显示,它与你和我的数据有点不同。错误=>ErrorId>>消息

更新结束

我试图使用AngularJS在ASP.NETMVC中显示模型状态错误(如ValidationSummary)

我无法显示从
数据中获取的错误消息。错误

以下是我在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>

{{message}}
用户名
电子邮件
  • {{{error}

根据您的代码,当模型状态无效时,控制器操作应该执行类似操作,通过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()
      });

假设这是一个输入错误,并且您正在执行$scope.errors=data.errors

您的中继器可能是:

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

要显示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>
  • {{error[0].ModelState[Object.keys(error[0].ModelState)[0]]}

但是,您必须确保后端在其响应中返回“ModelState”。“error”对象有一个“Message”属性,但也应该有一个“ModelState”属性。

正如您看到的代码一样,它返回错误消息我的问题更多的是在UI上显示错误消息当然这是我打字时的打字错误在我更新你的密码后没有显示任何错误消息code@AbuHamzah然后,你需要提供更多的故障排除信息,因为这似乎是可行的。我已经用更多的信息更新了我的问题疑难解答信息。@AbuHamzah我已经更新了plunker和答案。您只需要确保中继器实际上遵循API的模式。但是,我会修改API,因为该结构看起来非常复杂