Question

我是aspx的初级程序员，我需要帮助。

我目前有一个aspx页面。此页面包含3个表格。

第一个表是主表，其中包含带数据的行。当您单击一行时，另一个2表会显示详细信息。下面是图片。

使用window.location代码可以正常工作。

我想用ajax升级这个项目。单击一行时，显示数据，但不重新加载页面。

什么是最好的做法，不适用于3 aspx页面？如果有人能提供一个很好的例子/练习文章。

每行的onclick方法：

 var table = document.getElementById("table1");
            var rows = table.getElementsByTagName("tr");
            var customerId = getParameterByName('customerid');
            var table1Index = '<%= (FindHeaderIndex("table1Columns", "Agreement_NUM")) %>';
            for (i = 0; i < rows.length - 1; i++) { //length - 1 to avoid footer row
                var currentRow = table.rows[i];
                var createClickHandler =
                    function (row) {
                        return function () {
                            var table1Number = row.getElementsByTagName("td")[table1Index].innerHTML;
                            window.location = "Project.aspx" + "?" + "customerid=" + customerId + "&" + "table1Number=" + table1Number;
                        };
                    };
                currentRow.onclick = createClickHandler(currentRow);
            }

获取参数

 function getParameterByName(name) {
            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                results = regex.exec(location.search);
            return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }

体

<body>
    <div id="container">
        <asp:Panel runat="server" ID="mainPanel"></asp:Panel>
        <asp:Panel runat="server" ScrollBars="Auto" Height="40%" ID="detailsPanel"></asp:Panel>
        <asp:Label runat="server" ID="errorLabel" CssClass="errorMessage" />
    </div>
</body>

Answer 1

这是我以前用过的东西。您可以通过进行Ajax调用来加载新的页面状态，然后解析它，获取任何更新的Html并更新当前视图，而不是简单地重新加载页面。

将此功能添加到您的脚本中......

...IRSDA#access_token=WFA...

现在，为了更新表2和表3（我假设table2和table3的id），你可以像这样调用函数...

function updateElementsById(newDataUrl) {
    if (arguments.length < 2) return;
    var $container = $("<div/>");
    $container.load(newDataUrl, function() {
        var idList = Array.prototype.slice.call(arguments, 1);
        idList.forEach(function(id) {
            $(id).html($div.find(id).html());
        });
    });
}

这应该足以让你工作。如果您有任何问题，请告诉我。

顺便说一下，这真的是一个简单的黑客攻击。如果你想要一个真正的解决方案，那么你应该看看将数据返回到Ajax调用，但这意味着制作某种API来提供你需要的数据。您可以获取获取相关数据的当前代码，并将其放入一个完成所有数据访问的类中，然后在页面中使用该类，并让控制器或通用处理程序为您返回数据。

有很多选择。这取决于您的需求和用例。

在aspx页面中使用ajax而不是重新加载整个页面？

1 个答案: