MVVM架構~Knockoutjs系列之js接收C#數據集合的方式

返回目錄

在controller里將數據拿到，並且存儲到ViewBag對象里，最后在View上顯示出來，這是傳統的MVC開發方式，事實上引入Knockoutjs以后，這種方式還是適合的，Knockoutjs只是在前台數據綁定中做了一點調整，它不在依賴於后台具體數據，你完全可以在

最后去為它動態綁定數據，一般地，我們會為這種頁面添加一個JS文件，用來獲取數據，以實現前台開發人員與后台代碼開發人員的分離。

從view層拿數據的方式有兩種，第一是通過ViewBag,ViewData,TempData,Model等容器來存儲，然后在View上直接取即可，而第二種方式是通過一個GET請求，它通常是異步的，你可以使用JQ里的getJSON,它可以方便的實現數據的獲取工作，它對集合的支

持是比較好的。

方式一，通過ViewBag等容器實現的集合

 var json =@Html.Raw(Json.Encode(ViewBag.Category));

這時，json變量已經是一個Json數組了，它將C#里的IEnumable集合轉換成了JSON對象

方式二，通過getJSON等方式實現異步獲取

注意，異步執行，它的意思是說，你的頁面在一個ajax請求時，不會去等待它，而是直接執行下面的語句，這樣，對於大數據量情況下，瀏覽器不會假死，用戶體驗會好一些，但有時，開發人員在寫代碼時，往往會掉到AJAX的陷阱中，看下面代碼：

        $.getJSON("http://localhost:2166/api/values/", function (data) {
            var Cart = function () {
                // Stores an array of lines, and from these, can work out the grandTotal
                var self = this;
                //self.lines = ko.observableArray([new CartLine()]);
                self.lines = ko.observableArray(data);
                // Operations
                self.addLine = function () { self.lines.push(new CartLine()) };
                self.removeLine = function (line) { self.lines.remove(line) };
            }
        });

        ko.applyBindings(new Cart());

不仔細看，看不出問題，但一運行程序，問題就出來了，“從服務器那邊獲取不到數據”，這是為什么呢，明明有數據呀，這就是AJAX的陷阱了，你的 ko.applyBindings(new Cart())沒有等待上面的取數據完，就輸出了，所以，什么都沒有，下面是正常的代碼

你可以對比一下：

        $.getJSON("http://localhost:2166/api/values/", function (data) {
            var Cart = function () {
                // Stores an array of lines, and from these, can work out the grandTotal
                var self = this;
                //self.lines = ko.observableArray([new CartLine()]);
                self.lines = ko.observableArray(data);
                // Operations
                self.addLine = function () { self.lines.push(new CartLine()) };
                self.removeLine = function (line) { self.lines.remove(line) };
            }
            ko.applyBindings(new Cart());
        });

怎么樣，只是代碼的位置不同，結果就完全不同吧，呵呵！所以說，我們對問題的理解程度，有時，應該有一種“模棱兩不可”的精神！

返回目錄