asp.net執行后端代碼時旋轉輪子

Question

我正在執行后端代碼以從DB提取新數據時，嘗試在頁面上放置旋轉滾輪彈出窗口。 這是我嘗試過的方法，但是到目前為止，它仍然不起作用，什么也沒顯示。 我想在單擊復選框（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事件，我做了類似的事情。 就我而言，我也想阻止頁面的用戶界面，因此我使用了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>

資源

Answer 5

`

.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圖像用於旋轉輪