2017-04-09 22 views
0

私はこれらの2つのチュートリアルで作業していましたが、テーブルを作成するアップロードCSVを取得するのが難しいです。ビューモデルの理解が不足している可能性が最も高いです。ここでアップロードの難しさcsv to knockout js table(ASP MVC)

はノックアウトjsのサイトからノックアウトJS編集可能なテーブルのためのチュートリアルです:KnockoutJS: Editable Grid Table

そして、ここでは、私が参照してるcsvファイルをアップロードするためのチュートリアルです:

KnockoutJS - Upload CSV

ここではjavascriptのコードです私は私のテーブルにcsvをアップロードするために取り組んできました。私は "JavaScriptランタイムエラー:未定義またはnull参照のプロパティ 'プッシュ'を取得することができませんを取得し続けている - 私は問題点をコメントにマーク。ご覧のとおり、ビューモデルに問題があります。

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

答えて

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(); 
     viewModel.users.push({ 
           id: csvID, 
           firstName: csvFirstName, 
           lastName: csvLastName 
          }); 
} 
関連する問題