I forum Ricerca FAQ
Fai una domanda
Ultimo messaggio
cleaner
cleaner
il 23 febbraio 2013 alle 15:50
25 messaggi dal 14 luglio 2011
Ciao a tutti, ho un problma; ho una applicazione mvc 4 che espone tramite web api un metodo http://localhost:50661/api/Invoice/GetAllInvoices

Ora, come faccio a visualizzare i dati tramite knockout nella mia view? Mi potreste fare un piccolo esempio? Questo è il model su cui si basa il metodo


        public int id { get; set; }
        public int invoiceNumber { get; set; }
        public DateTime invoiceDate { get; set; }
        public double grossAmount { get; set; }
        public double supplementaryContribution { get; set; }
        public double netAmount { get; set; }
        public string customer { get; set; }


grazie
RispondiQuoting
BrightSoul
BrightSoul
il 23 febbraio 2013 alle 18:20
11.886 messaggi dal 09 febbraio 2002
Contributi
ciao,
trattandosi di una action chiamata "GetAllInvoices" immagino che restituisca una collezione di tipo Invoice.
In questo caso ti occorre preparare una tabella (ad esempio) in cui visualizzare tutti i risultati. Nella documentazione di KnockoutJS trovi un articolo che ti può dare qualche spunto.
http://knockoutjs.com/documentation/foreach-binding.html

Al paragrafo "Iterating over an array" vedi appunto la tabella in questione, che nel tuo caso potrebbe essere simile a questa:
<table>
    <thead>
        <tr>
            <th>id</th>
            <th>invoice number</th>
            <th>invoice date</th>
            <th>gross amount</th>
            <th>supplementary contribution</th>
            <th>net amount</th>
            <th>customer</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: invoices">
        <tr>
            <td data-bind="text: id"></td>
            <td data-bind="text: invoiceNumber"></td>
            <td data-bind="text: invoiceDate"></td>
            <td data-bind="text: grossAmount"></td>
            <td data-bind="text: supplementaryContribution"></td>
            <td data-bind="text: netAmount"></td>
            <td data-bind="text: customer"></td>
        </tr>
    </tbody>
</table>

Nota l'uso del foreach: invoices nel <tbody> della tabella. KnockoutJS cercherà una proprietà chiamata "invoices" all'interno del viewModel e, per ciascun elemento contenuto in essa, ripeterà tante volte l'elemento <tr>.
Dunque crea un viewModel che abbia al suo interno una proprietà "invoices" di tipo observableArray.
<script type="text/javascript">
   var viewModel = {
       invoices: ko.observableArray()
   };
   //applico il viewModel alla view
   ko.applyBindings(viewModel);
</script>

A questo punto a te interessa riempire la proprietà "invoices" con tutti i risultati che ti arrivano da /api/invoice/GetAllInvoices.
Per far questo puoi usare una chiamata ajax. Se usi jQuery vai così:
   $.get("/api/invoice/GetAllInvoices").success(function (data) {
       //riempio invoices con i dati che mi sono arrivati da GetAllInvoices
       viewModel.invoices(data);
   });

...e basta così. Dato che invoices è un costrutto del tipo observableArray, sarà in grado di rilevare da sola il momento esatto in cui gli passi i dati che arrivano da GetAllInvoices e subito provvederà a rielaborare la view affinché mostri tutti i risultati.

ciao, buon weekend
Modificato da BrightSoul il 23 febbraio 2013 18.24 -
Enjoy learning and just keep making
RispondiQuoting

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.