我使用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;
}]);
幫助是非常讚賞。在此先感謝
回到這個話題來檢查更新,超過此來到我的腦海:JayData v1.5.5已經包含了必要的odatajs lib下,所以該錯誤可能是由加載的錯誤導致的。嘗試刪除加載odatajs的
你必須包括以下模塊:
http://jaydata.org/blog/how-to-work-with-the-jaydata-promise-interfaces
來源
2016-09-29 19:25:13 Jows