asp.net - Ajax request is too slow -
i have page need click number in table read table accordingly database. used use asp gridview generate second table. tried use jquery ajax. when need request 20,000 records, jquery ajax extremely slow (about 6 seconds load) while asp gridview faster.
aspx.vb
<scriptmethod(responseformat:=responseformat.json)> _ <webmethod()> _ public shared function getorderdetail(byval id string) string dim ordernum integer = integer.parse(id) dim sbtable new stringbuilder dim sql 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])) 'item_total', och.[trackingno]") sql.append(" [orderheader] oh inner join [test1] ocd") sql.append(" on oh.[orderno] = ocd.[orderno] inner join [test2] och") sql.append(" on ocd.[fkey] = och.[pkey] inner join [test3] od") sql.append(" on oh.[orderno] = od.[orderno] inner join [test4] s") sql.append(" on s.[style] = od.[style] inner join [test5] c") sql.append(" on c.[color] = od.[color]") sql.append(" od.[orderno] =") sql.append(ordernum) sql.append(" group oh.[orderno], od.[style], s.[styledesc],od.[color], c.[colordesc], od.[size], och.[trackingno]") sql.append("select [orderno] [oabcd].[dbo].[orderheader] [orderno] =") sql.append(ordernum) dim connmain data.sqlclient.sqlconnection dim cmdmain data.sqlclient.sqlcommand dim rdrmain 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 boolean = true if rdrmain.hasrows 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 generic error now. alert("ajax read detail error!"); } }); }); i returned large string (containing 20,000 records). question is: there way improve code return other types? or dont return generate html asp getorderdetail() function ? make request faster ? thanks.
instead of returning plain string whole table information, returned table class list of row.
aspx.vb
the first half not copied here
rdrmain = cmdmain.executereader() dim records new table if rdrmain.hasrows while rdrmain.read() dim row 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>" (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); it seems faster little bit. still slow 20,000 rows compared asp gridview. don't know performance of linq. maybe need change query.
Comments
Post a Comment