Cần để truyền dữ liệu viewmodel ban đầu từ ASP.NET MVC để knockout.js

Question

Tôi đã nhìn vào mẫu hệ biên tập trên knockout.js website:

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

Mẫu hoạt động hoàn hảo, nhưng tôi cần để thực hiện hai thay đổi cho nó:

• Vượt qua dữ liệu ban đầu từ phương pháp tác vụ điều khiển ASP.NET MVC 3. Đây là đoạn mã từ máy chủ:

Lớp

mẫu mã phía khiển

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

• Ngoài dãy địa chỉ liên lạc là một phần của các ViewModel , Tôi cũng cần truyền một số dữ liệu (ví dụ: ContactListName và ContactListOwner) không thuộc về các hàng liên hệ mà chính là chính ViewModel. Các thuộc tính này sẽ được hiển thị bên ngoài lưới liên hệ.

Tôi thực sự đánh giá cao nếu ai đó có thể giúp tôi với điều này.

Answer 1

Phương thức Json bạn đang gọi trong bộ điều khiển của mình có nghĩa là trả lại JsonResult nó không tạo ra chuỗi JSON. Bạn sẽ sử dụng phương thức này để trả về json từ một cuộc gọi ajax.

Để trả về chuỗi JSON cho chế độ xem, hãy sử dụng thông tin như thế này.

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

Sau đó trong mã xem bạn

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

Để trả lời câu hỏi thứ hai của bạn. Để truyền dữ liệu danh sách toàn cầu như thế này chỉ cần xác định một lớp mới ContactsList ví dụ

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

dụng nhất này và chuyển thông tin này đến JavascriptSerializer để thay thế. Bạn rõ ràng sẽ cần phải điều chỉnh js của bạn ContactsModel cho phù hợp.

EDIT

Dưới đây là một jsfiddle thể hiện những thay đổi cần thiết.

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

Hy vọng điều này sẽ hữu ích.

Answer 2

như xa như phần đầu tiên của câu hỏi là có liên quan bạn có thể thử

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

phần thứ hai tôi thực sự chưa hiểu ...

Answer 3

Bạn cũng có thể sử dụng mô hình của bạn thay vì ViewBag:

Bộ điều khiển:

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

      return View(data); 
     } 

Xem:

@model IEnumerable<ModelName> 

....

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

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