单击按钮而不刷新页面 ASP.NET Webform

Question

我想在不刷新页面的情况下搜索我们在文本框中写入的值。但是当单击该按钮时，页面会刷新。以下解决方案不起作用。你能帮我吗？

<asp:TextBox ID="rulosParNoTx" runat="server" CssClass="rulos-tx" placeholder="Parti no ara" type="number" ClientIDMode="Static"/> 
              <asp:UpdatePanel runat="server">
                     <ContentTemplate>                               
             <asp:Button ID="rulosParNoBt" OnClick="rulosParNoBt_Click" runat="server" Text="" Style="display:none;"  ClientIDMode="Static"/>
                         </ContentTemplate>
                  <Triggers>
                      <asp:AsyncPostBackTrigger ControlID="rulosParNoBt" EventName="Click"/> 
                  </Triggers>
                   </asp:UpdatePanel>
             <script>
                 $(document).keyup(function (e) {
                     if ($('#<%=rulosParNoTx.ClientID%>').is(":focus")) {
                         $("#<%=rulosParNoBt.ClientID%>").click();                          
                     }
                     return false;
                  });
             </script>

Answer 1

所以，首先，您不需要（也不想要）回发触发器。

因此，理论上，您需要将文本框和 JavaScript 代码放置在更新面板内。然而，这意味着回发，因此当您键入时，文本框输入会混乱。

因此，您可以将文本框放在更新面板之外，并且它对于后面的代码来说是只读的。

虽然更新面板是一个非常酷的概念，并且会减少整页回发的回发大小？

您仍然拥有有效的页面生命周期。每次您键入/按下一个键时，您都会看到/拥有/忍受一个页面圆形提示。这意味着每次按下按键时，页面加载事件将每次触发，然后是按钮代码。虽然与整页回发相比，更新面板的有效负载和对服务器的压力“更少”，但每次按下按键时发送到服务器的有效负载仍然相当大。我注意到这一点，因为在测试和调试期间，您的 Web 服务器、浏览器和代码都在同一台计算机上运行。这给人的印象是浏览器到服务器运行得非常快，因为浏览器和 Web 服务器之间不存在真正的网络。

但是，当您部署到实际工作的网站时，Web 浏览器和服务器之间的网络连接速度要慢得多。这意味着您的测试和部署速度将有很大差异，并且按键和更新面板回发（称为部分页面回发）可能看起来在您的开发人员设置上运行得很快，但在部署后的实际使用中，您将发现这样的设置运行速度要慢得多。所以，请记住这一点。在大多数情况下，这个问题并不重要，但在使用更新面板时，它非常重要。

所以，这段代码应该/会为你工作：

        <asp:TextBox ID="rulosParNoTx" runat="server" CssClass="rulos-tx"
            oninput="mytest();return false;"
            placeholder="Parti no ara" type="number" ClientIDMode="Static" />

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

                <asp:Button ID="rulosParNoBt" OnClick="rulosParNoBt_Click"
                    runat="server" Text="" Style="display: none;" ClientIDMode="Static" />


                <script>
                    function mytest() {
                        console.log("key");
                        $('#rulosParNoBt').click()

                    }

                </script>

            </ContentTemplate>
        </asp:UpdatePanel>

背后的代码可能是这样的：

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

    Debug.Print($"< {rulosParNoTx.Text} >")

End Sub

我会考虑/推荐一个网络方法来代替此代码。