нужно передать исходные данные ViewModel из ASP.NET MVC в knockout.js

Question

Я смотрел на образец Контакты редактора на сайте 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); 

• Помимо рядов контактов, которые являются частью ViewModel , Мне также необходимо передать некоторые данные (например, ContactListName и ContactListOwner), которые не выполняются 't относится к строкам контактов, но к самому виду ViewModel. Эти свойства будут показаны вне сетки контактов.

Я бы очень признателен, если кто-то может мне помочь.

Answer 1

Метод Json, который вы вызываете в своем контроллере, предназначен для возврата JsonResult, он не создает строку JSON. Вы должны использовать этот метод для возврата json из вызова ajax.

Чтобы вернуть строку 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 соответственно.

EDIT

Вот jsfiddle, который демонстрирует необходимые изменения.

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

Надеется, что это помогает.

Answer 2

насколько первая часть вопроса касается, вы можете попробовать

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

вторую часть я действительно не понял ...

Answer 3

Вы также можете использовать модель вместо 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)));