It is necessary to transfer the source data as a viewmodel from ASP.NET MVC to knockout.js

Question

I watched a sample contact editor on knockout.js:

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

The sample works fine, but I need to make two changes:

• Pass the source data from the action method of the controller controller ASP.NET MVC 3. Here is the code from the server:

Classes

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

Sample Control Controller Code

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

• In addition to the contact lines that are part of the ViewModel, I also need to pass some data (for example, ContactListName and ContactListOwner) that do not belong to the contact lines, but to the ViewModel itself. These properties will be shown outside the contact grid.

I would really appreciate it if someone could help me with this.

Answer 1

The Json method that you call in your controller is designed to return a JsonResult , it does not create a JSON string. You should use this method to return json from an ajax call.

To return a JSON string to the view, use something like this.

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

Then in your view code

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

To answer the second question. To pass global list data, for example, simply define a new ContactsList eg class

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

Fill it and pass it instead of the JavascriptSerializer . You will obviously need to configure js ContactsModel accordingly.

EDIT

Here's a jsfiddle showing the necessary changes.

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

Hope this helps.

Answer 2

You can also use your model instead of ViewBag:

Controller:

  public ActionResult Index() { var data= GetYourDataFromSomewhere(); return View(data); } 

View:

 @model IEnumerable<ModelName> 

....

 <script type="text/javascript"> $(document).ready(function () { var dataForKO = new KOViewModel(@Html.Raw(Json.Encode(Model))); 

Answer 3

as for the first part of the question, you can try

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

the second part, which I really did not understand ...