Asp.net mvc 使用Angular创建和更新实体的好方法是什么？_Asp.net Mvc_Asp.net Mvc 4_Angularjs

Asp.net mvc 使用Angular创建和更新实体的好方法是什么？

asp.net-mvc asp.net-mvc-4 angularjs

Asp.net mvc 使用Angular创建和更新实体的好方法是什么？,asp.net-mvc,asp.net-mvc-4,angularjs,Asp.net Mvc,Asp.net Mvc 4,Angularjs,我现在使用Angular大约2-3周，只使用了数据绑定，并尝试创建指令。现在我想将一个对象保存到服务器域模型如下所示： public class Customer { public int Id { get; set; } public string Code { get; set; } public string CompanyName { get; set; } public string EmailAddress { get; set; } pub

我现在使用Angular大约2-3周，只使用了数据绑定，并尝试创建指令。现在我想将一个对象保存到服务器

域模型如下所示：

public class Customer
{
    public int Id { get; set; }
    public string Code { get; set; }
    public string CompanyName { get; set; }
    public string EmailAddress { get; set; }
    public DateTime BirthDate { get; set; }
    public string BSNNo { get; set; }
    public string IdCardNo { get; set; }
    public bool Deceased { get; set; }
    public Gender Gender { get; set; }
    public Title Title { get; set; } // Title is an enum
    internal bool IsActive { get; set; }

    public PersonName Name { get; set; } // A value object
    public PhoneNumber DayPhone { get; set; } // A value object
    public PhoneNumber OtherPhone { get; set; }

    public virtual Address Address { get; set; } // A value object
    public virtual Address PostallAddress { get; set; }
}

现在我已经创建了一个相应的HTML表单，当我提交这个表单时，它将由Angular处理。但现在我想知道保存此表单的最佳/推荐方法

仅供参考：我们正在使用ASP.NET MVC 4，我们发现这是一个很好的方法。该服务还允许进行简单的测试。我们有下面这样的东西，它对我们很有效。如果您想要更多的控制权，您可以随时返回服务

查看

<!DOCTYPE html >

<html ng-app="myApp">
<head>
</head>
<body ng-controller="CustomerController">
    <form name="form" novalidate>
        <input type="text" ng-model="customer.name" required />
        <input type="text" ng-model="customer.address" required />
        <button ng-click="add(customer)">Save</button>
    </form>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-resource.js"></script>
    <script src="~/Scripts/app/app.js"></script>
    <script src="~/Scripts/app/services/customerResource.js"></script>
    <script src="~/Scripts/app/controllers/CustomerController.js"></script>

</body>
</html>

控制器：

myApp.factory('customerResource', function($resource){
  var resource = $resource('/data/customer/:id', { id: '@id' }, { 'put' : {method:'PUT' } });

  return {
    getAll : function(){
        return resource.query();
    },
    add : function(customer){
            return resource.save(customer);
    },
    update : function(customer){
            return resource.put({ id: customer._id }, customer);
    },
    remove : function(id){
            return resource.remove( { id: id });
    }
  };
});

myApp.controller('CustomerController', function($scope, customerResource) {

  $scope.customer = {};

  $scope.customers = customerResource.getAll();

  $scope.add = function(customer){
    $scope.customers.push(customerResource.add(customer));
  }

  $scope.update = function(customer){
    customerResource.update(customer);
  }

  $scope.remove = function(customer){
    customerResource.remove(customer._id);
    $scope.customers.splice($scope.customers.indexOf(customer), 1);
  }
});

describe('customerResource', function(){
  beforeEach(module('myApp'));

  describe('getAll', function(){

    it('should issue a GET request to /data/customer', inject(function(customerResource, $httpBackend){
      $httpBackend.expectGET('/data/customer').respond([{ level: '5'}]);

      var customers = customerResource.getAll();
      $httpBackend.flush();

      expect(customers[0].level).toBe('5');
  }));

  it('should return an array of custoemrs', inject(function(customerResource, $httpBackend){
    $httpBackend.when('GET', '/data/customer').respond([{ level: '5'}, { level: '6'}]);

    var customers = customerResource.getAll();
    $httpBackend.flush();

    expect(customers[0].level).toBe('5');
    expect(customers[1].level).toBe('6');
  }));
});

public class Customer
{
    public string Name { get; set; }
    public string Address { get; set; }
}

非常基本的测试：

myApp.factory('customerResource', function($resource){
  var resource = $resource('/data/customer/:id', { id: '@id' }, { 'put' : {method:'PUT' } });

  return {
    getAll : function(){
        return resource.query();
    },
    add : function(customer){
            return resource.save(customer);
    },
    update : function(customer){
            return resource.put({ id: customer._id }, customer);
    },
    remove : function(id){
            return resource.remove( { id: id });
    }
  };
});

myApp.controller('CustomerController', function($scope, customerResource) {

  $scope.customer = {};

  $scope.customers = customerResource.getAll();

  $scope.add = function(customer){
    $scope.customers.push(customerResource.add(customer));
  }

  $scope.update = function(customer){
    customerResource.update(customer);
  }

  $scope.remove = function(customer){
    customerResource.remove(customer._id);
    $scope.customers.splice($scope.customers.indexOf(customer), 1);
  }
});

describe('customerResource', function(){
  beforeEach(module('myApp'));

  describe('getAll', function(){

    it('should issue a GET request to /data/customer', inject(function(customerResource, $httpBackend){
      $httpBackend.expectGET('/data/customer').respond([{ level: '5'}]);

      var customers = customerResource.getAll();
      $httpBackend.flush();

      expect(customers[0].level).toBe('5');
  }));

  it('should return an array of custoemrs', inject(function(customerResource, $httpBackend){
    $httpBackend.when('GET', '/data/customer').respond([{ level: '5'}, { level: '6'}]);

    var customers = customerResource.getAll();
    $httpBackend.flush();

    expect(customers[0].level).toBe('5');
    expect(customers[1].level).toBe('6');
  }));
});

public class Customer
{
    public string Name { get; set; }
    public string Address { get; set; }
}

MVC操作（添加-MVC模型绑定器将把html参数解析到VM中）：

视图模型：

myApp.factory('customerResource', function($resource){
  var resource = $resource('/data/customer/:id', { id: '@id' }, { 'put' : {method:'PUT' } });

  return {
    getAll : function(){
        return resource.query();
    },
    add : function(customer){
            return resource.save(customer);
    },
    update : function(customer){
            return resource.put({ id: customer._id }, customer);
    },
    remove : function(id){
            return resource.remove( { id: id });
    }
  };
});

myApp.controller('CustomerController', function($scope, customerResource) {

  $scope.customer = {};

  $scope.customers = customerResource.getAll();

  $scope.add = function(customer){
    $scope.customers.push(customerResource.add(customer));
  }

  $scope.update = function(customer){
    customerResource.update(customer);
  }

  $scope.remove = function(customer){
    customerResource.remove(customer._id);
    $scope.customers.splice($scope.customers.indexOf(customer), 1);
  }
});

describe('customerResource', function(){
  beforeEach(module('myApp'));

  describe('getAll', function(){

    it('should issue a GET request to /data/customer', inject(function(customerResource, $httpBackend){
      $httpBackend.expectGET('/data/customer').respond([{ level: '5'}]);

      var customers = customerResource.getAll();
      $httpBackend.flush();

      expect(customers[0].level).toBe('5');
  }));

  it('should return an array of custoemrs', inject(function(customerResource, $httpBackend){
    $httpBackend.when('GET', '/data/customer').respond([{ level: '5'}, { level: '6'}]);

    var customers = customerResource.getAll();
    $httpBackend.flush();

    expect(customers[0].level).toBe('5');
    expect(customers[1].level).toBe('6');
  }));
});

public class Customer
{
    public string Name { get; set; }
    public string Address { get; set; }
}

HTTP请求将类似于：

Request URL:http://mywebsite/data/customer
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-GB,en;q=0.8,en-US;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Content-Length:30
Content-Type:application/json;charset=UTF-8
Host:mywebsite
Origin:http://mywebsite
Pragma:no-cache
Request Payloadview source
  {name:somename, address:someaddress}
  address: "somename"
 name: "someaddress"

HTH

试着看看breeze.js——它包括一些方便的更改跟踪，还具有.Net Linq风格的语法，用于查询OData/WebAPI服务，查询实际上将在服务器端运行。这就像$resource，但使用的是类固醇。

你应该使用基于角度休息的$resource可能是@Stewie的副本。它看起来像是一个副本，但是，我不在乎

$resource

的用法。谢谢你的代码。我只是好奇你的后端是什么样子。我是说，

/data/customer/:id

指向哪里？这个后端是否匹配方法名

getAll

，

add

，

update

，

delete

？文档中给出了HTTP动词-。因此，您只需要一个名为Customer的操作作为HttpGet，或用于add的HttpPost。恐怕我使用的后端是node。刚刚用一些后端细节更新了我的答案。只需设置角边，然后在chrome中打开网络选项卡并使用它。我明白了，非常感谢。你可能知道一个教程或视频，其中解释了所有这些？我发现vaque的Angular文档，与其说是教程，不如说是参考书。Egghead.io很棒，pluralsight.com上有详细的课程。如果你愿意，你能接受这个答案吗？+1。唯一需要注意的是，它不适用于IE8及以下版本的angularjs