ASP.NET TextBox不刷新

abithluo  于 2023-03-24  发布在  .NET
关注(0)|答案(2)|浏览(188)

我有一个WebForm应用程序(C#)和以下代码:

protected void Button1_Click(object sender, EventArgs e)
        {
            TextBox1.Text = "Working ...";
           
            int y = 0;
           
            for (int i = 0; i < 2000000000; i++)
            {
                 y++;
            }           
            TextBox1.Text = "Ready!";            
        }

问题是TextBox从未显示“正在工作...”。
我试着把文本框放在一个更新面板里,仍然是同样的行为。这不可能是因为代码运行得太快,因为for循环增加了3-5秒的延迟。
有什么办法能让这件事成功吗?

编辑:

我尝试了Albert D. Kallal的答案,但他的解决方案仍然不适合我!
所以,如果两个使用相同的代码,为什么它不为我工作。
为了减少这个问题,我简化了代码如下:

<asp:Button ID="Button1" runat="server" Text="Run my code"            
           
   OnClientClick="$('#TextBox1').val('Please wait...')"  />

文本框文本不会在单击时更改。

**最终编辑为未来的读者:**阿尔伯特·D.卡拉尔的答案是完整的解决方案.但它不为我工作.原因:

我的jQuery被阻塞了,因为我使用的是IIS Express。
这是控制台错误:

我使用IIS本地和所有运行良好的预期!

gmxoilav

gmxoilav1#

好吧,在很多方面,这个“简单”的问题是一个非常好的问题。
为什么呢?因为答案涉及到对网页生命周期的把握和理解,如果没有这种简单的把握,那么有问题的代码似乎会产生奇怪或意想不到的结果。
更有趣的是,随着对页面生命周期的掌握,我将发布一些代码来展示如何做到这一点,并且非常轻松,甚至不需要任何特殊 AJAX 或更新面板代码。
那么,当你点击按钮时,会发生什么?
好了,一个回发(或通常称为往返)的开始。
当你点击按钮时,网页就在你的桌面上。
则将网页发送到服务器端进行处理。
你有这个:

我必须强调你没有这个:

因此,Web服务器正在等待任何页面被发布到服务器-该页面可能不是您的页面。请记住,与台式机不同,这里有一台计算机和一台服务器。该服务器的工作是处理传入的网页-包括所有其他网页。对于每个用户,没有单独的内存,变量或代码或任何内容的概念。您有一个Web服务器。
好了,现在我们点击这个按钮,然后回发(往返,或者所谓的页面生命周期开始)。
这个:

我们的网页被发送到服务器。你现在有这个:

在您的桌面(客户端浏览器)上,您可以看到微调器。
现在服务器有了网页。你的代码在运行。我必须强调,当你的代码在更新网页时,最终用户浏览器看不到任何变化。
因此,您的代码可能会等待10秒或1秒。网页仍然在服务器上。
因此,您的代码可以自由地修改该网页,但仅当它在服务器端时。在此过程中,最终用户不会看到任何更改(您的浏览器副本仍然在您的桌面上!!)。
这实际上意味着你的代码永远不会直接与用户交互。对网页的更改只发生在网页在服务器上运行的短时间内。
然后,只有在100%的代码和处理服务器端完成之后,然后,只有在那时,页面才会返回到客户端。
所以,页面现在返回到客户端。

接下来的部分非常重要:
在客户端,页面被重新加载。这包括吹出所有JavaScript代码状态和变量,重新启动JavaScript,并重新显示页面。
更重要的是?服务器端你的网页是nuked出的存在,处置,和所有的页面代码和类变量去的范围外,并被扔掉!!!现在的Web服务器读取任何其他回发。再次:您的页面不再存在于内存中的服务器端-它已经消失了。
所以,代码背后的变化,浏览器是永远不会看到.你只能看到一个最后一页与所有的代码更改后,在服务器上的网页上的一切都完成了,和一个完整的页面被重新发送回客户端!!!
现在,考虑到上述概念?
然后,它变得超级容易有一个按钮与信息,或旋转器,或两者都说:“请等待..."。
当然,诀窍是asp.net按钮允许您有两个部分:
第一部分:回发到服务器(服务器端单击事件)。
B部分:客户端按钮点击(JavaScript)。
所以,让我们在一个按钮下降,有一个3秒的假延迟,并有一个请等待消息显示,而我们等待

<asp:Button ID="cmdLoadGrid" runat="server" Text="Load Data"
            CssClass="btn"
            OnClick="cmdLoadGrid_Click"
            OnClientClick="$('#myspin').show();"
            /> 
        <div id="myspin" style="display:none">
            Please wait ...
            <img src="../Content/wait2.gif" />
        </div>
        <br />
        <br />

        <asp:GridView ID="GridView1"
            runat="server" CssClass="table" AutoGenerateColumns="false"
            Width="42%" DataKeyNames="ID">
        </asp:GridView>

所以,请注意我们是如何创建/使用一个简单的div,但是“隐藏”的。
注意这个按钮是如何同时具有客户端单击事件和服务器端单击事件的。
上面的按钮是客户端的jQuery。
所以,按钮点击的代码是这样的:

protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void cmdLoadGrid_Click(object sender, EventArgs e)
    {
        LoadGrid();
        // FAKE a 3 second delay
        System.Threading.Thread.Sleep(3000);
    }

    void LoadGrid()
    {
        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            string strSQL =
                @"SELECT FirstName, LastName, City, HotelName, Description
                FROM tblHotelsA ORDER BY HotelName";
            using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
            {
                conn.Open();
                DataTable rstData = new DataTable();    
                rstData.Load(cmdSQL.ExecuteReader());   
                
                GridView1.DataSource = rstData;
                GridView1.DataBind();
            }
        }
    }

结果是这样的:

注意非常小心:
我们不必担心微调器和文本的重新隐藏。
为什么?因为页面的生命周期。当服务器端代码完成时,一个全新的网页被发送回客户端-重新绘制,重新加载和重新刷新我们的整个页面-因此,我们的文本+微调器文本自动消失。
注意,我在这里使用了一个jQuery表达式。
例如:

OnClientClick="$('#myspin').show();"

我们可以使用纯JavaScript表达式,这样说:

OnClientClick="document.getElementById('myspin').style.display = 'inline';"

编辑:已发布问题的解答

那么,在您的情况下,您的代码将是:
首先,标记(按钮+文本框,+客户端代码)。
这里使用jQuery:

<asp:Button ID="Button1" runat="server" Text="Run my code"
            CssClass="btn"
            OnClick="Button1_Click"
            OnClientClick="$('#TextBox1').val('Please wait...')"
            />

        <asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static">

        </asp:TextBox>

服务器端代码:(它不需要请等待的文本框设置,因为客户端已经这样做了)。
所以,然后这个:

protected void Button1_Click(object sender, EventArgs e)
    {
        int y = 0;
        for (int i = 0; i < 2000000000; i++)
        {
            y++;
        }
        TextBox1.Text = "Ready!";
    }

结果是这样的:

Edit 2:一个非jQuery的例子,没有使用clientid=mode=“static”

注意,在发布的工作示例中,我有这样的:

因此,对于简单(较短)的表达式,我经常使用clientIDMode=static。
因此,让我们发布一个非jquery示例,并且不要使用ClientIDModel=“Static”
因此,工作标记可以是这样的:(没有jQuery,也没有clientidMode=“static”。工作标记然后变成这样:

<asp:Button ID="Button1" runat="server" Text="Run my code"
            CssClass="btn"
            OnClick="Button1_Click"
            OnClientClick= "mywait();"
            />

        <asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static" >

        </asp:TextBox>

        <script>
            function mywait() {
                document.getElementById('<%= TextBox1.ClientID %>').value = 'Please Wait'

            }
        </script>
qlzsbp2j

qlzsbp2j2#

我猜你想做以下的事情。
1.在浏览器中按下按钮时
1.您希望在文本框textbox 1中显示单词Working...
1.然后,您希望在服务器上执行一些长任务
1.您希望返回并将文本更改为“就绪!
如果上述内容正确,您可以通过执行以下操作来实现此目的:
1.给予你的文本框一个clientID或唯一的类以及ID(在你的例子中是textbox 1)。
1.添加客户端javascript以更改元素的innerText或innerHTML,您可以使用DOM API通过ID或类选择。
1.当您完成操作后,将其更改为“就绪”的结束代码将继续工作
以上是基于你所描述的问题。
如果你可以在一个handler上执行这个操作,那么就写than并从handler返回json。这样你就可以使用fetch来获取handler并执行操作,甚至不需要在页面上做回发。只需从前端控制所有内容,然后用一个漂亮的handler来执行操作,而不是aspx.cs做所有事情。
如果您需要在后台运行此操作,请查看类似hangfire或signalR的内容并在后台执行操作,然后适当地通知客户。

相关问题