自动刷新网格并能够更新网格内的部分数据答案

【问题标题】：Auto refreshing grid and being able to update part of data within the grid自动刷新网格并能够更新网格内的部分数据
【发布时间】：2015-06-17 14:56:11
【问题描述】：

我目前有一个 Gridview，其中列出了一组项目，其中只有标题和 3 个按钮，如下所示：

然后用户可以单击标题，它将向下展开行以完整显示所有内容：

这仅通过一些 JavaScript 和在 Gridview 行中的一些 div 之间切换来完成。用户可以更改单击按钮以更新数据库并更改其状态，还可以添加一些注释，这些注释保存在行内的另一个 Gridview 中。

事实上，它可以做它需要做的事情，只是不是特别顺利。我现在遇到的问题是，由于回发，它每次都会刷新整个网格，失去它的状态，所以如果他们有一个展开的行，如果他们点击任何按钮或添加注释，就会再次返回。我想知道的是，是否有一种方法可以在页面之间进行一些交互，以保持其当前视图，但同时能够更新数据库并反映网格中的更改，如果它们有一行扩展以使其保持这种状态。愿望清单上的另一个是，如果添加新记录，它将自动添加到列表中。这目前正在使用 ASP.Net 网络表单，我想我需要走很多 JQuery 路线？

任何帮助或指示将不胜感激。

编辑 - 一些代码

所以我从头开始，它会加载所需的顶级内容。我认为能够检查某些内容是否已扩展的最简单方法是将标志保存到该用户的数据库以及我在构建我在 ASP 中执行的数据时可以调用的任务。网络代码在后面。我已经保存了数据，如果我手动刷新页面，它会显示更改，但由于某种原因，我似乎无法得到它，以便它保存到数据库并重新运行顶级任务的负载以显示是否有什么东西已显示/隐藏。第二个功能似乎没有运行？

HTML/JS

<script type="text/javascript">
        $(window).load(function ($) {
            loadTaskTops();
        });

function loadTaskTops() {
            $.ajax({
                type: "POST",
                url: "LoadAT.aspx/LoadTaskTop",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    $("#Content").empty();
                    $("#Content").append(r.d);
                }
            });
}
function expandDetails(requestID, userName) {
            expandDetails2(requestID, userName);
            loadTaskTops();
        }


        function expandDetails2(requestID, userName) {
            //alert('RequestID: ' + requestID + ' Username: ' + userName);
            $.ajax({
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                url: 'LoadAT.aspx/markAsExpanded',
                data: "{'requestID':'" + requestID + "', 'userName':'" + userName + "'}",
                async: false,
                success: function (response) {
                    requestID.val('');
                    userName.val('');
                    alert("Record Has been Saved in Database");

                },
                error: function ()
                { console.log('there is some error'); }

            });
        }
    </script>

<div id="Content">
        </div>

它正在通过运行 expandDetails2 将记录保存到数据库中，但之后它不想做任何事情。它没有显示任何成功，或者如果我之后尝试添加带有警报的 .done() ，仍然没有。谢谢

【问题讨论】：

您正在寻找的技术称为 Ajax。 api.jquery.com/jquery.ajax
感谢您提供有助于了解可用类型等的链接。但我仍然在努力解决如何最好地将其用于某种工作实践或将事情整合在一起？某种示例可以为我指明正确的工作方向。谢谢。
你没有提供代码，很难给你方向。走标准路线，连接数据库，制作一些数据访问对象，然后用 Ajax 将它们拉出来。这就是我为你准备的一切。
嗨，我在主帖中添加了一些代码。关于第二个功能问题的任何提示将不胜感激。谢谢

标签： jquery asp.net gridview partial-page-refresh

【解决方案1】：

这个方法不正确。

loadTaskTops()

我没有测试过这段代码，但我修复了它并添加了 cmets 来帮助你理解，它可能不起作用，但它会让你走上正确的轨道。您还应该查看控制台是否有错误，因为您可能只是遗漏了一些小问题。

function loadTaskTops() {
        $.ajax({
            type: "POST",
            url: "LoadAT.aspx/LoadTaskTop",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            /*Error check for asp errors*/
            error: function (jqXHR, textStatus, errorThrown) {
                if (jqXHR.status == 500) {
                    alert('Internal error: ' + jqXHR.responseText);
                 } else {
                    alert('Unexpected error.');
                 }
            },
            success: function (data) {
                $("#Content").empty();
                /*You need to get your data out of the json this way */
                data[0].userName;
                /*You can't really do this cause you have a json
                $("#Content").append(data); */
                /*You can, however, do this*/
                $("#Content").append(data[0].userName);
            }
        });
}

我认为您的控制台必须在此方法上吐出多个错误。希望这能为您解决一些问题。

【讨论】：