UpdatePanel çalışırken fare imlecini değiştirme

UpdatePanel imiz çalışırken fare imlecini bekleme moduna döndürmeyi göstermek istiyorum.

Bu iş için birazcık CSS ve UpdateProgress kullanacağız o kadar.

UpdateProgress içine bir adet div yerleştireceğiz. Bu div in css leri ile birazcık oynadık mı gerisi otomatik çalışacaktır.

Önce CSS kodunu vereyim:

<style type="text/css">
    .updateprogress
    {
        background-color: White;
        filter: alpha(opacity=20);
        opacity: 0.2;
        position: fixed;
        left: 0px;
        top: 0px;
        bottom: 0px;
        right: 0px;
        z-index: 10000;
        cursor: wait;
    }
</style>

cursor: wait tanımının olduğu satıra dikkat edin.

Sonra da UpdateProgress ve UpdatePanelimizi yerleştirelim. Tabii UpdatePanel in çalışması için sayfamıza ScriptManager i eklemeyi unutmuyoruz. 

 <form id="form1" runat="server">
    <asp:ScriptManager ID="sm" runat="server" />
    <div>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="YourUpdatePanelID">
            <ProgressTemplate>
                <div  class="updateprogress">
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
        <asp:UpdatePanel ID="YourUpdatePanelID" runat="server">
            <ContentTemplate>
                <asp:Label ID="lblText" runat="server" Text=""></asp:Label>
                <asp:Button ID="btnUpdate" runat="server" Text=" Tıkla " OnClick="btnUpdate_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>

Butona tıkladığımızda iş yapıyor havası versin diye Thread.Sleep metodunu kullanalım ve bir labele saati yazdıralım:

protected void btnUpdate_Click(object sender, EventArgs e)
{
    Thread.Sleep(3000);
    lblText.Text = DateTime.Now.ToLongTimeString();
}

Şimdi de sonucu görelim:

Kod örneğini buradan indirebilirsiniz.