json - 需要将初始ViewModel数据从ASP.NET MVC传递到 knockout

Question

我正在看敲门网站上的“联系人”编辑器示例:

http://knockoutjs.com/examples/contactsEditor.html

该示例可以完美运行，但是我需要对其进行两项更改:

从ASP.NET MVC 3 Controller 操作方法传递初始数据。这是来自服务器的代码:

类

public class Phone
{
    public string Type { get; set; }
    public string Number { get; set; }
}

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public List<Phone> Phones { get; set; }
}

样本 Controller 辅助代码

       List<Phone> phoneList = new List<Phone>();

        Person p1 = new Person()
        {
            FirstName = "Abc",
            LastName = "Xyz"
        };

        Phone phone1 = new Phone()
        {
            Type = "Home",
            Number = "1111111111"
        };
        Phone phone2 = new Phone()
        {
            Type = "Mobile",
            Number = "1111111112"
        };

        phoneList.Add(phone1);
        phoneList.Add(phone2);

        p1.Phones = phoneList;

        List<Phone> phoneList2 = new List<Phone>();

        Person p2 = new Person()
        {
            FirstName = "Pqr",
            LastName = "Stu"
        };

        Phone phone3 = new Phone()
        {
            Type = "Home",
            Number = "1111111113"
        };
        Phone phone4 = new Phone()
        {
            Type = "Mobile",
            Number = "1111111114"
        };

        phoneList2.Add(phone3);
        phoneList2.Add(phone4);

        p2.Phones = phoneList2;

        people.Add(p1);
        people.Add(p2);

        ViewBag.InitialData = Json(people, JsonRequestBehavior.AllowGet);

除了作为ViewModel一部分的联系人行之外，我还需要传递一些不属于联系人行而是属于ViewModel本身的数据(例如ContactListName和ContactListOwner)。这些属性将显示在联系人网格的外部。

如果有人可以帮助我，我将不胜感激。

Answer 1

您在 Controller 中调用的Json方法旨在返回不创建JSON字符串的JsonResult。您将使用此方法从ajax调用返回json。

要向 View 返回JSON字符串，请使用类似以下的内容。

JavaScriptSerializer serializer = new JavaScriptSerializer();
ViewBag.InitialData = serializer.Serialize(people); 

然后在您的查看代码中

<script>
    var initialData = '@Html.Raw(ViewBag.InitialData)';
    ....
</script>

回答第二个问题。为了传递这样的全局列表数据，只需定义一个新类ContactsList例如

public class ContactsList 
{
    public string Name { get;set; }
    public string Owner { get;set; }
    public IList<People> People { get;set; }
}

填充它，并将其传递给JavascriptSerializer。显然，您将需要相应地调整js ContactsModel。

编辑

这是一个演示所需更改的jsfiddle。

http://jsfiddle.net/madcapnmckay/jRjwU/

希望这可以帮助。