Данные таблицы SQL в таблицу HTML с использованием jQuery MVC

Question

Я пытаюсь получить подробности таблицы 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);
    }
  })

и индекс 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>

и вот как я пытался. Может кто-нибудь помочь, функция загрузки не работает?

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