难以将 csv 上传到淘汰赛 js 表（ASP MVC）答案

【问题标题】：Difficulty with upload csv to knockout js table (ASP MVC)难以将 csv 上传到淘汰赛 js 表（ASP MVC）
【发布时间】：2017-04-10 07:32:31
【问题描述】：

我一直在使用这两个教程，但是很难将它们合并在一起以获取上传的 csv 来填充表格。很可能是我对视图模型缺乏了解。

这是来自 Knockout js 网站的 Knockout js 可编辑表的教程：KnockoutJS: Editable Grid Table

这是上传我引用的 csv 的教程：

KnockoutJS - Upload CSV

这是我一直在编写的用于将 csv 上传到我的表格的 javascript 代码。我不断收到“JavaScript 运行时错误：无法获取未定义或空引用的属性‘推送’” - 我在 cmets 中标记了问题点。如您所见，我在使用视图模型时遇到了问题。

<script>
    var UserModel = function (users) {
        var self = this;
        self.users = ko.observableArray(users);

        self.addUser = function () {
            self.users.push({
                id: "",
                firstName: "",
                lastName: ""
            });
        };

        self.removeUser = function (user) {
            self.users.remove(user);
        };

        self.save = function (form) {

            sendData = ko.toJSON(self.users);


            $.ajax({
                url: '/Users/CreateMultiple',
                contentType: 'application/json',
                async: true,
                type: 'POST',
                dataType: 'json',
                data: sendData,
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log("FAIL: " + errorThrown);
                },
                success: function (data, textStatus, jqXHR) {
                    console.log("SUCCESS");
                }
            });


        };
    };

    var viewModel = new UserModel([
        { id: "", firstName: "", lastName: "" }
    ]);
    ko.applyBindings(viewModel);

    // Activate jQuery Validation
    $("form").validate({ submitHandler: viewModel.save });


    /////
    /////Upload CSV 
    /////


    $('#lnkUpload').click(function () {
        var FileToRead = document.getElementById('UserFile');
        if (FileToRead.files.length > 0) {
            var reader = new FileReader();

            reader.onload = Load_CSVData;

            reader.readAsText(FileToRead.files.item(0));

        }
    });   

    function Load_CSVData(e) {


        CSVLines = e.target.result.split(/\r\n|\n/);
        $.each(CSVLines, function (i, item) {

            var element = item.split(",");
            var csvID = (element[0] == undefined) ? "" : element[0].trim();
            var csvFirstName = (element[1] == undefined) ? "" : element[1].trim();
            var csvLastName = (element[2] == undefined) ? "" : element[2].trim();



            UserModel.users.push(new UserModel()//here's my problem
                .id(csvID)
                .firstName(csvFirstName)
                .lastName(csvLastName)

            )
        });
    }  

</script>

【问题讨论】：

标签： asp.net-mvc csv knockout.js

【解决方案1】：

我能够确定可观察数组的完全限定条件，从而使其工作：

function Load_CSVData(e) {
    CSVLines = e.target.result.split(/\r\n|\n/);
                $.each(CSVLines, function (i, item) {

                    var element = item.split(",");
                    var csvID = (element[0] == undefined) ? "" : element[0].trim();
                    var csvFirstName = (element[1] == undefined) ? "" : element[1].trim();
                    var csvLastName = (element[2] == undefined) ? "" : element[2].trim();
        viewModel.users.push({
                                id: csvID,
                                firstName: csvFirstName,
                                lastName: csvLastName
                            });
}

【讨论】：