运行完所有其他代码后，将显示模式弹出加载屏幕

本文关键字：模式 显示 屏幕 加载 其他 代码 运行 | 更新日期: 2023-09-27 18:24:19

我有一个web表单，它接受用户输入，生成动态SQL查询，并将结果输出到网格视图。

SQL可能需要一段时间才能运行，所以我使用Bootstraps模式弹出窗口制作了一个加载屏幕。这个想法是在SQL运行时显示加载屏幕。

然而，加载弹出窗口出现在AFTER网格视图中填充了结果之后，这有点违背了加载屏幕的点！！！

有人能告诉我为什么会发生这种情况，并帮助我找到潜在的解决方案吗？

C#

    protected void btnRun_Click(object sender, EventArgs e)
    {
        //Display the loading popup
        ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowLoading();", true);
        //Declaring the SQL statement to be passed to the database
        SqlDataSource SqlDataSource1 = new SqlDataSource();
        SqlDataSource1.ID = "SqlDataSource1";
        this.Page.Controls.Add(SqlDataSource1);
        SqlDataSource1.ConnectionString = ConfigurationManager.ConnectionStrings["myConnectionString"].ConnectionString;
        SqlDataSource1.SelectCommand = "SQL Command Here";
        gvResults.DataSource = SqlDataSource1;
        gvResults.DataBind();
    }

JavaScript

    function ShowLoading() {
        $("#btnShowModalLoading").click();
    }

ASPX

<button id="btnShowModalLoading" type="button" class="btn btn-info btn-lg hide" data-toggle="modal"
    data-target="#modalLoading">
    Open Modal</button>

模态

<div id="modalLoading" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-body">
                <h2>
                    Please Wait...</h2>
                <div class="progress">
                    <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

运行完所有其他代码后，将显示模式弹出加载屏幕

您正在服务器端OnClick处理程序中注册ClientStartupScript。这意味着，当处理程序完成并通过Postback或Ajax返回数据时，脚本才会运行。

您需要附加一个客户端onclick事件，例如通过jQuery或按钮的onclientclick属性，这就是打开模态的代码所在。

这是对请求的响应。为了实现这一点，你需要让你的运行按钮点击显示加载模式，然后在那里用javascript提交。

相关文章：