需要从ASP.NET MVC通过初始视图模型数据knockout.js

我一直在寻找在knockout.js网站上的联系人编辑器示例：需要从ASP.NET MVC通过初始视图模型数据knockout.js

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

样品完美的作品，但我需要对其进行两处更改：

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

类从那些视图模型的一部分接点列

样品控制器端代码

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

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

我真的很感激，如果有人可以帮助我这个。

来源

2012-03-11 Yasir

什么是'ViewBag.InitialData'包含你可以发布控制器代码？你打算在'ko.applyBindings（new ContactsModel（initialData））中使用'ViewBag.InitialData';'？ – Rafay 2012-03-11 17:31:54

谢谢@ 3nigma您的回复。我在我的问题中添加了控制器端代码。是的，如果可能的话，我打算在ko.applyBindings（new ContactsModel（initialData））中使用ViewBag.InitialData。 – Yasir 2012-03-11 18:50:33

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

要JSON字符串返回到视图使用这样的事情。

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

然后在您的视图代码

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

要回答你的第二个问题。为了通过全局列表数据，比如这只是定义一个新类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。

编辑

以下是一个演示所需要的变化的jsfiddle。

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

希望这有助于。

来源

2012-03-11 19:02:33 madcapnmckay

这就是我所做的，我把这个类叫做ContactsViewModel而不是ContactList。视图绑定到ViewModel类而不是Model。 – Raj 2012-03-11 19:19:07

感谢@madcapnmckay为您解答。我试过你给出的代码，但它增加了数十和数十个空白行，而不是我在viewbag中传递的两行。我错过了什么吗？ – Yasir 2012-03-11 19:20:56

另外，我没有为初始数据加载调用任何ajax方法。这有什么区别？我在我的控制器的Index（）操作方法中设置ViewBag.InitialData。这种方法正在用于第一次渲染视图。 – Yasir 2012-03-11 19:25:35

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

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

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

来源

2012-03-11 19:49:56 Rafay

感谢@ 3nigma为第一部分的代码。有用。我编辑了问题中第二部分的描述。希望这是更清晰了。 – Yasir 2012-03-11 20:09:07

基于@ madcapnmckay的回答获得了第二部分工作。感谢你的帮助。 – Yasir 2012-03-12 03:45:21

你也可以用你的模型，而不是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)));

来源

2012-04-20 18:26:07 klabranche

需要从ASP.NET MVC通过初始视图模型数据knockout.js

回答

相关问题