Question

我正在尝试在页面上放置旋转滚轮弹出窗口，同时我正在执行后端代码以从数据库中获取新数据。这是我尝试过的，但它不想工作到目前为止，没有任何东西显示出来。我想在单击复选框时显示某些内容（CheckedChanged），即从db获取内容时。

这是我的ajax代码：

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

                    <Triggers>
                       <asp:AsyncPostBackTrigger controlid="cbAll" eventname="CheckedChanged" />
                    </Triggers>

                    <ContentTemplate>
                    </ContentTemplate>

                 </asp:UpdatePanel>



<asp:updateprogress associatedupdatepanelid="UpdatePanel1"
    id="updateProgress" runat="server">
    <progresstemplate>
        <div id="progressBackgroundFilter"></div>
        <div id="processMessage"> Loading...<br /><br />
             <img alt="Loading" src="../images/ajax-loader.gif" />
        </div>
    </progresstemplate>
</asp:updateprogress>

这是复选框控件：

 <asp:CheckBox ID="cbAll" runat="server" Checked="true" Text="Show me everything" ForeColor="White"
        Visible="false" AutoPostBack="True" 
        oncheckedchanged="cbAll_CheckedChanged" />

Answer 1

稍微修改你的代码。

您不需要触发器，该事件具有AutoPostBack复选框。

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <%--<Triggers>
            <asp:AsyncPostBackTrigger ControlID="cbAll" EventName="CheckedChanged" />
        </Triggers>--%>
        <ContentTemplate>
            <asp:CheckBox ID="cbAll" runat="server" Checked="true" Text="Show me everything"
                ForeColor="White" Visible="false" AutoPostBack="True" OnCheckedChanged="cbAll_CheckedChanged" />
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress AssociatedUpdatePanelID="UpdatePanel1" ID="updateProgress" runat="server">
        <ProgressTemplate>
            <div id="progressBackgroundFilter">
            </div>
            <div id="processMessage">
                Loading...<br />
                <br />
                <img alt="Loading" src="../images/ajax-loader.gif" />
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>

我希望这会有所帮助。

Answer 2

你必须使用某种形式的Javascript。

点击此链接：http://encosia.com/improved-progress-indication-with-aspnet-ajax/

Answer 3

我过去通过跳过更新进度控制而不是处理PageRequestManager beginRequest和endRequest事件来做类似的事情。在我的情况下，我也想阻止页面的ui，所以我使用了jQuery blockUI插件。

将以下div放在页面根目录的某处：

<div id="processMessage">
    Loading...
    <br />
    <br />
    <img src="/images/ajax-loader.gif" alt="Loading" />
</div>

使用以下css设置样式：

#updatingDiv
{
    width: 75px;
    height: 75px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 10px;
    display: none;
    background-color: #EEEEEE;
    border: solid 1px #AAAAEE;
}

添加以下JavaScript：

$(function() {
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function() {
        $.blockUI({ message: $('#updatingDiv'), css: { border: 'none', background: 'transparent'} });
    });
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
        $.unblockUI();
    });
});

您需要确保包含我之前提到的jQuery库和blockUI插件。

当然，您可以修改css / html以满足您的需求。

Answer 4

试试这个，不要忘记脚本管理器博客。

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

    <Triggers>
       <asp:AsyncPostBackTrigger controlid="cbAll" eventname="CheckedChanged" />
    </Triggers>

    <ContentTemplate>
        <asp:updateprogress associatedupdatepanelid="UpdatePanel1" id="updateProgress" runat="server">
            <progresstemplate>
            <div id="progressBackgroundFilter"></div>
            <div id="processMessage"> Loading...<br /><br />
             <img alt="Loading" src="../images/ajax-loader.gif" />
            </div>
            </progresstemplate>
        </asp:updateprogress> 
    </ContentTemplate>
 </asp:UpdatePanel>

Source

Answer 5

`

.divWaiting { 位置：绝对; 溢出：隐藏; text-align：center; 顶部：0; 左：0; 身高：100％; 宽度：100％; padding-top：40％;

}

.divWaiting #div1
{
  position: relative;
  top: 0;
  left: 0;
  background-color: White;
  width: 180px;
  left: 460px;
  border: 2px solid #870307;
  border-radius: 6px;
  text-align: center;

}

下载旋转滚轮的.gif图片

执行后端代码asp.net时旋转轮

5 个答案: