Question

我想要一种功能，无论何时用户通过单击按钮上传文件，该功能都可以使用。直到数据一直在后台加载，我要以表格形式显示加载器。

为此，我如下添加了div

<div id="divLoadingPanel" class="Loadingdiv">
    <img src="Images/loading.gif" alt="loading" />
</div>

JS

function showLoadingPanel() {
        $("#divLoadingPanel").show();
    }

因此，在单击按钮时，我从服务器端像下面这样调用它

protected void btnUploadExcelData_Click(object sender, EventArgs e)
{
    try
    {
        ClientScript.RegisterStartupScript(Page.GetType(), "loadImage", "showLoadingPanel()", true);
        UploadValidateExcelFile();
    }
    catch (Exception)
    {            
        throw;
    }
}

但是，每当我单击按钮时，我都看不到装载机。请说明为什么它不起作用，

注意：当我在下拉列表的onchange上使用同一加载器时，该加载器正在工作。

Answer 1

更加注意将客户端代码与服务器端代码分开。当您使用服务器端点击事件时，将发生回发。这意味着您的客户端代码将在客户端收到回发响应后注册为don。因此，在从向服务器发送请求到获得响应的持续时间内，将不会执行任何操作。为什么在下拉菜单中使用onchange可以正常工作？因为您使用的是客户端事件，而不是服务器端！您的解决方案是使用ajax代码异步发送和接收数据，而无需任何回发（页面刷新），并使用一些javascript代码显示负载映像，直到服务器响应为止。如果您不熟悉ajax，可以使用的第二种方法是使用诸如UpdatePanel之类的.Net ajax控件。

JQuery示例：

function sendData(dataValue)
{
    $("#divLoadingPanel").show();
    $.ajax({
            type: "POST",
            url: "Your_Page/Your_Method",
            data: dataValue,                
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
            },
            success: function (result) {
                alert("We returned: " + result);
            },
            complete: function(){
                $("#divLoadingPanel").hide();
            }
        });
}

在“上传”按钮上单击添加加载图像不起作用

1 个答案: