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

时间:2014-08-21 21:43:29

标签: c# asp.net asynchronous datagrid

我是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)中实现这一目标?任何帮助和网络资源都受到高度赞赏。

3 个答案:

答案 0 :(得分:1)

您需要使用Ajax查询和WebService

在您的头标记中添加导入

<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>

答案 1 :(得分:1)

摆脱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 );
            }

   } );

答案 2 :(得分:0)

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

长话短说,jQueryjQueryUI有很多这样的事情以及如何做的例子。