2

テーブル内の数字をクリックし、それに応じてデータベースから別のテーブルを読み取る必要があるページがあります。以前は、ASP グリッドビューを使用して 2 番目のテーブルを生成していました。次に、jquery ajax を使用しようとしました。20,000 レコードを要求する必要がある場合、jquery ajax は非常に遅く (読み込みに約 6 秒)、asp gridview ははるかに高速です。

ASPX.VB

<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
 <WebMethod()> _
    Public Shared Function GetOrderDetail(ByVal id As String) As String
    Dim orderNum As Integer = Integer.Parse(id)
    Dim sbTable As New StringBuilder
    Dim sql As New StringBuilder

    sql.Append("SELECT oh.[ORDERNO], od.[STYLE], s.[STYLEDESC],od.[COLOR], c.[COLORDESC], od.[SIZE],")
    sql.Append(" SUM(CONVERT(DECIMAL(12,0),od.[TOTALQTY])) AS 'Item_Total', och.[TRACKINGNO]")
    sql.Append(" FROM [OrderHeader] AS oh INNER JOIN [test1] AS ocd")
    sql.Append(" ON oh.[ORDERNO] = ocd.[ORDERNO] INNER JOIN [test2] AS och")
    sql.Append(" ON ocd.[FKEY] = och.[PKEY] INNER JOIN [test3] AS od")
    sql.Append(" ON oh.[ORDERNO] = od.[ORDERNO] INNER JOIN [test4] as s")
    sql.Append(" ON s.[STYLE] = od.[STYLE] INNER JOIN [test5] AS c")
    sql.Append(" ON c.[COLOR] = od.[COLOR]")
    sql.Append(" WHERE od.[ORDERNO] =")
    sql.Append(orderNum)
    sql.Append(" GROUP BY oh.[ORDERNO], od.[STYLE], s.[STYLEDESC],od.[COLOR], c.[COLORDESC], od.[SIZE], och.[TRACKINGNO]")

    sql.Append("select [ORDERNO] from [oabcd].[dbo].[OrderHeader] where [ORDERNO] =")
    sql.Append(orderNum)

    Dim connMain As Data.SqlClient.SqlConnection
    Dim cmdMain As Data.SqlClient.SqlCommand
    Dim rdrMain As Data.SqlClient.SqlDataReader
    connMain = New Data.SqlClient.SqlConnection(ConfigurationManager.ConnectionStrings("SsssConnectionString").ConnectionString)
    connMain.Open()
    cmdMain = New Data.SqlClient.SqlCommand(sql.ToString(), connMain)
    rdrMain = cmdMain.ExecuteReader()
    Dim bAlt As Boolean = True
    If rdrMain.HasRows Then
        sbTable.Append("<table class = 'orderDetailTable'>")
        sbTable.Append("<thead>")
        sbTable.Append("<tr>")

        sbTable.Append("<th>")
        sbTable.Append("Order Number")
        sbTable.Append("</th>")

        sbTable.Append("<th>")
        sbTable.Append("Item")
        sbTable.Append("</th>")

        sbTable.Append("<th>")
        sbTable.Append("Color")
        sbTable.Append("</th>")

        sbTable.Append("<th>")
        sbTable.Append("Size")
        sbTable.Append("</th>")

        sbTable.Append("<th>")
        sbTable.Append("Item Total")
        sbTable.Append("</th>")

        sbTable.Append("<th>")
        sbTable.Append("Tracking Number")
        sbTable.Append("</th>")

        sbTable.Append("</tr>")
        sbTable.Append("</thead>")

        sbTable.Append("<tbody>")
        While rdrMain.Read()

            sbTable.Append("<tr>")
            sbTable.Append("<td>")
            sbTable.Append(rdrMain.Item("ORDERNO"))
            sbTable.Append("</td>")
            sbTable.Append("<td>")
            sbTable.Append(rdrMain.Item("STYLEDESC"))
            sbTable.Append("</td>")
            sbTable.Append("<td>")
            sbTable.Append(rdrMain.Item("COLORDESC"))
            sbTable.Append("</td>")
            sbTable.Append("<td>")
            sbTable.Append(rdrMain.Item("Size"))
            sbTable.Append("</td>")
            sbTable.Append("<td>")
            sbTable.Append(rdrMain.Item("Item_Total"))
            sbTable.Append("</td>")
            sbTable.Append("<td>")
            sbTable.Append(rdrMain.Item("TRACKINGNO"))
            sbTable.Append("</td>")
            sbTable.Append("</tr>")
        End While
        sbTable.Append("</tbody>")
        sbTable.Append("</table>")
    End If
    rdrMain.Close()
    cmdMain.Dispose()
    connMain.Close()
    connMain.Dispose()


    Return sbTable.ToString()

End Function

JS

                     $('.orderNumber').on('click', function () {
                    var orderNum = $(this).text();
                    console.log(orderNum);

                    $.ajax({
                        type: "POST",
                        url: "Order.aspx/GetOrderDetail",
                        data: "{'id' :'" + orderNum + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (result) {
                            $('#orderDetail').html(result.d);
                            $('.orderDetailTable').dataTable({

                            });
                        },
                        error: function (xhr, status, error) {
                            // Display a generic error for now.
                            alert("Ajax Read Detail Error!");
                        }
                    });
                });

非常に大きな文字列 (20,000 レコードを含む) を返しました。私の質問は: 他の型を返すようにコードを改善する方法はありますか? または、aspGetOrderDetail()関数からhtmlを生成するだけで何も返さないのですか？リクエストを高速化できるものはありますか? ありがとう。

4

1 に答える 1

0

テーブル全体の情報を含むプレーンな文字列を返す代わりに、 of であるクラスを返しましTableた。ListRow

ASPX.VB

前半はここではコピーしません

 rdrMain = cmdMain.ExecuteReader()
    Dim records As New Table
    If rdrMain.HasRows Then

        While rdrMain.Read()
            Dim row As New Row
            row.OrderNum() = Trim(rdrMain.Item("ORDERNO"))
            row.Style() = Trim(rdrMain.Item("STYLEDESC"))
            row.Color() = Trim(rdrMain.Item("COLORDESC"))
            row.Size() = Trim(rdrMain.Item("SIZE"))
            row.Total() = Integer.Parse(Trim(rdrMain.Item("Item_Total")))
            row.Tracking() = Trim(rdrMain.Item("TRACKINGNO"))
            records.RowList.Add(row)
        End While
    End If

    rdrMain.Close()
    cmdMain.Dispose()
    connMain.Close()
    connMain.Dispose()

    Return records
Public Class Row
...
End Class
Public Class Table
...
End Class

JS

 var r = new Array(), j = -1;
                            var html = "<table class ='orderDetailTable'><thead><tr><th class = 'orderDetailNum'>Order</th><th>Style</th>\
            <th>Color</th><th>Size</th><th>Total</th><th>Tracking Number</th></tr></thead><tbody>"
                            for (var key = 0, size = data.d.RowList.length; key < size; key++) {
                                r[++j] = '<tr><td class = "orderDetailNum">';
                                r[++j] = data.d.RowList[key].OrderNum;
                                r[++j] = '</td><td class = "orderStyle">';
                                r[++j] = data.d.RowList[key].Style;
                                r[++j] = '</td><td class = "orderColor">';
                                r[++j] = data.d.RowList[key].Color;
                                r[++j] = '</td><td class = "orderSize">';
                                r[++j] = data.d.RowList[key].Size;
                                r[++j] = '</td><td class = "orderTotal">';
                                r[++j] = data.d.RowList[key].Total;
                                r[++j] = '</td><td class = "orderTracking">';
                                r[++j] = data.d.RowList[key].Tracking;
                                r[++j] = '</td></tr>';
                            }
                            html = html + r.join("") + "</tbody></table>";

                            $('#orderDetail').html(html);

少し速くなったようです。ただし、ASP GridView と比較すると、20,000 行ではまだ遅いです。LINQ のパフォーマンスがわからない。クエリを変更する必要があるかもしれません。

于 2013-08-27T16:07:56.900 に答える