Question

我正在查看knockout.js网站上的联系人编辑器示例：

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

示例工作正常，但我需要对其进行两处更改：

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

如果有人能帮助我，我真的很感激。

Answer 1

您在控制器中调用的Json方法意味着返回JsonResult它不会创建JSON字符串。您可以使用此方法从ajax调用返回json。

要将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/

希望这有帮助。

Answer 2

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

控制器：

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

Answer 3

就问题的第一部分而言，你可以尝试

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

第二部分我真的不明白......

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

3 个答案: