2

我正在尝试在页面上放置一个旋转轮弹出窗口，同时我正在执行后端代码以从数据库中获取新数据。这是我尝试过的，但到目前为止它不想工作，什么都没有显示。我想在单击复选框（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" />
4

4 回答 4

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>

我希望这有帮助。

于 2012-07-17T19:32:57.513 回答
0

我过去做过类似的事情，跳过更新进度控制，而是处理PageRequestManagerbeginRequest 和 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 以满足您的需要。

于 2012-07-17T19:40:12.630 回答
0

试试这个，别忘了脚本管理器博客。

<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>

来源

于 2012-07-17T20:22:08.030 回答
0


`

.divWaiting { 位置：绝对；溢出：隐藏；文本对齐：居中；顶部：0；左：0；高度：100%；宽度：100%；填充顶部：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 图像

于 2015-08-03T10:52:22.290 回答