Javascript 将Breeze与Web Api和Angular js结合使用

我想从下拉列表中选择项目，然后我将在输入中看到所选的客户数据 然后我想编辑输入，然后通过BreezJS和WebAPI将它们保存在数据库中

我有这样的Web Api控制器：

[BreezeController]
    public class ZzaController : ApiController
    {
        readonly EFContextProvider<ZzaDbContext> _contextProvider =
            new EFContextProvider<ZzaDbContext>();

        // ~/breeze/Zza/Metadata
        [HttpGet]
        public string Metadata()
        {
            return _contextProvider.Metadata();
        }

        // ~/breeze/Zza/Customers
        [HttpGet]
        public IQueryable<Customer> Customers()
        {
            var customers = _contextProvider.Context.Customers;
            return customers;
        }

        // ~/breeze/Zza/SaveChanges
        [HttpPost]
        public SaveResult SaveChanges(JObject saveBundle)
        {
            return _contextProvider.SaveChanges(saveBundle);
        }
    }

var services = function (http) {
    breeze.config.initializeAdapterInstance("modelLibrary", "backingStore");
    this.getBybreeze = function (successed) {

        var dataService = new breeze.DataService({
            serviceName: 'breeze/Zza',
            hasServerMetadata: false
        });
        var manager = new breeze.EntityManager(
        {
            dataService: dataService
        });
        var entityQuery = breeze.EntityQuery;
        return entityQuery.from('Customers').using(manager).execute().then(successed).catch();

    }
    this.saveByBreeze  =function () {

        var dataService = new breeze.DataService({
            serviceName: 'breeze/Zza',
            hasServerMetadata: false
        });
        var manager = new breeze.EntityManager(
        {
            dataService: dataService
        });
        manager.saveChanges().fail(function (error) { alert("Failed save to server: " + error.message); });

    }
}

services.$inject = ["$http"];
app.service("TestService", services);

var controller = function (scope, testService, ngTableParams, filter, upload, notification) {
    var self = this;
    self.title = "Test";
    self.customers = [];
    self.selected = "";
    self.selectedFirstName="";
    self.selectedLastName="";
    testService.getBybreeze(function (data) {
        self.customers = data.results;
    });
    self.selectedCustomer = function () {
        angular.forEach(self.customers, function (item) {
            if (item.Id === self.selected) {
                self.selectedFirstName = item.FirstName;
                self.selectedLastName = item.LastName;
            }
        });
    }
    self.save = function () {
        testService.saveByBreeze();
    }
}
controller.$inject = ["$scope", "TestService", "NgTableParams", "$filter", "Upload", "Notification"];
app.controller("TestController", controller)

还有像这样的角度控制器：

[BreezeController]
    public class ZzaController : ApiController
    {
        readonly EFContextProvider<ZzaDbContext> _contextProvider =
            new EFContextProvider<ZzaDbContext>();

        // ~/breeze/Zza/Metadata
        [HttpGet]
        public string Metadata()
        {
            return _contextProvider.Metadata();
        }

        // ~/breeze/Zza/Customers
        [HttpGet]
        public IQueryable<Customer> Customers()
        {
            var customers = _contextProvider.Context.Customers;
            return customers;
        }

        // ~/breeze/Zza/SaveChanges
        [HttpPost]
        public SaveResult SaveChanges(JObject saveBundle)
        {
            return _contextProvider.SaveChanges(saveBundle);
        }
    }

var services = function (http) {
    breeze.config.initializeAdapterInstance("modelLibrary", "backingStore");
    this.getBybreeze = function (successed) {

        var dataService = new breeze.DataService({
            serviceName: 'breeze/Zza',
            hasServerMetadata: false
        });
        var manager = new breeze.EntityManager(
        {
            dataService: dataService
        });
        var entityQuery = breeze.EntityQuery;
        return entityQuery.from('Customers').using(manager).execute().then(successed).catch();

    }
    this.saveByBreeze  =function () {

        var dataService = new breeze.DataService({
            serviceName: 'breeze/Zza',
            hasServerMetadata: false
        });
        var manager = new breeze.EntityManager(
        {
            dataService: dataService
        });
        manager.saveChanges().fail(function (error) { alert("Failed save to server: " + error.message); });

    }
}

services.$inject = ["$http"];
app.service("TestService", services);

var controller = function (scope, testService, ngTableParams, filter, upload, notification) {
    var self = this;
    self.title = "Test";
    self.customers = [];
    self.selected = "";
    self.selectedFirstName="";
    self.selectedLastName="";
    testService.getBybreeze(function (data) {
        self.customers = data.results;
    });
    self.selectedCustomer = function () {
        angular.forEach(self.customers, function (item) {
            if (item.Id === self.selected) {
                self.selectedFirstName = item.FirstName;
                self.selectedLastName = item.LastName;
            }
        });
    }
    self.save = function () {
        testService.saveByBreeze();
    }
}
controller.$inject = ["$scope", "TestService", "NgTableParams", "$filter", "Upload", "Notification"];
app.controller("TestController", controller)

视图：

<div class="col-md-12" style="margin-top:20px">
    <div class="col-md-2 " style="margin-top: 7px">
        <label class="">
            Customers:
        </label>
    </div>
    <div class="col-md-10">
        <div class="col-md-3">
            <select class=" form-control" ng-change="self.selectedCustomer()" name="Id" ng-model="self.selected" ng-options="item.Id as item.FullName for item in self.customers"></select>
        </div>
    </div>

    <div class="col-md-10 form-group">
        <hr style="border-color: #000080" />
        <fieldset data-bind="with: currentCustomer">
            <legend>Customer:</legend>
            <label for="customerName">Name:</label>
            <br/>
            <input class="form-control" id="customerName" value="{{self.selectedFirstName}}" />
            <label for="customerPhone">Tell:</label>
            <br/>
            <input id="customerPhone" class="form-control" value="{{self.selectedLastName}}"  />
            <br />
            <button class=" btn btn-default" id="saveButton" ng-click="self.save()">Save</button>
        </fieldset>
    </div>
</div>

我想一切都好

---

但是当我保存它时，没有保存任何内容

您的代码会在每次查询和保存操作中创建一个新的空EntityManager。相反，您应该在TestService中创建一个EntityManager，并将其用于所有查询和保存操作

var services = function (http) {
    breeze.config.initializeAdapterInstance("modelLibrary", "backingStore");
    var dataService = new breeze.DataService({
        serviceName: 'breeze/Zza',
        hasServerMetadata: false
    });
    var manager = new breeze.EntityManager(
    {
        dataService: dataService
    });

    this.getBybreeze = function (successed) {
        var entityQuery = breeze.EntityQuery;
        return entityQuery.from('Customers').using(manager).execute().then(successed);
    }

    this.saveByBreeze = function () {
        manager.saveChanges().catch(function (error) { alert("Failed save to server: " + error.message); });
    }
}

services.$inject = ["$http"];
app.service("TestService", services);