0

我想显示一个标签文本,但我注意到一旦我点击按钮,页面就会重新加载。有什么办法可以防止这种情况发生吗?

<asp:Button ID="openSide" runat="server" class="fa fa-bars" OnClientClick="writeLabel"></asp:Button>
<asp:Label runat="server" ID="label1"></asp:Label>
Protected Sub openSidebar_Click(sender As Object, e As EventArgs)
        label1.Text="test"
End Sub

有时我会收到这些错误。这是什么意思?

正确的来自不同的部分,但它似乎无法检测到代码隐藏子,而正确的则是针对此标签问题。

这里的错误

4

1 回答 1

0

我想大多数人都错过了这个问题。

张贴者说他们的代码工作得很好,但问题是单击按钮会导致页面回发。那么目标是如何不让页面回发,但实现相同的目标。

好吧,在我给出两个解决方案之前,第一个问题:

页面回发可能不是那么糟糕。asp.net 网络表单非常好,因为您可以获得类似桌面的体验(比如桌面的 ms-access 甚至 VB 应用程序)。这意味着你有那个表单设计器,你可以放入一个文本框,放入一个按钮。双击该按钮,现在您可以编写简单而干净的 vb 代码。您正在参加编写代码的比赛。这太容易了 - 孩子们的游戏,这就是为什么 asp.net 表单以这种方式工作的原因(它们是为桌面用户设计的)。今天,使用 MVC?你甚至不再有表单设计师了——谈论开发系统的臭猴子球!- 没错,没有视觉形式设计师。人们想知道为什么现在 Web 开发成本如此之高???

好的,

因此,在没有 Web 经验的情况下,只需 1 分钟,您就有了一个文本框、一个按钮,并且现在正在运行代码。你使用简单易用的基本编程语言——我们都在小学时使用的那些计算机上学到了这一点。

那么,所谓的回邮的好处是什么?

代码真的很容易写。所以,在很多情况下,如果你确实有回帖怎么办?这并不是真正的世界末日。如果权衡是花费 3 天时间来学习一些代码只是为了避免这种情况?那么这个价格太高了(至少如果你珍惜你的时间的话)。

当您学习并变得更好时?那么是的,您可以拥有越来越少的回发,并改善用户体验。但是,减少使用回传的代价非常高。如此高的成本会增加学习曲线,并且您必须编写更多代码,以及不像您所做的那样超级简单的代码。

所以我的第一个(不太理想的)答案是:

在某些情况下,回帖并不是那么糟糕。在大多数情况下,该表单上的控件等将在往返中存活(往返是一个概念,您单击该按钮,网页到达服务器,您的代码运行,可能修改控件,然后页面返回浏览器。所以请记住,当您键入和 tab 并将内容输入到该 Web 表单时,服务器什么也不做,甚至在所有重要的回发之前都不知道您做了什么)。

下一种方法,这将是非常受欢迎的 - 特别是当它是新手时。这个技巧涉及我们所说的更新面板。这允许页面的“部分”在没有回发的情况下运行和操作。真正好的是您不必学习 JavaScript,或编写任何浏览器端代码。

因此,如果您有一些搜索屏幕,并且想要在网格中显示结果(例如 gridview 控件),那么您可以将所有这些都放入更新面板中。结果,当你点击一个按钮并在后面运行代码?整个页面都没有发回,你甚至看不到浏览器的小“旋转”。这是我最喜欢的 asp.net 网络表单功能之一。你可以构建和连接复杂的表单,这样做可以省去大量关于 JavaScript、ajax 调用等的学习。这是一个了不起的功能。

请记住有关更新面板的一些事项:

The web page on-load event DOES FIRE each time.
The post-back is what we call a partial post back.
Only bits and parts in that panel can be updated by code behind.

好的,让我们将您的代码移动到更新面板中。

因此,我们将一个文本框拖到表单上。我们将一个按钮拖到表单上。

我们有这个:

在此处输入图像描述

现在,双击上面的按钮,我们可以这样做:

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

    TextBox1.Text = "Hello world"

End Sub

所以,我们输入了那一行简单的基本代码。

好的,现在这有效,但它有一个回帖。

所以,现在,让我们摆脱完整的帖子:

步骤是:

就在你的“表单”标签下,

drag + drop script manager.
drag + drop in a update panel.

这两个:

在此处输入图像描述 在标记中按 enter 将其分解如下:

我们现在有这个:

在编辑器中,单击更新面板、标签之间的中间,点击回车键。现在,在面板标签内,开始输入内容”(让 Intel-sense 完成),然后敲击输入。

剪切 + 重新粘贴底部的两个标记(更新和内容)部分以围绕您的两个控件。

将关闭的更新面板和内容(剪切)移动到现有代码下方,如下所示:

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

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>
       <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" Width="110px" />
       </div>

       </ContentTemplate>
    </asp:UpdatePanel>
</form>

你现在完成了。(所以移动(环绕)我们在 contentTemplate 中的内容并更新面板)。一旦掌握了拖放和智能感知的窍门,完成此操作大约需要 10 秒。现在尝试运行此代码。请注意我们是如何看不到浏览器回帖的!

在幕后,为您准备了一大堆 ajax 和 JavaScript——但您不在乎。

只有该更新面板内的内容会更新,并且您不会收到完整的页面回复。(这意味着不会触及所有其他控件和其他东西,因此不会被回帖弄乱)。

现在,公平地说,对于一个按钮和一个文本框,很难证明所有这些工作都可以防止页面回发。但是,如果那个按钮 + 文本框在一个复杂的页面上,并且一个完整的回发会炸毁该页面上的所有其他内容(并且回发通常会)

最后一个选项: - 编写浏览器端代码。

因此,我们可以通过使用(和编写)浏览器端代码来消除回发。现在虽然这更加困难,但它也是 Web 开发中最令人兴奋的部分。原因是您可以让代码 100% 在浏览器端运行。这不仅意味着没有回发,而且将发生与服务器的零交互。结果是桌面交互速度。没有延迟,您注意到此选项响应非常快 - 没有延迟。原因是不会发生到服务器的往返。

唯一的缺点是您必须开始学习和使用 JavaScript (js)。我不介意语言,但没有好的语法和编译器?好吧,您经常必须运行代码来查找错误,而且没有真正体面的编译时语法检查发生,这很糟糕。

那么,对于最后一个选项?

让我们删掉更新面板和内容标签(只需删除它们,现在这样做:

<form id="form1" runat="server">
       <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" Width="110px" 
            OnClientClick="myhello();return false"/>
       </div>
       <script>
          function myhello() {
               tBox = document.getElementById('<%= TextBox1.ClientID %>');
               tBox.value = 'Hello world';
           }
       </script>
</form>

注意非常小心 - 在 onClientClick 我们有一个 return = false。这意味着后面的 vb 代码将不会运行或被调用。(如果我们删除 return=false,我们可以同时运行 js 代码和后面的代码。所以此时,您可以删除(删除)设置文本框的服务器端代码隐藏。

设置标签(而不是文本框)的代码是这样的:

tLbl = document.getElementById('<%= Label1.ClientID %>');
tLbl.innerText = 'Hello world';

所以对于一个文本框,你使用“.value”

对于标签,您使用“.innerText”

您再次注意到您没有看到或感觉到回帖(如更新面板),但您发现最后一个示例响应非常快 - 所有这些都没有任何服务器端代码。这一切都运行 100% 浏览器端。

于 2020-11-18T19:29:15.393 回答