带有ServiceStack的AngularJS友好的List和Dictionary返回类型

本文关键字：Dictionary List 返回类型 ServiceStack AngularJS 带有 | 更新日期: 2023-09-27 18:13:47

AngularJS不能绑定到值类型模型，如下所示:

  • https://github.com/angular/angular.js/issues/1267
  • 在ng-repeat
    • 中修改'

在服务器端我只有一个字符串列表:

[Route("/path/{Id}", "GET, OPTIONS")]
public class MyModel
{
    public int Id { get; set; }
    public List<string> SomeListItems { get; set; }
}

当我想绑定(与ng-model输入)到列表项通过ng-repeat它不工作，因为ServiceStack序列化它们作为字符串数组。

是否有可能告诉ServiceStack序列化器序列化和反序列化列表和字典作为可以与AngularJS绑定一起使用的对象?

。

{
    "id": 1,
    "someListItems": [
        { "value": "Item1" },
        { "value": "Item2" },
        ...
    ]
}

字典也一样。

我发现唯一的解决方案是返回一个List<KeyValuePair<string, string>>，但这是非常丑陋的服务器端。

带有ServiceStack的AngularJS友好的List和Dictionary返回类型

为什么需要将字符串列表转换为关联数组?AngularJs可以处理数组的迭代。

下面的plnkr演示了:http://plnkr.co/edit/TcXxSBkt7NBkqNJhkSE1

本质上，服务器返回对象，属性SomeListItems是一个数组。

使用ng-repeat遍历它们

<ul>
    <li ng-repeat="item in data.SomeListItems">{{item}}</li>
  </ul>

我看到了两个解决这个问题的方法，要么在客户端修改数据结构，要么在服务器端修改数据结构。

下面是一个plnkr，它显示了将从服务器接收到的字符串数组转换为关联数组，以便在客户端上进行编辑，然后重新转换回单维数组，以便发布到服务器。

相反，您可以在服务器上执行此操作。如果你将SomeListItems声明为一个动态列表，那么你可以给它分配任何你想要的东西，包括ServiceStack序列化器应该能够处理的匿名对象(我还没有测试过，但我认为它会工作)。

[Route("/path/{Id}", "GET, OPTIONS")]
public class MyModel
{
    public int Id { get; set; }
    public List<dynamic> SomeListItems { get; set; }
}
// in a controller or service
var model = new MyModel() { Id = 1 };
model.SomeListItems =  new List<dynamic> {
  new { Key = 1, Value = "foo }, new {Key = 2, Value = "bar" }
}; // this should serialize to JSON as { Id: 1, SomeListItems: [ {Key: 1, Value: 'foo'}, {Key:2, Value = 'bar'}]}; which angular can handle nicely

或者，您可以指定一个比KeyValuePair<string, string>

更简短的自定义类
public class JsonPayload
{ // yes, it's just a KVP, but it's much more concise
  public string Key {get;set;}
  public string Value {get;set;}
}

，然后重新定义模型

[Route("/path/{Id}", "GET, OPTIONS")]
public class MyModel
{
    public int Id { get; set; }
    public List<JsonPayload> SomeListItems { get; set; }
}

这比使用动态更冗长，但JSON序列化应该能够处理这个

相关文章：