客户端调用服务器上慢速异步进程的 asp.net AJAX 最佳实践

Question

我有一个执行缓慢任务的服务，当它完成时，我想使用 AJAX 更新客户端的任务结果。在我的客户端中，我多次调用该任务来更新结果网格。为了便于理解，它是一个连接测试器，循环遍历连接列表以查看它们是否处于事件状态。

我已将该服务实现为 WCF。当我将服务引用添加到 Web 客户端时，我会生成异步方法。

代码工作正常，但是当回调触发时屏幕会暂时锁定 - 我认为这是因为它们都一个接一个地发生，并且它们都在快速连续的时间内重新绘制 GridView。我不希望发生这种故障 - 我希望 AJAX 实现能够在结果通过回调从服务返回时部分更新 GridView。

我可以让它看起来不错的唯一方法是在单独的客户端线程中启动异步调用，然后使用计时器将数据重新绘制到网格(与通过回调在单独线程中更新的数据相同) .

我正在做这个迷你项目作为学习练习，然后我的目标是对 MVC3 做同样的事情以了解差异。

代码片段(没有单独的线程，导致回调期间屏幕渲染速度变慢):

//get list of connections from session
ConnectionList myConns = Session[SESSION_ID] as ConnectionList;
//pass into async service call
GetAllStatusAsync(myConns);


protected void GetAllStatusAsync(ConnectionList myConns)
{

Service1Client myClient = new WcfConnectionServiceRef.Service1Client();
myClient.AsyncWorkCompleted += new EventHandler<AsyncWorkCompletedEventArgs>(myClient_AsyncWorkCompleted);

foreach (ConnectionDetail conn in myConns.ConnectionDetail)
  {
  //this call isnt blocking, conn wont be updated until later in the callback
  myClient.AsyncWorkAsync(conn);
  }
}

//callback method from async task
void myClient_AsyncWorkCompleted(object sender, AsyncWorkCompletedEventArgs e)
{

ConnectionDetail connResult = e.Result;

//get list of connections from session
ConnectionList myConns = Session[SESSION_ID] as ConnectionList;

//update our local store
UpdateConnectionStore(connResult, myConns);

//rebind grid
BindConnectionDetailsToGrid(myConns);

}

问题是 - 这可以在 asp.net/AJAX 中以更好的方式完成吗？ (为了避免渲染锁定问题并在结果出现时使网格部分更新)我真的不想使用单独的客户端线程，例如以下代码片段:

 // Perform processing of files async in another thread so rendering is not slowed down 
 // this is a fire and forget approach so i will never get results back unless i poll for them in timer from the main thread
ThreadPool.QueueUserWorkItem(delegate
  {
  //get list of connections from session
  ConnectionList myConns = Session[SESSION_ID] as ConnectionList;
  //pass into async service call
  GetAllStatusAsync(myConns);
  });

更新:

根据要求添加页面标记:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ASForm.aspx.cs" Inherits="Web_Asp_FBMonitor.ASForm" Async="true" EnableSessionState="True" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>
        ASP.NET Connection Test (Client in ASYNC, Server in ASYNC)
    </h2>

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>


    <p>

        <%--This update panel shows the time, updated every second--%>    
        &nbsp;<asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>

            <h3> <asp:Label ID="LabelTime" runat="server" Text=""></asp:Label>  </h3>
            <asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">  </asp:Timer>

            </ContentTemplate>
    </asp:UpdatePanel>
    </p>

    <p>

        <%--This update panel shows our results grid--%>
        &nbsp;<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>

            <asp:GridView ID="GridView1" runat="server">
            </asp:GridView>

            <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx">Client Sync Page</asp:HyperLink>

            <br />

            <asp:Button ID="ButtonUpdate" runat="server" Text="Update" 
                onclick="ButtonUpdate_Click" />
        </ContentTemplate>
        </asp:UpdatePanel>




    </p>



</asp:Content>

更新2:

我正在寻找一个简洁的客户端 JS 示例。收到的选项很好，并且受到了极大的赞赏，但客户端 JS 是我因自己的经验不足而苦苦挣扎的一个，并将为此授予赏金。

Answer 1

由于 ASP UpdatePanels，您会看到所谓的“屏幕锁定”。

ASP.NET WebForms 是一种让 Web 表现得像 Windows 表单的尝试。令人钦佩吗？取决于你问的是谁。

当您使用 UpdatePanel 时，ASP.NET 将服务器端控件存储在 ViewState 中，对该 ViewState 进行任何必要的更改(在您的情况下，它是根据 Timer_Tick 和 ButtonUpdate_Click 函数中的代码更新页面)。然后，它使用这些新数据刷新页面，导致您描述的屏幕锁定。

要解决这个问题，您必须使用真正的 AJAX。很多人使用 jQuery AJAX 函数和以下选项之一来做到这一点:

• ASP.NET WebMethods
• WCF 服务
• 单独的 ASP.NET 页面

这里有很多关于通过 jQuery 连接 ASP.NET WebMethods 的问题，还有一些关于加载 ASP.NET 页面的问题，但关于 AJAX 和 WCF 的问题却不多。

如果您选择使用 AJAX 和 jQuery，您的结果页面将如下所示:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ASForm.aspx.cs" Inherits="Web_Asp_FBMonitor.ASForm" Async="true" EnableSessionState="True" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<!-- include jQuery library here -->
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        UpdateGrid();

        // Separate AJAX call to another page, WCF service, or ASP.NET WebMethod for the Timer results
    });

    function UpdateGrid() {
        $.ajax({ url: "GridViewResults.aspx",
            done: function (result) {
                $("#gridResults").html(result.d);
            }
        });
    }
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>
        ASP.NET Connection Test (Client in ASYNC, Server in ASYNC)
    </h2>

    <p>
        <h3> <span id="timer"></span> </h3>
    </p>

    <p id="gridResults">
    </p>
    <button id="ButtonUpdate" onclick="UpdateGrid();">Update</button>
</asp:Content>

然后，在一个单独的页面上(我在上面随意将其称为 GridViewResults.aspx)，您将拥有:

<asp:GridView ID="GridView1" runat="server"></asp:GridView>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx">Client Sync Page</asp:HyperLink>
<br />