در این مقاله نحوه استفاده از AJAX UpdateProgress برای قفل کردن کنترل ها استفاده میکنیم

در این مقاله نحوه استفاده از AJAX UpdateProgress برای قفل کردن کنترل ها استفاده میکنیم

یک پروژه جدید از نوع وب فرم بسازید سپس یک صفحه جدید به پروژه اضافه کنید و از جعبه ابزار خود یک کنترل UpdatePanel با یک دکمه و یک کنترل UpdateProgress اضافه کنید:

 <asp:ScriptManager runat="server">
    </asp:ScriptManager>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
            <div class="modal">
                <div class="center">
                    <img alt="" src="loader.gif" />
                </div>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div align="center">
                <h1>
                    برای دیدن UpdateProgress روی دکمه نمایش کلیک کنید</h1>
                <asp:Button ID="Button1" Text="نمایش" runat="server" OnClick="Button1_Click" />
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

سپس درون رویداد کلیک دکمه نمایش کد زیر را بنویسید:

protected void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(5000);
}

برای نمایش updateProgress در وسط صفحه از style زیر استفاده کنید:

<style type="text/css">
body
{
    margin: 0;
    padding: 0;
    font-family: Arial;
}
.modal
{
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    top: 0;
    background-color: Black;
    filter: alpha(opacity=60);
    opacity: 0.6;
    -moz-opacity: 0.8;
}
.center
{
    z-index: 1000;
    margin: 300px auto;
    padding: 10px;
    width: 130px;
    background-color: White;
    border-radius: 10px;
    filter: alpha(opacity=100);
    opacity: 1;
    -moz-opacity: 1;
}
.center img
{
    height: 128px;
    width: 128px;
}
</style>