使用 jQuery MVC 将 SQL 表数据转换为 HTML 表答案

【问题标题】：SQL table data to HTML table using jQuery MVC使用 jQuery MVC 将 SQL 表数据转换为 HTML 表
【发布时间】：2018-07-05 06:15:51
【问题描述】：

我正在尝试将 SQL 表的详细信息转换为 HTML 表，我所做的是创建了一个控制器、模型和视图。我还创建了包含凭证编号和金额字段的 SQL 表。下面是我创建控制器的方法，这里我引用了模型，模型演示

<HttpGet>
Function GetSalesDetail(invoiceId As String) As JsonResult
    Dim listSalesDetail As List(Of Hashtable) = New ModelDemo().GetSalesDetail(invoiceId)
    Return Json(listSalesDetail, JsonRequestBehavior.AllowGet)
End Function

模型演示代码由 SQL 连接组成

Public Function GetSalesDetail(invoiceId As String) As List(Of Hashtable)
    Dim listSalesDetail As List(Of Hashtable) = New List(Of Hashtable)
    Dim arraySalesDetail As Hashtable
    'Dim arraySalesDetail As Dictionary(Of String, String) '**Associative array**'
    Dim conn = New SqlConnection(connStringLocal)
    conn.Open()
    Using query = New SqlCommand("SELECT vchNum,productName,Qty,Price,Amount,total FROM BillDetails 
    WHERE vchNum='" & invoiceId & "'", conn)
        Using resultSet = query.ExecuteReader
            If resultSet.HasRows Then
                While resultSet.Read()
                    'arraySalesDetail = New Dictionary(Of String, String)
                    arraySalesDetail = New Hashtable
                    arraySalesDetail.Add("vchNum", resultSet("vchNum"))
                    arraySalesDetail.Add("ProductName", resultSet("ProductName"))
                    arraySalesDetail.Add("Qty", resultSet("Qty"))
                    arraySalesDetail.Add("Price", resultSet("Price"))
                    arraySalesDetail.Add("Amount", resultSet("Amount"))
                    arraySalesDetail.Add("total", resultSet("total"))
                    listSalesDetail.Add(arraySalesDetail)
                End While
            End If
                resultSet.Close()
                'resultSet = Nothing
            End Using
        End Using
        conn.Close()
        Return listSalesDetail
    End Function

document.load 函数包括

$.get('@Url.Content("~")Home/GetSalesDetail', {
    invoiceId: salesHeaderData.invoiceId
  })
  .done(function(salesDetailData) {
    for (var j = 0; j < salesDetailData.length; j++) {
      var input = {};
      console.log("Loop for list details");
      $('input[name="ProductName"]').val(salesDetailData.ProductName);
      $('input[name="Qty"').val(salesDetailData.Qty);
      $('input[name="Price"').val(salesDetailData.Price);
    }
  })

和 index html 由

 <table id="detailTable">
 <thead><tr><th>ProductName</th><th>Qty</th><th>Price</th></tr></thead>
   <tbody>
    <tr>
    <td><input name="ProductName"></td>
    <td><input name="Qty"></td>
    <td><input name="Price">
    </tr>
   </tbody>
</table>

这就是我尝试的方式。任何人都可以帮助加载功能不起作用吗？

【问题讨论】：

尝试通过 jQuery 迭代数据并创建表格行。最后将数据附加到正文中
请求是否命中服务端？
是的，当我检索时发现结果未显示
你能切换到剃须刀组件吗，其次你把你的问题标记为使用VBA，但它使用的是vb.net
稍后我必须将其转换为 phonegap

标签： javascript jquery vba model-view-controller

【解决方案1】：

如果可以删除输入，您可以这样做：

    var html = '';      
    $.each(salesDetailData, function (i, item) {

    html += '<tr><td>' + item.ProductName + '</td><td>' + item.Qty + '</td><td>' + item.Price + '</td></tr>';    

   })
  $('tbody').append(html);

您的 html 将如下所示：

    <table id="detailTable">
      <thead><tr><th>ProductName</th><th>Qty</th><th>Price</th></tr></thead>
        <tbody>
        </tbody>
    </table>

【讨论】：