需要從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

回答

相關問題