Bootstrap 进度条在 UpdatePanel 中不起作用 - ASP.NET

Answer 1

此代码对我有用：

标记：

        <div class="progress" style="width: 30%; margin: auto;float:left">
            <div id="divProgressBar" runat="server" class="progress-bar" 
                role="progressbar" >
                <a href="../App_Data/">../App_Data/</a> aria-valuenow="0" 
                aria-valuemin="0" 
                aria-valuemax="100" 
                style="min-width: 2em; width: 0%;">
                0%
            </div>
        </div>  

        <br />
        <br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />

        <asp:Button ID="cmdIncrement" runat="server" Text="Increment"
            OnClick="cmdIncrement_Click"
            />

背后代码：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            TextBox1.Text = "1";
        setbar(0);
    }

    protected void cmdIncrement_Click(object sender, EventArgs e)
    {
        const decimal MyMax = 10;
        int Count = Convert.ToInt32(TextBox1.Text);
        Count++;
        TextBox1.Text = Count.ToString();
        decimal MyPercent = Count / MyMax * 100;
        setbar(MyPercent);
    }

    void setbar(decimal MyPercent)
    {
        divProgressBar.Style.Add("width", MyPercent + "%");
        divProgressBar.Attributes.Add("aria-valuenow", MyPercent.ToString());
        divProgressBar.InnerText = MyPercent.ToString() + "%";

    }

结果：

如果我使用更新面板，上面的方法也有效。

UpdatePanel（Ajax 工具包）。

不！

Ajax 工具包 100% 独立，与更新面板的使用“没有任何关系”。 AjaxToolKit 是一个控件库，如“accordion”、“dialog”、“ajaxfileupload”等。

但是，在网页中使用更新面板来采用某些ajax功能与ajaxtoolkit无关，并且您可以在没有ajaxtoolkit的情况下自由使用更新面板，并且它们实际上彼此不相关。

我还应该指出，如果您将上面的示例放置在更新面板中，上面发布的示例代码也可以工作。

编辑：问题作者现在想要一个循环

请记住，要进行 Web 开发，您必须掌握页面生命周期的概念，即所谓的“往返”。

简单说明：

在代码运行期间，用户永远不会看到通过代码隐藏对浏览器“DOM”进行的更改。浏览器的副本位于服务器上，当您的代码更改浏览器（现在位于服务器上）时，最终用户只会看到浏览器等待/旋转。只有在所有代码运行之后，然后浏览器返回客户端，用户才能看到结果。

因此，页面生命周期（往返）如下所示：

你有这个：

注意您的页面类 - 代码隐藏不在服务器的内存中。

你没有这个：

而你甚至没有这个：

注意这里非常小心 - 网页位于客户端计算机上 - 它根本不存在于网络服务器端。

因此，当您单击按钮或进行回发时，您就开始了往返。

这个：

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

现在页面类的实例已创建，并且后面的代码开始运行。

您的后台代码可以修改控件（甚至控件可见或不可见），但页面不与用户交互 - 只有代码可以修改网页（用户看不到一项或多项更改）。

网页可能会发生一次或多次更改，但是当您更新文本框等内容时，用户还看不到这些更改。因此，如果您运行循环 1 到 10，并更新文本框，则文本框将更新为 1 到 10。但是，最终用户看不到任何内容，因为该网页（和代码）正在服务器上运行。

服务器上正在发生网页更改 - 客户端浏览器不再有该网页！

一旦所有代码运行完毕，页面才会返回客户端浏览器。

服务器端类实例和代码（和变量）已被丢弃 - 不存在！您的服务器端页面类已被处置 - 从内存中删除，并且后面的网页代码不再存在。

因此，页面返回到客户端，重新显示，加载 JavaScript，然后 JavaScript 开始运行。因此，即使是客户端页面现在也可以 100% 重新加载。

那么，现在已经掌握了上述关于回发和轮询类型（页面生命周期）的知识了吗？

好的，这意味着要显示网页的更改，页面必须进行往返。如果您使用更新面板，那么该更新面板必须进行往返！

这种循环的另一种方法是什么？您使用客户端 JavaScript 代码。

但是，让我们以上面现有的示例为例，当我们单击开始时，让我们循环 1 到 10，但请记住，我们需要往返才能显示浏览器更新！

因此，既然我们需要往返，那么最简单的方法就是在页面上放置一个计时器控件。 （这意味着我们不必学习和编写一些 JavaScript 代码）。

所以，我们也使用更新面板。 （请记住，更新面板仍然具有上述完整页面生命周期 - 即使页面加载每次都会触发并运行 - 即使使用更新面板）。

所以，现在我们有了这个标记：

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

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

                <div class="progress" style="width: 30%; margin: auto; float: left">
                    <div id="divProgressBar" runat="server" class="progress-bar"
                        role="progressbar">
                        <a href="../App_Data/">../App_Data/</a> aria-valuenow="0" 
                aria-valuemin="0" 
                aria-valuemax="100" 
                style="min-width: 2em; width: 0%;">
                0%
                    </div>
                </div>

                <asp:Timer ID="Timer1" runat="server" 
                    Enabled="False" Interval="1000" OnTick="Timer1_Tick">
                </asp:Timer>
                <br />
                <br />
                <asp:Button ID="cmdStart" runat="server" Text="Start"
                    CssClass="btn"
                    OnClick="cmdStart_Click"
                    />
                <asp:HiddenField ID="HMyCount" runat="server" />


            </ContentTemplate>
        </asp:UpdatePanel>

这段代码：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            setbar(0);
    }

    protected void cmdStart_Click(object sender, EventArgs e)
    {
        HMyCount.Value = "0";
        Timer1.Enabled = true;
    }

    protected void Timer1_Tick(object sender, EventArgs e)
    {
        const decimal MyMax = 10;
        int Counter = Convert.ToInt32(HMyCount.Value);
        Counter++;
        HMyCount.Value = Counter.ToString();

        if (Counter > 10)
        {
            Timer1.Enabled = false; // stop our timer
            return;
        }
        decimal MyPercent = Counter / MyMax * 100;
        setbar(MyPercent);

    }
    void setbar(decimal MyPercent)
    {
        divProgressBar.Style.Add("width", MyPercent + "%");
        divProgressBar.Attributes.Add("aria-valuenow", MyPercent.ToString());
        divProgressBar.InnerText = MyPercent.ToString() + "%";

    }

现在的结果是这样的：

我应该发布一个有效的 JavaScript 示例，因为我们可以 100% 客户端运行此代码，这意味着不需要回发，也不需要往返。