2016-05-08 30 views
0

我使用jaydata 1.5.1與odata 4和ASP.Net WebAPI OData 4.不幸的是,幾乎jaydata網站上的所有示例都是針對舊版本jaydata本身或odata協議< 4.0。我找不到任何合適的例子,涵蓋了jaydata> 1.5 + odata 4 + angularjs,這讓我至少覺得這個項目(jaydata)有點死亡。jaydata 1.5與odata 4和angularjs - 保存/更新數據時的錯誤

我設法啓動jaydata服務並請求數據。但只要我試圖操縱數據(添加,編輯,保存),我就會收到由於缺少文檔而無法解決的錯誤。請在這裏找到我到目前爲止的代碼:

的index.html

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Cache-Control" content="no-store" /> 
<meta charset="utf-8" /> 

<link href="Content/bootstrap.min.css" rel="stylesheet" /> 
<link href="css/font-awesome.min.css" rel="stylesheet" /> 
<script src="Scripts/jquery-1.10.2.min.js"></script> 
<script src="Scripts/odatajs-4.0.0/odatajs-4.0.0.min.js"></script> 

<script src="Scripts/angular.min.js"></script> 

<script src="Scripts/jaydata/jaydata.js"></script> 
<script src="Scripts/jaydata/jaydatamodules/angular.min.js"></script> 
<!--<script src="Scripts/jaydata/jaydataproviders/oDataProvider.min.js"></script>--> 
<!--<script src="app/model.js"></script>--> 

<script src="app/app.js"></script> 

</head> 
<body data-ng-app="app"> 

<div ng-controller="ItemController"> 
    <ul> 
     <li ng-repeat="item in Items"> 
      <input id="checkSlave" type="checkbox" ng-model="item .IstAktiv"> 
      {{item .Vorname}} {{item .Name}} ({{item .Klinik}} - {{item .Abteilung}} : {{item .Station}}) 
     </li> 
    </ul> 
     <button ng-click="newItem()">add new</button> 
    <p> 
     <form ng-if="selectedItem"> 
      <fieldset style="width: 300px; background-color: #0094ff;"> 
       <legend>{{selectedItem.Name}}</legend> 
       <br /> 
       <label> 
        <table class="table table-striped table-bordered table-condensed"> 
         <thead> 
          <tr> 
           <td class="text-center">Aktiv</td> 
           <td class="text-center">Vorname</td> 
           <td class="text-center">Name</td> 
           <td class="text-center">Klinik</td> 
           <td class="text-center">Abteilung</td> 
           <td class="text-center">Station</td> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
           <td class="text-center"><input id="checkSlave" type="checkbox" ng-model="selectedItem.IstAktiv"></td> 
           <td class="text-center"><input ng-model="selectedItem.Vorname" size="20" /></td> 
           <td class="text-center"><input ng-model="selectedItem.Name" size="20" /></td> 
           <td class="text-center"><input ng-model="selectedItem.Klinik" size="20" /></td> 
           <td class="text-center"><input ng-model="selectedItem.Abteilung" size="20" /></td> 
           <td class="text-center"><input ng-model="selectedItem.Station" size="20" /></td> 

          </tr> 
         </tbody> 
        </table> 
       </label> 
        <button ng-click="save()">Save</button> 
        <button ng-click="remove()">Remove</button> 
</fieldset> 
     </form> 
    </p> 
</div> 
</body> 
</html> 

app.js:

var app = angular.module('app', ['jaydata']); 

app.controller('ItemController', ['$scope', '$data', function ($scope, $data, $q) { 
    $scope.Items = []; 
    $scope.selectedItem = null; 

    $data.initService('http://odata/test/JaydataTest/') 
     .then(function (context) { 
      $scope.context = context; 
      context 
       .Items 
       //.map(function (p) { return p.Name }) 
       //.select("{ CategoryObject: it.Category, Name: it.Name }") 
       //.filter(function (item) { item.Name.startsWith('Kim');}) 
       // .filter(function (product) { return product.Id > idParam }, { idParam: 2 }) 
       //.find(2) 
       //.orderBy(function (item) {item.Klinik}) 
       .toArray() 
       .then(function (result) { 
        $scope.Items = result; 
        $scope.$apply(); 
       }) 
     }) 
     .catch(function (error) { 
      alert(error); 
     }); 

    $scope.save = function() { 
     if ($scope.selectedItem.ItemId) { 
      // save existing 
      $scope.context.Items.attach($scope.selectedItem, true); 
      $scope.selectedItem.entityState = $data.EntityState.Modified; 
     } 
     else { 
      // save new 
      $scope.context.Items.add($scope.selectedItem, true); 
     } 
     $scope.saveChanges(); 
    }; 

    $scope.saveChanges = function() { 

     $scope.context.saveChanges() 
      .then(function (n) { 
       $scope.selectedItem = null; 
       $scope.$apply(); 
      }) 
      .fail(function (error) { console.log(error); }); 
    } 

    $scope.newItem = function() { 
     var ctx = $scope.context; 
     $scope.selectedItem = new ctx.Items.elementType({Name: "new Item"}) 
    }; 
}]) 

我收到以下錯誤:

1保存時)數據被正確保存到底層數據庫,但是我得到了follwing控制檯錯誤,上下文沒有得到更新,新項目只有在刷新頁面後才顯示(angular.js = jaydatamodules/angu lar.js):

TypeError: n.call(...).then(...).fail is not a function 
    at Container.a.default.EntityContext.saveChanges (angular.js:266) 
    at n.$scope.saveChanges (app.js:112) 
    at n.$scope.save (app.js:91) 
    at fn (eval at <anonymous> (angular.js:14432), <anonymous>:4:203) 
    at b (angular.js:15485) 
    at e (angular.js:25018) 
    at n.$eval (angular.js:17229) 
    at n.$apply (angular.js:17329) 
    at HTMLButtonElement.<anonymous> (angular.js:25023) 
    at HTMLButtonElement.x.event.dispatch (jquery-1.10.2.min.js:22) 

我曾嘗試不同的語法(當時/失敗了/捕獲成功/錯誤回調),但圍繞這個錯誤不能得到。有任何想法嗎?

2)保存數據時,更新不起作用。我收到以下錯誤:

PATCH http://odata/test/JaydataTest//Items(21) 400 (Bad Request) @ odatajs-4.0.0.js:4366 

Exception {name: "HTTP request failed", message: "The request is invalid.", data: Object} @ jaydata.js:4315 

oDataProvider.js:4156 Uncaught (in promise) Exception {name: "HTTP request failed", message: "The request is invalid.", data: Object} 

如何解決此錯誤?

ODataController:

using System; 
using System.Collections.Generic; 
using System.Data; 
using System.Data.Entity; 
using System.Data.Entity.Infrastructure; 
using System.Linq; 
using System.Net; 
using System.Net.Http; 
using System.Web.Http; 
using System.Web.ModelBinding; 
using System.Web.OData; 
using System.Web.OData.Query; 
using System.Web.OData.Routing; 
using Model; 

namespace JaydataTest.Controllers.odata 
{ 
    /* 
    The WebApiConfig class may require additional changes to add a route for this controller. Merge these statements into the Register method of the WebApiConfig class as applicable. Note that OData URLs are case sensitive. 

    using System.Web.OData.Builder; 
    using System.Web.OData.Extensions; 
    using Model; 
    ODataConventionModelBuilder builder = new ODataConventionModelBuilder(); 
    builder.EntitySet<Item>("Items"); 
    config.MapODataServiceRoute("odata", "odata", builder.GetEdmModel()); 
    */ 
    public class ItemsController : ODataController 
    { 
     private ModelContext db = new ModelContext(); 

     // GET: odata/Items 
     [EnableQuery] 
     public IQueryable<Item> GetItems() 
     { 
      return db.Items; 
     } 

     // GET: odata/Items(5) 
     [EnableQuery] 
     public SingleResult<Item> GetItem([FromODataUri] int key) 
     { 
      return SingleResult.Create(db.Items.Where(item => item.ItemId == key)); 
     } 

     // PUT: odata/Items(5) 
     public IHttpActionResult Put([FromODataUri] int key, Delta<Item> patch) 
     { 
      Validate(patch.GetEntity()); 

      if (!ModelState.IsValid) 
      { 
       return BadRequest(ModelState); 
      } 

      Item item = db.Items.Find(key); 
      if (item == null) 
      { 
       return NotFound(); 
      } 

      patch.Put(item); 

      try 
      { 
       db.SaveChanges(); 
      } 
      catch (DbUpdateConcurrencyException) 
      { 
       if (!ItemExists(key)) 
       { 
        return NotFound(); 
       } 
       else 
       { 
        throw; 
       } 
      } 

      return Updated(item); 
     } 

     // POST: odata/Items 
     public IHttpActionResult Post(Item item) 
     { 
      if (!ModelState.IsValid) 
      { 
       return BadRequest(ModelState); 
      } 

      db.Items.Add(item); 
      db.SaveChanges(); 

      return Created(item); 
     } 

     // PATCH: odata/Items(5) 
     [AcceptVerbs("PATCH", "MERGE")] 
     public IHttpActionResult Patch([FromODataUri] int key, Delta<Item> patch) 
     { 
      Validate(patch.GetEntity()); 

      if (!ModelState.IsValid) 
      { 
       return BadRequest(ModelState); 
      } 

      Item item = db.Items.Find(key); 
      if (item == null) 
      { 
       return NotFound(); 
      } 

      patch.Patch(item); 

      try 
      { 
       db.SaveChanges(); 
      } 
      catch (DbUpdateConcurrencyException) 
      { 
       if (!ItemExists(key)) 
       { 
        return NotFound(); 
       } 
       else 
       { 
        throw; 
       } 
      } 

      return Updated(item); 
     } 

     // DELETE: odata/Items(5) 
     public IHttpActionResult Delete([FromODataUri] int key) 
     { 
      Item item = db.Items.Find(key); 
      if (item == null) 
      { 
       return NotFound(); 
      } 

      db.Items.Remove(item); 
      db.SaveChanges(); 

      return StatusCode(HttpStatusCode.NoContent); 
     } 

     protected override void Dispose(bool disposing) 
     { 
      if (disposing) 
      { 
       db.Dispose(); 
      } 
      base.Dispose(disposing); 
     } 

     private bool ItemExists(int key) 
     { 
      return db.Items.Count(e => e.ItemId == key) > 0; 
     } 
    } 
} 

jaydatamodules/angular.js(節選)

var originalSave = $data.Entity.prototype.save; 
var originalRemove = $data.Entity.prototype.remove; 
var originalSaveChanges = $data.EntityContext.prototype.saveChanges; 

     $data.EntityContext.prototype.saveChanges = function() { 
      var _this = this; 
      var d = $q.defer(); 
      originalSaveChanges.call(_this).then(function (n) { 
       cache = {}; 
       d.resolve(n); 
       if (!$rootScope.$$phase) $rootScope.$apply(); 
      }).fail(function (err) { 
       d.reject(err); 
       if (!$rootScope.$$phase) $rootScope.$apply(); 
      }); 
      return d.promise; 
     } 
     return $data; 
    }]); 

幫助是非常讚賞。在此先感謝

回答

0

我建議您查看JayData angular2 quickstartjaydata odata v4 example存儲庫。 兩者都使用不需要odatajs的JayData 1.5.5 RC,因爲它已經包含了它的補丁版本。

+0

回到這個話題來檢查更新,超過此來到我的腦海:JayData v1.5.5已經包含了必要的odatajs lib下,所以該錯誤可能是由加載的錯誤導致的。嘗試刪除加載odatajs的