Необходимо передать начальные данные viewmodel из ASP.NET MVC в knockout.js

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, мне также необходимо передать некоторые данные (например, ContactListName и ContactListOwner), которые принадлежат не строкам контактов, а самому ViewModel. Эти свойства будут показаны за пределами сетки контактов.

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

Answer 1

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

Метод 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 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>

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