从代码隐藏实时更新UI

本文关键字：UI 实时更新 隐藏 代码 | 更新日期: 2023-09-27 18:00:45

我创建了一个套接字侦听器，当服务器检测到某个套接字数据时，我需要显示一个div（将其隐藏，然后使其可见）

我试过使用线程，但它不会实时更新用户界面，只有当页面被重新加载或你做了回复时

这里有一个我想做的例子，在这种情况下，我只想用codeehind数据更新文本框，如果可能的话，我想在没有ajax、javascript或jQuery的情况下完成它

代码隐藏：

protected void Page_Load(object sender, EventArgs e)
        {
            Thread t = new Thread(TestThread);
            t.Start();
        }
        private void TestThread()
        {
            for (int i = 0; i <= 1000000000; i++)
            {
                myTextbox.Text += "1";
            }
        }


网页：

<asp:UpdatePanel runat="server" ID="myPanel" >
    <ContentTemplate>
        <asp:TextBox runat="server" ID="myTextbox" />
    </ContentTemplate>
</asp:UpdatePanel>

从代码隐藏实时更新UI

当服务器已经将数据发送到客户端时，您要做的是从asp.net中的服务器代码（代码隐藏）更改UI（修改客户端组件）。

您必须使用客户端脚本/编码。

据我所知，如果不使用ajax或JavaScript，这是不可能的
ASP.NET只负责生成从web服务器发送到客户端的html。一旦html在浏览器中呈现，更新html的唯一方法就是通过JavaScript。

您可以使用WebForms的AJAX处理程序在WebForms中执行部分渲染，而无需通过在ScriptManager标记中启用partialRenderingEnabled属性来编写jQuery。如果没有脚本或AJAX，就无法做到这一点，内容必须返回服务器以某种方式运行代码，但至少这样你就不必自己编写任何JavaScript。

查看实时web功能：

SignalR

在网络环境中，服务器端没有办法联系客户端，除非在请求-响应场景中，客户端必须向服务器端发送请求，服务器端处理请求并回复响应。

编辑：

SignalR使用最佳可用技术，当可用时使用websocket，如果不可用，则使用AJAX长轮询技术，在该技术中，客户端轮询（发送请求）到服务器，服务器仅在观察到的数据发生特定更改时才回复，否则SignalR尝试重复AJAX请求，反复轮询服务器，直到服务器对观察到的数据做出更改回复（最糟糕的情况！）。

此外，HTML5包含web套接字，我没有足够的信息，但查看一下可能会很有趣。

使用最少的JavaScript，您可以将服务器发送的事件用于单工数据（从服务器到客户端）。它没有Websocket的开销，而Websocket在建立连接方面有一点成本。然而，我不认为所有浏览器都受支持，但可能有polyfill可供使用（在没有本机支持的情况下提供功能的库）结账：

http://www.html5rocks.com/en/tutorials/eventsource/basics/

在ASP.NET中，一旦页面卸载，线程就会被中止，所以这是不可能的，对不起。

您的方法可以使用AJAX定期从服务器轮询状态。另一方面，服务器将根据数据的变化进行回复。

在ASP.NET页面中，添加以下脚本

<head>
  <script type="text/javascript" language="javascript">
     function poll()
     {
       var ajax;
       if(window.XMLHttpRequest)
           ajax = new XMLHttpRequest();
       else
           ajax = new ActiveXObject("Microsoft.XMLHTTP");
       url = "yourPageOrHandler.aspx";
       ajax.onreadystatechange = function()
       {
          if (ajax.readyState == 4 && ajax.status == 200)
          {
             // success
             var receivedText = ajax.responseText;
          }
          else
          {
             // error, do the needful
          }
       }
       ajax.open("GET", url, true);        
       ajax.send();
       setTimeout("poll()", 1000); //polls every 1 second, you can change the duration here.
     }
  </script>
</head>

在页面完成之前开始轮询

<body>
   .
   .
   .
   .
  <script type="text/javascript" language="javascript">
     poll();
  </script>
</body>

或者，您可以使用ASP.NET AJAX控件，但与JavaScriptAJAX相比，它会更重。

很高兴能帮忙！如果你觉得答案有帮助，请记住接受它

相关文章：