在部分回发上显示加载程序图像不起作用 [英] Show loader image on partial postback is not working

问题描述

我在asp.net网站上有一个母版页和一个子页面。

在母版页上，我有一个脚本管理器并连接到相应的jquery文件，如下所示：

I have a master page and a child page in an asp.net website.
On master page, I have a script manager and have connected to appropriate jquery files as under:

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-ui.js"></script>

在内容页面中，我在updatepanel控件中有一些文本框和一个按钮。单击该按钮会部分回发到服务器并获取数据。

到目前为止这个工作正常。

但是我遇到了问题。我想在部分处理期间显示加载程序图像，单击按钮时不会显示该图像。在母版页上，我在窗体标记内放置了一个脚本管理器，如下所示：

In the content page I have some textboxes and a button inside updatepanel control. Clicking on that button partially posts back to server and fetches the data.
This much is working fine till now.
However I am facing a problem. I want to show a loader image during the partial processing which is not showing on clicking the button. On Master Page, I have placed a script manager inside form tag as under:

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

我在内容页面上为loader创建了以下div：

I have created the following div for loader on content page:

<div class="loader">
    <img src="images/loading2.gif" alt="">
</div>

这是我的装载机图像的CSS：

Here is my css for the loader image:

.loader 
{
 position: fixed;
 left: 0px;
 top: 0px;
 height: 100%;
 width: 100%;
 z-index: 9999;
 display: none;
}
.loader img
{
 display:block;
 position: absolute;
 margin: auto;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin:auto;
}

在内容页面上，我将Jquery编写为：

On Content Page, I have written the Jquery as under:

<script>
    $(document).ready(function () {
        $('.loadloader').click(function () {
            $(".loader").show();
        });
    });
</script>

注意：这里的loadloader是asp.net按钮的一个类，点击它发生部分回发，加载器图像应该显示。看看下面：

Note: Here loadloader is the class of the asp.net button clicking on which the partial postback occurs and loader image should show. Have a look below:

<asp:Button ID="btn_apst2proceed" runat="server" ValidationGroup="st1" Text="Proceed" onclick="btn_apst2proceed_Click" class="loadloader" />

在内容页面的页面加载事件中，我编写了这个脚本：

On the page load event of content page, I have written this script:

if (((ScriptManager)this.Master.FindControl("ScriptManager1")).IsInAsyncPostBack)
{
    StringBuilder sb = new StringBuilder();
    sb.Append("<script language='javascript' type='text/javascript'>");
    sb.Append("Sys.Application.add_load(func);");
    sb.Append("function func() {");
    sb.Append("Sys.Application.remove_load(func);");
    sb.Append("$('.loader').hide();");
    sb.Append("}");
    sb.Append("</script>");
    ScriptManager.RegisterStartupScript(this, GetType(), "script", sb.ToString(), false);
}
Page.Header.DataBind();

对我来说一切似乎都很好，但我不明白为什么装载机图像没有在部分显示回帖。请帮忙。



我尝试过：



解释一下解释本身。

Everything seems fine to me but I donot understand why the loader image is not showing on partial post back. Kindly help.

What I have tried:

Explain it in the explanation itself.

推荐答案

（ document ）。ready（ function （）{

(document).ready(function () {

（' .loadloader').click( function （）{

('.loadloader').click(function () {

（ 。loader）。show（）;
}）;
}）;
< / script>

(".loader").show(); }); }); </script>

注意：这里的loadloader是asp.net按钮的一个类，点击它发生部分回发，加载器图像应该显示。看看下面：

Note: Here loadloader is the class of the asp.net button clicking on which the partial postback occurs and loader image should show. Have a look below:

<asp:Button ID="btn_apst2proceed" runat="server" ValidationGroup="st1" Text="Proceed" onclick="btn_apst2proceed_Click" class="loadloader" />

在内容页面的页面加载事件中，我编写了这个脚本：

On the page load event of content page, I have written this script:

if (((ScriptManager)this.Master.FindControl("ScriptManager1")).IsInAsyncPostBack)
{
    StringBuilder sb = new StringBuilder();
    sb.Append("<script language='javascript' type='text/javascript'>");
    sb.Append("Sys.Application.add_load(func);");
    sb.Append("function func() {");
    sb.Append("Sys.Application.remove_load(func);");
    sb.Append("

这篇关于在部分回发上显示加载程序图像不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！