bisogno di passare dati iniziali ViewModel da ASP.NET MVC a knockout.js

Question

stavo guardando il campione Contatti Editor sul sito knockout.js:

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

L'esempio funziona perfettamente, ma avevo bisogno per apportare due modifiche:

• Passare i dati iniziali dal metodo di azione del controller ASP.NET MVC 3. Ecco il codice dal server:

Classi

Esempio codice lato controller

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

• Oltre a filari di contatti che fanno parte del ViewModel , Ho anche bisogno di passare alcuni dati (ad esempio ContactListName e ContactListOwner) che non lo fa appartenere alle file di contatti ma al ViewModel stesso. Queste proprietà verranno mostrate all'esterno della griglia dei contatti.

Sarei davvero grato se qualcuno mi può aiutare con questo.

Answer 1

Il metodo Json che si sta chiamando nel controller è pensato per restituire un JsonResult non crea una stringa JSON. Dovresti utilizzare questo metodo per restituire JSON da una chiamata Ajax.

Per restituire una stringa JSON a una vista, utilizzare qualcosa di simile.

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

Poi nel codice vista

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

Per rispondere alla tua seconda domanda. Per passare dati dell'elenco globali come questa semplicemente definire una nuova classe ContactsList es

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

popolano questo e passare questo invece il JavascriptSerializer. Ovviamente dovrai modificare il tuo js ContactsModel di conseguenza.

EDIT

Ecco un jsfiddle che dimostra i cambiamenti necessari.

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

Spero che questo aiuti.

Answer 2

per quanto riguarda la prima parte della domanda è interessato si può provare

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

la seconda parte io veramente non ho capito ...

Answer 3

Si potrebbe anche usare il vostro modello al posto del ViewBag:

Controller:

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

      return View(data); 
     } 

Vista:

@model IEnumerable<ModelName> 

....

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

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