为什么Jquery没有用数组中的数据填充ASP.NetCore表？

我正在做一个基于ASP.NET核心MVC的项目。我在HomeController.cs中有一个方法（“MostrarDatos（）”），它读取Excel文件并用它填充数组。我已经检查了console.log，我看到了具有正确信息的数组。

现在，当我尝试使用上述数组加载一个表时，使用Jquery，我无法实现。
我的HTML代码：

<div class="row">
    <div class="col-sm-12">
        <div class="card">
            <div class="card-header"> Load Excel File</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-4">
                        <input class="form-control-file" type="file" id="inputExcel" />
                    </div>
                    <div class="col-sm-4">
                         <button class="btn btn-warning" onclick="mostrarDatos()">Show Info</button>
                         <button class="btn btn-success" onclick="enviarDatos()">Send info to DB</button>
                     </div>
                </div>
                <hr />
                <div class="row">
                    <div class="col-sm-12">
                        <table id="tbData" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>UnixTimestamp</th>
                                    <th>Date</th>
                                    <th>Quantity</th>
                                    <th>ProductName</th>
                                    <th>Gross</th>
                                    <th>Net</th>
                                    <th>Received</th>
                                    <th>Source</th>
                                    <th>Location</th>
                                    <th>ProductID</th>
                                    <th>FromKey</th>
                                    <th>ToKey</th>
                                    <th>FromName</th>
                                    <th>ToName</th>
                                    <th>LuckyChair</th>
                                    <th>MidnightMadness</th>
                                    <th>Gatcha</th>
                                    <th>GiftCard</th>
                                    <th>TransactionID</th>
                                    <th>AffiliateKey</th>
                                    <th>AffiliateName</th>
                                    <th>VendorKey</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我的Jquery代码：

<script>
        
    function mostrarDatos(){
        const input = document.getElementById("inputExcel")

        const formData = new FormData()

        formData.append("ArchivoExcel",input.files[0])

        fetch("Home/MostrarDatos", {
            method: "POST",
            body:formData
        })
        .then((response) => {return response.json()})
        .then((dataJson) => {
            
            console.log(dataJson)

            dataJson.forEach((item) => {
                $("#tbData tbody").append(
                    $("<tr>").append(
                        $("<td>").text(item.UnixTimestamp),
                        $("<td>").text(item.Date),
                        $("<td>").text(item.Quantity),
                        $("<td>").text(item.ProductName),
                        $("<td>").text(item.Gross),
                        $("<td>").text(item.Net),
                        $("<td>").text(item.Received),
                        $("<td>").text(item.Source),
                        $("<td>").text(item.Location),
                        $("<td>").text(item.ProductID),
                        $("<td>").text(item.FromKey),
                        $("<td>").text(item.ToKey),
                        $("<td>").text(item.FromName),
                        $("<td>").text(item.ToName),
                        $("<td>").text(item.LuckyChair),
                        $("<td>").text(item.MidnightMadness),
                        $("<td>").text(item.Gatcha),
                        $("<td>").text(item.GiftCard),
                        $("<td>").text(item.TransactionID),
                        $("<td>").text(item.AffiliateKey),
                        $("<td>").text(item.AffiliateName),
                        $("<td>").text(item.VendorKey),
                        $("<td>").text(item.Status)
                        )
                )
            })
        })
}
</script>

我想做的是用dataJson数组上的相应信息填充#tbData表的每个单元格（td）。
This is the result once I press the "Show Info" button after choosing an Excel file.

<script>
        
    function mostrarDatos(){
        const input = document.getElementById("inputExcel");

        const formData = new FormData();

        formData.append("ArchivoExcel",input.files[0]);

        //Dentro del fetch va la URL del metodo que creamos en el HomeController.cs
        fetch("Home/MostrarDatos", {
            method: "POST",
            body:formData
        })
        //Espera la respuesta a través de un promise
        .then((response) => {return response.json()})
        //dataJson recive todo el contenido del archivo Excel
        .then((dataJson) => {
            
            console.log(dataJson)

            dataJson.forEach((item) => {
             
            //cada elemento del dataJson se almacena en item
                $("#tbData tbody").append(
                    $("<tr>").append(
                        $("<td>").text(item.unixTimestamp),
                        $("<td>").text(item.date),
                        $("<td>").text(item.quantity),
                        $("<td>").text(item.productName),
                        $("<td>").text(item.gross),
                        $("<td>").text(item.net),
                        $("<td>").text(item.received),
                        $("<td>").text(item.source),
                        $("<td>").text(item.location),
                        $("<td>").text(item.productID),
                        $("<td>").text(item.fromKey),
                        $("<td>").text(item.toKey),
                        $("<td>").text(item.fromName),
                        $("<td>").text(item.toName),
                        $("<td>").text(item.luckyChair),
                        $("<td>").text(item.midnightMadness),
                        $("<td>").text(item.gatcha),
                        $("<td>").text(item.giftCard),
                        $("<td>").text(item.transactionID),
                        $("<td>").text(item.affiliateKey),
                        $("<td>").text(item.affiliateName),
                        $("<td>").text(item.vendorKey),
                        $("<td>").text(item.status)
                        )
                )
            })
        })
}
</script>

为什么Jquery没有用数组中的数据填充ASP.NetCore表？

1条答案

相关问题

热门标签

最新问答