使用角度 $resource.save() 时违反协议答案

【问题标题】：protocol violation when using angular $resource.save()使用角度 $resource.save() 时违反协议
【发布时间】：2015-10-06 06:12:29
【问题描述】：

我有一个混合的 ASP.NET MVC 视图页面，它有一个角度控制器，它在工厂中使用 $resource 的 save() 和 delete() 方法作为下面的代码片段。控制器的 delete() 方法有效。执行 add() 时，Fiddler 显示状态为 201(Created)，新用户已添加到数据库中，但 IE F12 控制台显示以下 [$resource:badcfg] 错误。不执行成功或失败回调。没有警报也没有屏幕刷新。为了您的参考，我添加了 Angular $resource 使用的 WebAPI 的 post() 操作。我还修改了 $resource 操作参数以将 isArray 设置为 false。我仍然得到相同的 [$resource:badcfg] 错误。返回结果中是否存在 Angular 不期望的内容？感谢您的帮助。

[$resource:badcfg] http://errors.angularjs.org/1.4.6/$resource/badcfg?p0=save&amp;p1=object&amp;p2=array&amp;p3=POST&amp;p4=http%3A%2F%2FmyIISServerName%3A8083%2FWCF_WebAPI%2FCMT%2Fapi%2FuserFSR%2Fadd%2F129%2F1540

ufsrApp.factory('userFsrAddFactory', ['$resource',
  function($resource) {
    return $resource(userFsrURI + 'userFSR/add/:userId/:fsrId', {
      userId: '@userId',
      fsrId: '@fsrId'
    },     
    {
      save: {method: 'POST', isArray: false}
    });
  }
])

ufsrApp.factory('userFsrDeleteFactory', ['$resource',
  function($resource) {
    return $resource(userFsrURI + 'userFSR/delete/:userId/:ufsrId'
      //,
      //  { userId: '@userId', ufsrId: '@ufsrId' }
    );
  }
])

ufsrApp.controller('ufsrController', [...omitted for brevity... ,
      function(....omitted for brevity....) {

        $scope.add = function() {
          $scope.newUserFSR = new userFsrAddFactory();
          $scope.newUserFSR.userId = $scope.userId;
          $scope.newUserFSR.fsrId = $scope.role;
          userFsrAddFactory.save($scope.newUserFSR,
            function() { //success callback
              alert("New role added");
              $scope.postStatus = true;
              //using jquery location object to reload the page after adding a new user
              location.reload(true); 
            },
            function() { //failure callback
              alert("add role failed");
              $scope.postStatus = false;
            }
          );

        }

  }]);

以下是 Angular 控制器发布到的 WebAPI 的 Post()。

     /// <summary>
     /// create new user FSR
     /// </summary>
     /// <param name="userId"></param>
     /// <param name="fsrId"></param>
     /// <returns></returns>
    [Route("add/{userId:int}/{fsrId:int}")]
     public async Task < HttpResponseMessage > Post(int userId, int fsrId) {
      try {
        var userFSR = await repo.GetUserFSR(userId);
        if (userFSR == null)
          return Request.CreateResponse(HttpStatusCode.NotFound);
        else {
          int newKey = await repo.PostUserFSR(userId, fsrId);

          return Request.CreateResponse(HttpStatusCode.Created, userFSR);;
        }
      } catch (Exception ex) {
        return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex);
      }
    }

【问题讨论】：

标签： c# asp.net angularjs

【解决方案1】：

//using jquery location object to reload the page after adding a new user
location.reload(true);

如果这是您想要做的，您应该让您的代码真正做到这一点。在您调用 save() 之后，但在对服务器的请求收到响应之前，甚至可能在请求完全发送到服务器之前（导致您看到的错误），您现在运行的内容。

这应该进入您的成功回调。或者根本不重新加载——你应该可以很容易地让事情在不重新加载的情况下工作。

【讨论】：

是的，我尝试将重新加载代码放在成功回调块中，但即使服务器成功将记录保存到数据库，它也不会被调用。
@user266909 你检查过服务器是否真的报告成功了吗？没有看到代码，我的第一个猜测是它将记录保存到数据库中，然后由于某种原因返回错误。
我将 location.reload(true) 移到了成功回调块中。执行 save() 方法时，IE 控制台显示“[$resource:badcfg] errors.angularjs.org/1.4.6/$resource/…”
感谢您的回复。是的，根据 Fiddler 的说法，返回状态码是 201。我在 IE 中用 F5 手动刷新了页面，新用户列在一个表格中。
@user266909 对，你确实已经提到了状态码。但是该错误仍然表明您的服务设置不正确，不是吗？它表明您的 AngularJS 服务期望您的 Web 服务返回的内容与您的 Web 服务实际返回的内容之间存在差异。解决那个问题，摆脱那个错误，你的成功回调就会运行。 save 的默认值是它期望一个可以被视为一个对象的响应，但您返回的却是一个被视为数组的东西。

【解决方案2】：

我终于找到了问题所在。原来，我的 WebAPI post 方法除了 Create (201) 状态之外还返回一个 userFSR 对象。所以我将上面的代码片段修改为：

return Request.CreateResponse(HttpStatusCode.Created);

【讨论】：