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

Hep beraber, UpdatePanel çalışırken fare imlecini "wait" haline getirmeyi görelim.

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.