1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

آموزش Ajax/مثال عملی کار با کنترل UpdateProgress

شروع موضوع توسط Amon Amarth ‏24/4/13 در انجمن Ajax

  1. MajiD.JD

    کاربر ارشد

    تاریخ عضویت:
    ‏7/6/12
    ارسال ها:
    12,082
    تشکر شده:
    28,151
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    [h=2]مثال عملی کار با کنترل UpdateProgress[/h]

    مثال عملی کار با کنترل UpdateProgress :
    ​
    در این بخش قصد داریم تا با ارائه یک مثال عملی و تشریح کد آن ، نحوه استفاده از کنترل UpdateProgress در ASP.Net را به شما آموزش دهیم .

    کد مثال زیر را مرور نمایید . هر بخش از کد که نیاز به توضیح داشته ، را با یک رنگ مجزا مشخص کرده و سپس آن را در پایان مثال توضیح داده ایم :
    در مثال زیر یک کنترل UpdateProgress ، وضعیت عملیات آپدیت شدن 2 کنترل UpdatePannel را نمایش می دهد .
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] کد [/TD]
    [TD="class: prdes, align: left"] <%@ Page Language="C#" AutoEventWireup="true" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <script runat="server">
    protected void Button_Click(object sender, EventArgs e) // کد تابعی که در هنگام کلیک بر روی دکمه فرمان ها اجرا می شود
    {
    System.Threading.Thread.Sleep(3000); // سرور یک تاخیر 3 ثانیه ای را انجام می دهد
    }
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    <title> UpdateProgress مثال عملی کار با کنترل تایمر</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 { // تنظمیم خواص مورد نظر برای کنترل های مختلف
    border-right: gray 1px solid; border-top: gray 1px solid;
    border-left: gray 1px solid; border-bottom: gray 1px solid;
    }
    #UpdatePanel1, #UpdatePanel2 {
    width:200px; height:200px; position: relative;
    float: left; margin-left: 10px; margin-top: 10px;
    }
    #UpdateProgress1 {
    width: 400px; background-color: #FFC080;
    bottom: 0%; left: 0px; position: absolute;
    }
    </style>
     </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> <%-- برای کارکرد صحیح سایر کنترل ها وجود یک نمونه از این کنترل بر روی صفحه اجباری است --%>
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1" runat="server" Text="Refresh Panel" OnClick="Button_Click" />
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
    Update in progress...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </div>
    </form>
    </body> </body>
    </html> [/TD]
    [/TR]
    [TR]
    [TD="class: prname"] خروجی [/TD]
    [TD="class: prdes, align: center"] مشاهده خروجی مثال [/TD]
    [/TR]
    [/TABLE]

    • کد تابع جاوا اسکریپتی که در هنگام کلیک بر روی دکمه فرمان های موجود در دو کنترل UpdatePannel ، اجرا می شود .
    • کد کنترل UpdatePannel اول .
    • کد کنترل UpdatePannel دوم .
    • کد کنترل UpdateProgress ، که یک نمایه تصویری را در زمان آپدیت شدن کنترل های UpdatePannel ، بر روی صفحه نمایش می دهد .
    ​


    منبع: developer1
     
    MajiD.JD, ‏24/4/13
    #1