单击按钮后如何停止HTML表丢失数据？

Question

我正在忙于用VB编写的ASP.net项目，而我们将Dev Express 16.1用于其中的某些UI元素。

此页面显示可滚动浏览的产品列表，用户可以单击它们，查看有关该产品的更多信息，然后根据需要将其添加到购物车中。

这就是快速概述。

首先，可滚动列表是从服务器端填充的，这里没有问题，该列表具有一个客户端单击侦听器，该单击侦听器在单击产品时触发，它使用ajax调用Web方法，该方法获取有关的更多信息。产品，将其作为json返回，然后在客户端显示。

$.ajax({
                type: "POST",
                url: "ClassName.aspx/DisplayProductInfo",
                data: '{productCode: "' + values + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: ReceiveResponse,
                failure: function (response) {
                    console.log(response.d);
                    alert(response.d);
                }
            });

然后将信息显示在表中，这些表是根据我作为响应收到的信息构建的。

    function ReceiveResponse(response) {
                var jsonResponse = JSON.parse(response.d)

document.getElementById('<%= hiddenButton.ClientID %>').click();

                if (jsonResponse.ProductPrice.length > 0) {
                    var priceTable = "<tr id=\"suppNameRow\">";
                    for (var x = 0; x < jsonResponse.ProductPrice.length; x++) {
                        priceTable += "<td>" + jsonResponse.ProductPrice[x].SupplierName + "</td>";
                    }
                    priceTable += "</tr>";
                    priceTable += "<tr id=\"suppPriceRow\">";
                    for (var y = 0; y < jsonResponse.ProductPrice.length; y++) {
                        priceTable += "<td>" + jsonResponse.ProductPrice[y].SupplierPrice + "</td>";
                    }
                    priceTable += "</tr>";

                    document.getElementById('productPriceTableBody').innerHTML = priceTable;
                } else {
                    var suppPriceRow = document.getElementById('suppPriceRow').getElementsByTagName("td");
                    for (var z = 0; z < suppPriceRow.length; z++) {
                        suppPriceRow[z].innerText = "N/A"
                    }
                }

                var monthCells = document.getElementById('monthRow').getElementsByTagName("td");
                var historyTable = document.getElementById('productHistoryTable')

                if (jsonResponse.ProductHistory.length > 0) {
                    for (var z = 0; z < jsonResponse.ProductHistory.length; z++) {
                        for (var a = 1; a <= 12; a++) {
                            if (monthCells[a].innerText == jsonResponse.ProductHistory[z].Month) {
                                historyTable.rows[0].cells[a].innerText = jsonResponse.ProductHistory[z].MyQty;
                                historyTable.rows[2].cells[a].innerText = jsonResponse.ProductHistory[z].CompQty;
                            }
                        }
                    }
                } else {
                    for (var a = 1; a <= 12; a++) {
                        historyTable.rows[0].cells[a].innerText = "0";
                        historyTable.rows[2].cells[a].innerText = "0";
                    }
                }
            }

我走了这条路，因为桌子需要动态。我遇到的一个问题是尝试从javascript调用服务器端的标准方法，一种解决方法是使用按钮的onclick调用该方法，如响应函数的第二行所示。这就是问题所在。

Protected Sub loadProductPrices(ByVal sender As Object, ByVal e As EventArgs)
        If Not productKeyHolder.Value = "" Then

            Dim dtProdPrices As DataTable = pc.GetListedPrices(productKeyHolder.Value)
            gvListedPrices.DataSource = dtProdPrices
            gvListedPrices.KeyFieldName = "barcode"
            gvListedPrices.DataBind()
        End If
    End Sub

gvListedPrices是一个dx：ASPxGridView，用于显示价格，这是问题所在，页面似乎已重新加载，并且丢失了从json响应中显示的数据。

我在更新面板中有按钮和Gridview，但这并不能解决问题。

快速概述，单击产品时，运行ajax查询，获取显示在html表中的产品信息，然后单击隐藏按钮并填充gridview，然后刷新页面，而我丢失信息桌子。

我想防止表丢失数据。隐藏按钮只是一种解决方法。