需要将初始视图模型数据从 ASP.NET MVC 传递到 Knockout.js [英] Need to pass initial viewmodel data from ASP.NET MVC to knockout.js

问题描述

我正在看 Knockout.js 网站上的联系人编辑器示例:

I was looking at the Contacts editor sample on the knockout.js website:

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

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

The sample works perfectly, but I needed to make two changes to it:

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

示例控制器端代码

       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).这些属性将显示在联系人网格之外.

如果有人能帮我解决这个问题，我将不胜感激.

I would really appreciate if someone can help me with this.

推荐答案

您在控制器中调用的 Json 方法旨在返回它不会创建的 JsonResult一个 JSON 字符串.您将使用此方法从 ajax 调用返回 json.

The Json method you are calling in your controller is meant to return a JsonResult it does not create a JSON string. You would use this method to return json from an ajax call.

要将 JSON 字符串返回给视图，请使用类似的方法.

To return a JSON string to a view use something like this.

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

然后在您的视图代码中

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

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

To answer your second question. In order to pass global list data such as this simply define a new class ContactsList e.g

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

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

Populate this and pass this to the JavascriptSerializer instead. You will obviously need to adjust your js ContactsModel accordingly.

编辑

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

Here's a jsfiddle that demonstrates the changes needed.

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

希望这会有所帮助.

这篇关于需要将初始视图模型数据从 ASP.NET MVC 传递到 Knockout.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！