Json 需要将初始viewmodel数据从ASP.NET MVC传递到knockout.js

我在看knockout.js网站上的Contacts editor示例：

该示例运行良好，但我需要对其进行两个更改：

• 从ASP.NET MVC 3控制器操作方法传递初始数据。以下是来自服务器的代码：

课程

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; }
}

公共类电话
{
公共字符串类型{get；set；}
公共字符串编号{get；set；}
}
公共阶层人士
{
公共字符串名{get；set；}
公共字符串LastName{get；set；}
公共列表电话{get；set；}
}

样本控制器端代码

       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);

List phoneList=新列表（）；
人员p1=新人员（）
{
FirstName=“Abc”，
LastName=“Xyz”
};
Phone phone1=新电话（）
{
Type=“Home”，
Number=“1111111”
};
Phone phone2=新电话（）
{
Type=“Mobile”，
Number=“1111111112”
};
电话列表。添加（电话1）；
电话列表。添加（电话2）；
p1.电话=电话列表；
List phoneList2=新列表（）；
人员p2=新人员（）
{
FirstName=“Pqr”，
LastName=“Stu”
};
Phone phone3=新电话（）
{
Type=“Home”，
Number=“1111113”
};
Phone phone4=新电话（）
{
Type=“Mobile”，
Number=“1111114”
};
电话列表2.添加（电话3）；
电话列表2.添加（电话4）；
p2.电话=电话列表2；
人员。添加（p1）；
新增（p2）；
ViewBag.InitialData=Json（people，JsonRequestBehavior.AllowGet）；

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

---

如果有人能帮我，我将不胜感激。

您在控制器中调用的

Json

方法旨在返回

JsonResult

它不会创建Json字符串。您可以使用此方法从ajax调用返回json

要将JSON字符串返回到视图中，请使用类似以下内容

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

然后在您的视图代码中

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

填充并将其传递给

JavascriptSerializer

。显然，您需要相应地调整js

ContactsModel

编辑

下面是一个JSFIDLE，它演示了所需的更改

---

希望这有帮助。

关于问题的第一部分，你可以试试

<script>
    var initialData = '@Html.Raw(ViewBag.InitialData)'; //get the raw json
    var parsedJSON = $.parseJSON(initialData); //parse the json client side
    ko.applyBindings(new ContactsModel(parsedJSON));

</script>

var initialData='@Html.Raw（ViewBag.initialData）'//获取原始json
var parsedJSON=$.parseJSON（initialData）//解析json客户端
ko.applyBindings（新联系人模型（parsedJSON））；

---

第二部分我真的不明白…

您也可以使用您的模型而不是ViewBag：

控制器：

        public ActionResult Index()
        {
            var data= GetYourDataFromSomewhere();

            return View(data);
         }

视图：

@model IEnumerable

$（文档）.ready（函数（）{
var dataForKO=newkoviewmodel（@Html.Raw（Json.Encode（Model））；

ViewBag.InitialData包含什么？您可以发布控制器代码吗？是否打算在

ko.applyBindings（新联系人模型（InitialData））中使用
ViewBag.InitialData
；

？感谢@3nigma的回复。我在问题中添加了控制器端代码。是的，我打算在ko.applyBindings（新联系人模型（InitialData））中使用ViewBag.InitialData）如果可能的话。这就是我要做的，我称这个类为ContactsViewModel而不是ContactList。视图绑定到ViewModel类而不是Model。谢谢@madcapnmckay的回答。我尝试了你给出的代码，但它添加了几十行空白行，而不是我在我的viewbag中传递的两行。我是否遗漏了什么？另外，我不知道为初始数据加载设置任何ajax方法。这会有什么区别吗？我正在索引（）中设置ViewBag.InitialData我的控制器的action方法。这个方法是第一次用来呈现视图。缺少ajax并不重要。我之前忘记了包含Raw语句。我添加了一个JSFIDLE来演示您需要对示例进行的更改。您好，@madcapnmckay。我试着将这个示例复制到实际的业务sc中我拥有的enario，但不知何故绑定不起作用。你能看看吗？提前谢谢。感谢@3nigma为第一部分编写的代码。它起作用了。我已经编辑了问题中第二部分的描述。希望现在更清楚。根据@madcapnmckay的回答，第二部分也起作用了。谢谢你的帮助。

        public ActionResult Index()
        {
            var data= GetYourDataFromSomewhere();

            return View(data);
         }

@model IEnumerable<ModelName>

<script type="text/javascript">
    $(document).ready(function () {

        var dataForKO = new KOViewModel(@Html.Raw(Json.Encode(Model)));