0

ファイルを添付例: http://jsfiddle.net/brux88/9fzG4/1/

こんにちは、asp.net mvc プロジェクトでノックアウト js を使い始めています。

私はビューを持っています:

 <button  data-bind='click: load'>Load</button>


<table>
            <thead>
                <tr>
                    <th>Cliente</th>
                    <th>Colli</th>
                    <th>Tara</th>
                    <th>Peso Tara</th>
                    <th> </th>
                </tr>
            </thead>
            <tbody data-bind='foreach: righe'>
                <tr>
                    <td>
                        <select  data-bind="
                           value: selectedCli,
                           options:  clienteList,
                           optionsText: function(item) { return item.Rscli + '-' + item.Codcli },
                           optionsCaption: '--Seleziona un Cliente--'"
                           style=" width: 150px">
                        </select>
                     </td>
                    <td >
                        <input data-bind='value: Ncolli' />
                    </td>

                    <td>
                        <select data-bind="value: selectedTara,
                                          options:  taraList,
                                          optionsText:  function(item) { return item.Destara  + 

'-' + item.Codtara},
                        optionsCaption: '--Seleziona un Cliente--'"

                                style=" width: 150px">
                        </select>
                    </td>
                    <td >
                        <input  data-bind="value: Ptara" />
                    </td>


                    <td>
                        <a href='#' data-bind='click: $parent.rimuoviRiga'>Elimina</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <button   data-bind='click: aggiungiRiga'>Aggiungi</button>
        <button  data-bind='click: salva'>Salva</button>
        <button  data-bind='click: annulla'>Annulla</button>​

データデータベースからの私の結果:

[{"Codcli":4,"Rscli":"antonio","Codtart":"1002","Despar":"ciliegino","Ncolli":10,"Pcolli":100,"Codtara":"03","Destara":"","Ptara":82,"Pnetto":18,"Prezzo":1},{"Codcli":1,"Rscli":"bruno","Codtart":"1001","Despar":"pomodoro","Ncolli":10,"Pcolli":100,"Codtara":"03","Destara":"","Ptara":10,"Pnetto":90,"Prezzo":1}]

私のビューモデルノックアウトjs:

        <script type="text/javascript">
  var listCli= [{Codcli: 1,Rscli: "Bruno"},{Codcli: 2,Rscli: "Pippo"},{Codcli: 3,Rscli: "Giacomo"}];
var listTa= [{Codtara: 01,Destara: "Plastica",Pertara:4},{Codtara: 02,Destara: "Legno",Pertara:6},{Codtara: 03,Destara: "Ploto",Pertara:8}];

var mydataserver = [{"Codcli":3,"Rscli":"Giacomo","Ncolli":10,"Codtara":"03","Destara":"Legno","Ptara":82},{"Codcli":1,"Rscli":"Bruno","Ncolli":10,"Codtara":"02","Destara":"Plastica","Ptara":10}];

 var RigaOrdine = function () {
     var self = this;
                self.selectedCli = ko.observable();
                self.clienteList = ko.observableArray(listCli);            
                self.Ncolli = ko.observable();
                self.selectedTara = ko.observable();
                self.taraList = ko.observableArray(listTa);
                self.Ptara = ko.observable();


                self.Ncolli.subscribe(function () {
                    self.Ptara(self.Ncolli() ? self.selectedTara().Pertara * self.Ncolli() : 0);
                });



                self.selectedTara.subscribe(function () {
                    self.Ptara(self.Ncolli() ? self.selectedTara().Pertara * self.Ncolli() : self.selectedTara().Pertara);
                });
            };


            var Ordine = function () {
                var self = this;
                self.righe = ko.observableArray([new RigaOrdine()]); // Put one line in by default



                // Operations
                self.aggiungiRiga = function () { 
                    self.righe.push(new RigaOrdine());
                        };
                self.rimuoviRiga = function (riga) { 
                    self.righe.remove(riga);
                        };


                self.salva = function() {
                 var righe = $.map(self.righe(), function (riga) {
                        return riga.selectedCli() ? {
                            Codcli: riga.selectedCli().Codcli,
                            Rscli: riga.selectedCli().Rscli,
                            Ncolli: riga.Ncolli(),
                            Codtara: riga.selectedTara().Codtara,
                            Ptara: riga.Ptara(),
                            } : undefined;
                    });
                    alert( ko.toJSON(righe));
                    //save to server
                   /* $.ajax({
                        url: "/echo/json/",
                        type: "POST",
                        data: ko.toJSON(righe),
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        success: function(data) {
                        }
                    });*/
                    self.righe([new RigaOrdine()]);
                };

                //load from server
                self.load = function() {
                    $.ajax({ url: '/echo/json/', 
                      accepts: "application/json", 

                      cache: false, 
                      statusCode: { 

                        200: function (data) {
                            alert(ko.toJSON(mydataserver));
                            //i do not know apply to viewmodel
                        }, 
                        401: function (jqXHR, textStatus, errorThrown) { 
                          alert('401: Unauthenticated'); 
                         // self.location = "../../Account/Login.html?returnURL=/Index.html"; 
                        } 
                      } 
                    }); 


                };
                self.annulla = function() {
                    self.righe([new RigaOrdine()]);
                };



            };
            var viewmodel = new Ordine();
           ko.applyBindings(viewmodel);


​

    </script>

データベースからデータをロードしたい場合、どうすればよいですか? ドロップダウンリストがありますが

4

2 に答える 2

0

あなたの質問は少し弱いので、より一般的な回答をします。

データベースからデータをロードする方法に関する質問に答えるには、正しい道を歩み始めたようです。通常、AJAX リクエストを使用してデータの非同期リクエストを行います。これを行うために、knockoutJS は次の関数を提供します。

$.getJSON("/some/url", function(data) { 
    // Now use this data to update your view models, 
    // and Knockout will update your UI automatically
})

ソース: http://knockoutjs.com/documentation/json-data.html

提供されたコールバックで、サーバーから返されたデータにアクセスできます。ここで何をしたいかは、アプリケーションのロジックによって異なります。一部のアプリケーションでは、ビューモデルの状態を更新して、ビューで対応する更新を行うことが理にかなっている場合があります。

質問がより具体的である場合は、詳しく説明してください。それ以外の場合は、正しい軌道に乗ったことを願っています。

于 2012-09-04T18:32:40.740 に答える
0

私が見ることができるように..ロードするための良い練習が必要になる場合があります。私はあなたと私のものを共有します。

さて.. JsonをJsonResultとして返します。

    // POST: /Client/LoadClient
    [HttpPost]
    public JsonResult LoadClient(int? id)
    {
        if (id == null) return null;

        var client = _business.FindById((int) id);

        return Json(
            new
            {
                id = cliente.id,
                name = cliente.name,
                list = cliente.listOfSomething.Select(s => new {idItemFromList = s.idWhatever, nameItemFromList = s.nameWhatever})
            });

    }

JS

viewmodel.Client.prototype.LoadClient= function (id) {
var self = this;

if (id == 0) {
    return null;
}

$.ajax({
    url: actionURL("LoadClient", "Client"),
    data: { id: parseInt(id) },
    dataType: "json",
    success: function (result) {
        if (result != null)
            self.Load(result);
    }
});

ロード方法。

viewmodel.Client.prototype.Load = function (result) {
var self = this;

self.idClient(result.id);
self.nameCliente(result.name);
self.ListOfSomething(result.list);
};

と..

ko.applyBinding (あなたのモデル);

ご覧のとおり、プロトタイプを使用していますが、これも良い習慣です。

于 2012-09-04T18:57:59.760 に答える