asp.net-mvc-4 – 如何通过MVC4 upshot上传相关实体

前端之家收集整理的这篇文章主要介绍了asp.net-mvc-4 – 如何通过MVC4 upshot上传相关实体前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我得到一个简单的DTO实体A加载到我的upshot viewmodel中,可以通过Knockoutjs快乐地查看.

我的DTO A包含一个List实体.所以我可以预测A内的元素.

再次:

  1. class A
  2. {
  3. someprop;
  4. List<B> childB;
  5. }
  6. Class B
  7. {
  8. somepropB;
  9. }

到现在为止还挺好.我可以毫无问题地迭代数据.
但是如果我在A和SaveAll的实例中更改“someprop”,服务器根本不会响应.
甚至不调用updateData控件方法.
如果我在将childB.Clear()发送到客户端之前清除它,一切都很好.

看起来结果是无法用集合更新实体?

解决方法

如果您希望这样的场景起作用,还有一些工作要做. Upshot仅转换可观察项目中的父实体.所以只有类A的javascript表示是一个淘汰可观察,B类的javascript表示不是.因此,Upshot不知道关联对象的任何更改.

解决方案是手动映射实体.为了让我的生活更轻松,我在下面的代码片段中使用了我的“DeliveryTracker”示例应用程序中的代码.在我的博客文章中,您可以看到手动映射的示例:http://bartjolling.blogspot.com/2012/04/building-single-page-apps-with-aspnet.html所以我的下面的示例正在处理“交付”和“客户”对象.

服务器端域模型

  1. namespace StackOverflow.q9888839.UploadRelatedEntities.Models
  2. {
  3. public class Customer
  4. {
  5. [Key]
  6. public int CustomerId { get; set; }
  7.  
  8. public string Name { get; set; }
  9. public string Address { get; set; }
  10. public double Latitude { get; set; }
  11. public double Longitude { get; set; }
  12.  
  13. public virtual ICollection<Delivery> Deliveries { get; set; }
  14. }
  15.  
  16. public class Delivery
  17. {
  18. [Key]
  19. public int DeliveryId { get; set; }
  20. public string Description { get; set; }
  21. public bool IsDelivered { get; set; }
  22.  
  23. [IgnoreDataMember] //needed to break cyclic reference
  24. public virtual Customer Customer { get; set; }
  25. public virtual int CustomerId { get; set; }
  26. }
  27.  
  28. public class AppDbContext : DbContext
  29. {
  30. public DbSet<Customer> Customers { get; set; }
  31. public DbSet<Delivery> Deliveries { get; set; }
  32. }
  33. }

数据服务控制器

数据服务控制器公开符合OData标准的数据
的 “http://本地主机:[yourport] / API / DataService的/ GetCustomers的”.为了能够更新客户和交付,您需要定义UpdateCustomer和UpdateDelivery函数

  1. namespace StackOverflow.q9888839.UploadRelatedEntities.Controllers
  2. {
  3. public class DataServiceController : DbDataController<AppDbContext>
  4. {
  5. //Service interface for Customer
  6. public IQueryable<Customer> GetCustomers()
  7. {
  8. return DbContext.Customers.Include("Deliveries").OrderBy(x => x.CustomerId);
  9. }
  10. public void InsertCustomer(Customer customer) { InsertEntity(customer); }
  11. public void UpdateCustomer(Customer customer) { UpdateEntity(customer); }
  12. public void DeleteCustomer(Customer customer) { DeleteEntity(customer); }
  13.  
  14. //Service interface for Deliveries
  15. public void InsertDelivery(Delivery delivery) { InsertEntity(delivery); }
  16. public void UpdateDelivery(Delivery delivery) { UpdateEntity(delivery); }
  17. public void DeleteDelivery(Delivery delivery) { DeleteEntity(delivery); }
  18. }
  19. }

客户端域模型

添加包含客户端模型的新javascript文件.在这里,我明确地将每个房产变成了一个可以观察到的淘汰赛.解决问题的关键是Customer对象的构造函数中的行,我将传入的交付映射到可观察的数组中

  1. /// <reference path="_references.js" />
  2. (function (window,undefined) {
  3.  
  4. var deliveryTracker = window["deliveryTracker"] = {}; //clear namespace
  5.  
  6. deliveryTracker.Deliveriesviewmodel = function () {
  7. // Private
  8. var self = this;
  9. self.dataSource = upshot.dataSources.Customers;
  10. self.dataSource.refresh();
  11. self.customers = self.dataSource.getEntities();
  12. };
  13.  
  14. deliveryTracker.Customer = function (data) {
  15. var self = this;
  16.  
  17. self.CustomerId = ko.observable(data.CustomerId);
  18. self.Name = ko.observable(data.Name);
  19. self.Address = ko.observable(data.Address);
  20. self.Latitude = ko.observable(data.Latitude);
  21. self.Longitude = ko.observable(data.Longitude);
  22.  
  23. self.Deliveries = ko.observableArray(ko.utils.arrayMap(data.Deliveries,function (item) {
  24. return new deliveryTracker.Delivery(item);
  25. }));
  26.  
  27. upshot.addEntityProperties(self,"Customer:#StackOverflow.q9888839.UploadRelatedEntities.Models");
  28. };
  29.  
  30. deliveryTracker.Delivery = function (data) {
  31. var self = this;
  32.  
  33. self.DeliveryId = ko.observable(data.DeliveryId);
  34. self.CustomerId = ko.observable(data.CustomerId);
  35. self.Customer = ko.observable(data.Customer ? new deliveryTracker.Customer(data.Customer) : null);
  36. self.Description = ko.observable(data.Description);
  37. self.IsDelivered = ko.observable(data.IsDelivered);
  38.  
  39. upshot.addEntityProperties(self,"Delivery:#StackOverflow.q9888839.UploadRelatedEntities.Models");
  40. };
  41.  
  42. //Expose deliveryTracker to global
  43. window["deliveryTracker"] = deliveryTracker;
  44. })(window);

风景

在index.cshtml中初始化Upshot,指定自定义客户端映射并绑定viewmodel

  1. @(Html.UpshotContext(bufferChanges: false)
  2. .DataSource<StackOverflow.q9888839.UploadRelatedEntities.Controllers.DataServiceController>(x => x.GetCustomers())
  3. .ClientMapping<StackOverflow.q9888839.UploadRelatedEntities.Models.Customer>("deliveryTracker.Customer")
  4. .ClientMapping<StackOverflow.q9888839.UploadRelatedEntities.Models.Delivery>("deliveryTracker.Delivery")
  5. )
  6. <script type="text/javascript">
  7. $(function () {
  8. var model = new deliveryTracker.Deliveriesviewmodel();
  9. ko.applyBindings(model);
  10. });
  11. </script>
  12.  
  13. <section>
  14. <h3>Customers</h3>
  15. <ol data-bind="foreach: customers">
  16. <input data-bind="value: Name" />
  17.  
  18. <ol data-bind="foreach: Deliveries">
  19. <li>
  20. <input type="checkBox" data-bind="checked: IsDelivered" >
  21. <span data-bind="text: Description" />
  22. </input>
  23. </li>
  24. </ol>
  25. </ol>
  26. </section>

结果

导航到索引页面时,将异步加载客户列表和相关交付.所有交货按客户分组,并使用与交货的“IsDelivered”属性绑定的复选框进行预先修复.客户的名称也是可编辑的,因为它绑定到INPUT元素

我没有足够的声誉来发布截图,所以你必须没有它

现在选中或取消选中IsDelivered复选框时,Upshot将检测更改并将其发布到DataService Controller

  1. [{"Id":"0","Operation":2,"Entity":{
  2. "__type":"Delivery:#StackOverflow.q9888839.UploadRelatedEntities.Models","CustomerId":1,"DeliveryId":1,"Description":"NanoCircuit Analyzer","IsDelivered":true
  3. },"OriginalEntity":{
  4. "__type":"Delivery:#StackOverflow.q9888839.UploadRelatedEntities.Models","IsDelivered":false
  5. }
  6. }]

修改客户名称时,Upshot将在输入框失去焦点时提交更改

  1. [{
  2. "Id": "0","Operation": 2,"Entity": {
  3. "__type": "Customer:#StackOverflow.q9888839.UploadRelatedEntities.Models","Address": "Address 2","CustomerId": 2,"Latitude": 51.229248,"Longitude": 4.404831,"Name": "Richie Rich"
  4. },"OriginalEntity": {
  5. "__type": "Customer:#StackOverflow.q9888839.UploadRelatedEntities.Models","Name": "Rich Feynmann"
  6. }
  7. }]

因此,如果您按照上述步骤操作,Upshot将为您更新父实体和子实体.

猜你在找的asp.Net相关文章