在 ASP.NET 中异步更新 DataGrid 中的行答案

【问题标题】：Updating rows in a DataGrid asynchronously in ASP.NET在 ASP.NET 中异步更新 DataGrid 中的行
【发布时间】：2014-08-21 21:43:29
【问题描述】：

我对 ASP.NET WebForms 应用程序非常陌生。我有一个使用 DataGrid 的应用程序，该应用程序具有与对象列表的 DataBinding。当页面完全加载后，我想向 DataGrid 中的每一行添加更多信息。

确定每行附加信息的过程必须在服务器端运行，每行大约需要 2 秒（网络访问等）。因此，我希望在处理完每一行后刷新我的 DataGrid。

这意味着，我需要一种异步机制，在用户完全可以访问网页的同时加载数据，并在服务器端处理一行后立即更新 UI。

从技术上讲，这意味着我需要在处理完每一行后向客户端发送一个 HTTP 响应。然后客户端将读取 HTTP 响应并更新 UI。

根据this article，我已经尝试使用带有 ScriptManager 的 UpdatePanel。

此解决方案的问题是，当最后一行处理完毕时，UI 会更新。这为时已晚。我们需要在每一行之后更新 UI。

我习惯于使用 WPF 桌面应用程序。在 WPF 桌面应用程序中，我只会使用后台工作人员。在 ProgressReported-EventHandler 中，我将使用新信息更新 Grid 并调用 IPropertyChanged 通知。

如何在 ASP.NET (.NET 4.0) 中实现这一点？非常感谢任何帮助和网络资源。

【问题讨论】：

标签： c# asp.net asynchronous datagrid

【解决方案1】：

您需要使用 Ajax 查询和 WebService

在你的 head 标签中放置一个导入

<script src="...../js/jquery.ajaxq-0.0.1.js" type="text/javascript"></script>

并在 apsx 页面的末尾放置一个脚本区域

<script type="text/javascript">

    $(document).ready(function () {
        $('#<ID_GRID_NAME> tr').each(function () {
            //Get customerId Key
            var customerId = $(this).find("td:first").html();
            if (customerId) {
                $.ajaxq("interventionQ", {
                    type: 'GET',
                    dataType: 'json',
                    url: '<WEB_SERVICE_URL>' + customerId,
                    success: function (griddata) {
                       $(this).find("td:last").html('<span class="badge badge-important"></span>');
                    }
                });
            }
        })
    });
 </script>

【讨论】：

【解决方案2】：

摆脱 ScriptManager 并使用 jQuery。创建一个gridview，然后您可以使用您的AJAX 成功方法获取它并附加到HTML 表中。您可以在客户端创建一个空表（并将其隐藏），然后通过 AJAX 获取表行并将它们附加到表中。

$.get( "Default.aspx/MethodName", obj, function ( response )
        {
            var content = $( $.parseHTML( response ) ).find("#divWhereYourGridviewIs");

            if ( $( "#div table" ).html() == null ) {
                $( "#divOnClient" ).html( content ); //this will be the first call to get the table

            }
            else {
                var newRow = $( content ).find( "#grd tr" )[1]; //this will be for each additional row, the [1] skips the header and gets the first row. 
                $( "#htmlTable" ).append( newRow );
            }

   } );

【讨论】：

【解决方案3】：

如果您可以在 WebForms 和 MVC 之间进行选择，那么值得研究 MVC。 This CoderProject page 是系列的一部分，该系列提供有用的信息，可用于您想做的所有事情以及更多。 This page 有一些 WebForms 内容的链接。

长话短说，jQuery 和 jQueryUI 有很多这样的事情以及如何做的例子。

【讨论】：