使用 vb.net 更改 asp 表单上的标签文本

Question

我是 ASP（和 javascript）新手，正在尝试从后端按钮代码（使用我更熟悉的 vb.net）更新 ASP 表单上的标签文本。

我希望文本在按下按钮时显示“正在处理...”，然后当其余代码完成时，我希望它显示“已完成”

我从一个简单的开始：

lblMessage.Text = "Processing..."

这工作正常，但标签文本直到按钮代码的其余部分执行完毕后才会更新 - 我希望它立即更新，以便用户知道等待其余代码完成。

我可以在按钮代码从客户端运行之前更新标签：

<asp:Button ID="btnUpdate" runat="server" Text="Update Label" OnClientClick="updateLabel(); return false;" />

<script type="text/javascript">
            function updateLabel() {
                // Update the label text immediately on the client side
                var label = document.getElementById('<%= lblMessage.ClientID %>');
                if (label) {
                    label.innerHTML = 'Processing...';
                }
                return false; // Prevent the button from triggering a postback
            }
        </script>

这会在按下按钮后立即更新文本，但不灵活，因为我无法改变显示的文本 - 例如，我可能想在运行输入有效的其余代码之前在服务器端进行检查。如果不是，我可能希望文本显示“抱歉，请先填写字段 x”或其他内容。

这就是我的立场：

1. 使用 scipt 更新标签文本，我无法从后端代码传递任何变量来指定我想要显示的文本。
2. 使用后端代码更新标签文本意味着在按钮代码的其余部分完成之前它不会执行。

有没有办法可以立即更新文本并能够更改所使用的文本？

感谢您的阅读。

Answer 1

好吧，如果网页没有发送回服务器，那么后面的代码就无法更改客户端浏览器的副本。

当然，如果您回发页面，则在服务器端代码 100% 完成并且浏览器的整个副本发送回客户端之前，用户无法看到对浏览器所做的更改。

所以，有几个选择：

简单，就是单击按钮，但启动较长的处理循环的代码非常短。

因此，当您开始此操作时，服务器端代码上的消息将用于该过程的下一步。

因此，在大多数情况下，解决方案涉及不同的思维方式。在桌面领域，例如，如果我们有一些删除命令，我们可以在该删除按钮代码内放置一个确认消息框。

在网络领域，确认对话框的解决方案是翻转或反转代码。因此，您会弹出一个对话框提示（客户端），如果用户点击“确定”或“确认”，则服务器端删除按钮代码将运行。

假设我们有多个步骤，每个步骤都需要一些时间，因此我们想要显示一条有关处理状态的消息（步骤 1....请稍候，然后是步骤 2....请稍等）。

所以，你可以这样做：

        <asp:Button ID="cmdStart" runat="server" Text="Start the Process"
            OnClick="cmdStart_Click"  
            CssClass="btn"
            />
        <asp:Button ID="cmdMyProcess" runat="server" Text="Button"
            OnClick="cmdMyProcess_Click"
            ClientIDMode="Static" style="display:none"
            
            />
        <asp:HiddenField ID="CurrentStep" runat="server" Value="0"
            ClientIDMode="Static" />
        <asp:HiddenField ID="NumSteps" runat="server" Value="0"
            ClientIDMode="Static" />

        <div id="processarea" style="display:none">
            <img src="../Content/wait2.gif"  width="32" />
            <asp:Label ID="StepMessage" runat="server" Text=""></asp:Label>
        </div>

        <script>

            $(window).on('load', function() {

                var Steps = $('#NumSteps').val()
                var StepOn = $('#CurrentStep').val()
                if (StepOn < Steps) {
                    $('#processarea').show()
                    $('#cmdMyProcess').click()
                }
                else {
                    $('#processarea').hide()
                }
            })
        </script>

因此，在大多数情况下，您想要/需要“一些”客户端。

所以，现在背后的代码是这样的：

Protected Sub cmdStart_Click(sender As Object, e As EventArgs)

    NumSteps.Value = 4
    CurrentStep.Value = 0
    StepMessage.Text = "Step 1 - get dog leash"

End Sub

Protected Sub cmdMyProcess_Click(sender As Object, e As EventArgs)

    CurrentStep.Value += 1
    Select Case CurrentStep.Value
        Case 1
            ' processing code to get dog leash
            System.Threading.Thread.Sleep(2000)
            StepMessage.Text = "Step 2 - Call dog"  ' setup next step message
        Case 2
            System.Threading.Thread.Sleep(2000)

            StepMessage.Text = "Step 3 - Open door to outside"
        Case 3
            System.Threading.Thread.Sleep(2000)
            StepMessage.Text = "Step 4 - take dog for walk outside"
        Case 4
            System.Threading.Thread.Sleep(2000)
            StepMessage.Text = "done"    ' we hide the message, does not show

    End Select

End Sub

结果是这样的：

现在，我们当然可能应该将上述内容放在更新面板中，这样我们就不会在这里遭受整个页面的回发。

但是，如果我们使用更新面板，则“加载时”的 jQuery 页面不会触发，因为这就是更新面板的全部理念。 （以避免整页回发）。

所以，假设我们想要一个更新面板。嘿，让我们添加一个进度条来增加乐趣。

因此，我们需要一个在更新面板回发发生后触发的事件来代替加载。找到这个活动有点困难，但这很有效：

所以，现在我们有了这个（我扔了一个进度条）

       <asp:UpdatePanel ID="UpdatePanel1" runat="server">
           <ContentTemplate>

               <asp:Button ID="cmdStart" runat="server" Text="Start the Process"
                   OnClick="cmdStart_Click"
                   CssClass="btn" />
               <asp:Button ID="cmdMyProcess" runat="server" Text="Button"
                   OnClick="cmdMyProcess_Click"
                   ClientIDMode="Static" Style="display: none" />
               <asp:HiddenField ID="CurrentStep" runat="server" Value="0"
                   ClientIDMode="Static" />
               <asp:HiddenField ID="NumSteps" runat="server" Value="0"
                   ClientIDMode="Static" />

               <div id="processarea" style="display: none">
                   <img src="../Content/wait2.gif" width="32" />
                   <asp:Label ID="StepMessage" runat="server" Text=""></asp:Label>
                   <br />
                   <div id="progressbar" 
                       style="width:400px;background-color:skyblue;">
                   </div>
               </div>
           </ContentTemplate>
       </asp:UpdatePanel>


       <script>
           var prm = Sys.WebForms.PageRequestManager.getInstance();
           prm.add_endRequest(myrunone);
           function myrunone() {

               var Steps = Number($('#NumSteps').val())
               var StepOn = Number($('#CurrentStep').val())

               // pBar(value: StepOn)
               if (StepOn < Steps) {
                   $('#processarea').show()
                   $('#progressbar').progressbar({ value: StepOn + 1, max: Steps})
                   $('#cmdMyProcess').click()
               }
               else {
                   $('#processarea').hide()
               }
           }
       </script>

结果是：

最后但并非最不重要的一点？

您可以采用向浏览器推送通知。因此，假设您建立了一个聊天室，当每个人打字时，您希望实时查看结果。

因此，您可以设置并采用所谓的网络套接字。由于有相当多的移动部件，因此您可以采用多种工具来实现此目的。在 .net 领域，该框架称为 SignalR，您可以从这里开始：

https://learn.microsoft.com/en-us/aspnet/signalr/overview/getting-started/introduction-to-signalr

SignalR 是一个很棒的概念，但它是一个相当复杂的库，但如果你确实需要一些消息“推送”到浏览器，或者实时更新而不需要回发，那么 SignalR 是最好的选择.

虽然上面的例子主要是服务器端代码？在大多数情况下，我会采用一些 JavaScript 和 Web 方法调用。那么，尝试仅使用服务器端代码拼凑一些进度条或消息吗？嗯，不太好。