.Apple Technologies: Ajax: UpdateProgress Control

3 UpdateProgress Control

The UpdateProgress control enables us to provide feedback about the progress of the partial page rendering. Please note that for initial page rendering, UpdateProgress control content is not displayed. UpdateProgress control is not an independent control it must be associated with an UpdatePanel control.

A page con contain multiple UpdateProgress controls provided it has been associated with different UpdatePanel control. To associate UpdateProgress control we need to set AssociatedUpdatePanelID property to any of the UpdatePanel id. If any postback event occurs from inside an UpdatePanel control, its associated UpdateProgress control content if any are displayed.

AssociatedUpdatePanelID	Gets or sets the ID of the UpdatePanel control from which it is associated with.
AssociatedUpdatePanelID	Gets or sets the ID of the UpdatePanel control from which it is associated with.
ClientID	Gets the server control identifier generated by ASP.NET
ClientID	Gets the server control identifier generated by ASP.NET
DisplayAfter	Gets or sets a value in milliseconds before the UpdateProgress control is displayed.
ClientID	Gets the server control identifier generated by ASP.NET
ProgressTemplate	Gets or sets the template that defines the content of the UpdateProgress control.

DEMO : UpdateProgress

Name
Address
Phone
City
Notice "Please wait" message below after clicking button.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

<asp:Label ID="lblMessage" runat="server" EnableViewState="false" ForeColor="blue"> </asp:Label>

<asp:RequiredFieldValidator ID="Req1" runat="server" ControlToValidate="TextBox1" Text=" * Required"></asp:RequiredFieldValidator> </td> </tr>

<tr> <td>Address</td>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox2" Text=" * Required"></asp:RequiredFieldValidator> </td> </tr>

<tr> <td>Phone</td>

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate= "TextBox3" Text=" * Required"></asp:RequiredFieldValidator> </td> </tr>

<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate= "TextBox4" Text=" * Required"></asp:RequiredFieldValidator> </td> </tr>

<tr> <td><b>Notice "Please wait" message below after clicking button.</b></td>

</tr> </table>

</ContentTemplate>

</asp:UpdatePanel>

// UpdateProgress control

<asp:UpdateProgress ID="Up1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1">

Please wait ...</span>

</ProgressTemplate>

</asp:UpdateProgress>

Source code

<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" Runat="Server">
</asp:Content>
<asp:Content ID="Content2"ContentPlaceHolderID="PlaceHolderForTitleAndIntro" Runat="Server"><div class="ArticleTitle"><h1>UpdateProgress Control</h1></div>
<div class="ArticleContents">The UpdateProgress control enables us to provide feedback about the progress of the partial page rendering. Please note that for initial page rendering, UpdateProgress control content is not displayed.UpdateProgress control is not an independent control it must be associated with an UpdatePanel control.</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" Runat="Server">
<br />   <div class="ArticleContents">
A page con contain multiple UpdateProgress controls provided it has been associated with different <a href="updatepanel.aspx">UpdatePanel</a> control. To associate UpdateProgress control we need to set AssociatedUpdatePanelID property to any of the UpdatePanel id. If any postback event occurs from inside an UpdatePanel control, its associated UpdateProgress control content if any are displayed.
</div><br />
<table width="100%" class="TutoPropPlaceHolder" border="1" cellpadding="2" cellspacing="1">
<tr>     <td class="DemoCP">AssociatedUpdatePanelID</td>
    <td>    Gets or sets the ID of the UpdatePanel control from which it is associated with. </td> </tr>
<tr>    <td class="DemoCP">AssociatedUpdatePanelID</td>
    <td> Gets or sets the ID of the UpdatePanel control from which it is associated with. </td></tr>
<tr>    <td class="DemoCP">ClientID</td>
    <td>  Gets the server control identifier generated by ASP.NET  </td></tr>
<tr>     <td class="DemoCP">ClientID</td>
    <td> Gets the server control identifier generated by ASP.NET    </td></tr>
<tr>    <td class="DemoCP">DisplayAfter</td>
    <td>Gets or sets a value in milliseconds before the UpdateProgress control is displayed. </td></tr>
<tr>    <td class="DemoCP">ClientID</td>
    <td>  Gets the server control identifier generated by ASP.NET    </td></tr>
<tr>    <td class="DemoCP">ProgressTemplate</td>
    <td> Gets or sets the template that defines the content of the UpdateProgress control.  </td></tr>
</table>

<table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
    <tr>   <td class="DemoTitle">       DEMO : UpdateProgress     </td>
        <td align="right"><a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/ajax/updateprogress.aspx" target="_blank">Show Source Code</a>  </td>    </tr>
    <tr> <td> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>

<asp:Label ID="lblMsg" runat="server" EnableViewState="false" ForeColor="blue"></asp:Label>
<table border="1">

            <tr>     <td>Name</td>
                <td><asp:TextBox ID="TextBox1" runat="Server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="Req1" runat="server" ControlToValidate="TextBox1" Text=" * Required"></asp:RequiredFieldValidator>            </td>            </tr>
            <tr>                <td>Address</td>
                <td><asp:TextBox ID="TextBox2" runat="Server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox2" Text=" * Required"></asp:RequiredFieldValidator>             </td>            </tr>
            <tr>              <td>Phone</td>
                <td><asp:TextBox ID="TextBox3" runat="Server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox3" Text=" * Required"></asp:RequiredFieldValidator>             </td>            </tr>
            <tr>                <td>City</td>
                <td><asp:TextBox ID="TextBox4" runat="Server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox4" Text=" * Required"></asp:RequiredFieldValidator>        </td>        </tr>
            <tr>          <td><b>Notice "Please wait" message below after clicking button.</b></td>

    <td> <asp:Button ID="btnSave" runat="Server" OnClick="AddRecords" Text="Add Records" />
                </td>          </tr>        </table>
        </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="Up1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                <span style="background-color:Yellow;"><img src="/images/wait.gif" alt= "Please wait" /> Please wait ...</span>       </ProgressTemplate>
        </asp:UpdateProgress>         </td>
        <td>           <a href="../../userfiles/samples/dotnetfundaaspajax.zip">Download Sample project with Source Code</a>        </td>    </tr>
    <tr>        <td colspan="2"><pre>
<asp:UpdatePanel <b>ID="UpdatePanel1"</b> runat="server" UpdateMode="Conditional">
    <ContentTemplate>    <asp:Label ID="lblMessage" runat="server" EnableViewState="false" ForeColor="blue"></asp:Label>   <table border="1">
    <tr>         <td>Name</td>
        <td><asp:TextBox ID="TextBox1" runat="Server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="Req1" runat="server" ControlToValidate="TextBox1" Text=" * Required"></asp:RequiredFieldValidator>
        </td>                         </tr>                             <tr>
        <td>Address</td>
        <td><asp:TextBox ID="TextBox2" runat="Server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox2" Text=" * Required"></asp:RequiredFieldValidator>
        </td>                         </tr>                 <tr>                       <td>Phone</td>
        <td><asp:TextBox ID="TextBox3" runat="Server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox3" Text=" * Required"></asp:RequiredFieldValidator>
        </td>                         </tr>                             <tr>               <td>City</td>
        <td><asp:TextBox ID="TextBox4" runat="Server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox4" Text=" * Required"></asp:RequiredFieldValidator>
        </td>                         </tr>                 <tr>
    <td><b>Notice "Please wait" message below after clicking button.</b></td>
        <td>
      <asp:Button ID="btnSave" runat="Server" OnClick="AddRecords" Text="Add Records" />
      </td>                           </tr>             </table>           </ContentTemplate>
</asp:UpdatePanel>
<b>// UpdateProgress control </b>
<asp:UpdateProgress ID="Up1" runat="Server" <b>AssociatedUpdatePanelID="UpdatePanel1"</b>>     <ProgressTemplate>         <span style="background-color:Yellow;"><img src="/images/wait.gif" alt="Please wait" /> Please wait ...</span>
    </ProgressTemplate>                     </asp:UpdateProgress>         </pre>       </td>    </tr>
</table>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" Runat="Server">
</asp:Content>

using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class tutorials_Ajax_updateprogress : System.Web.UI.Page   {
    protected void Page_Load(object sender, EventArgs e)            {
        try                   {
            impFunctions.WriteMetaTags(this, "updateprogress, asp:updateprogress, updateprogress tutorials, online updateprogress tutorials", "Free online ASP.NET Ajax UpdateProgress control tutorials with live demo, source code and downloadable sample project.", false);
            Label lblSiteMap = (Label)this.Master.FindControl("lblSiteMap");
            lblSiteMap.Text = "<a href=\"/default.aspx\" class=\"siteMap\">Home</a> > <a href=\"/tutorials/\" class=\"siteMap\" title=\"Tutorials Home\">Tutorials</a> > <a href=\"/tutorials/ajax\" class=\"siteMap\">ASP.NET AJAX Tutorials</a> > UpdateProgress Control ";                                }
        catch { }     }
    /// <summary>
    /// Fires when Add Records button is clicked
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void AddRecords(object sender, EventArgs e)     {
        // Sleep the process for 5 seconds to display UpdateProgress contents
        System.Threading.Thread.Sleep(5000);
        string connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ToString( );
        string strSql = string.Empty;
        using (SqlConnection conn = new SqlConnection(connStr))               {
            conn.Open( );
            strSql = "INSERT INTO SampleForTutorials (Name, Address, Phone, City) VALUES (@Name, @Address, @Phone, @City)";
            SqlCommand dCmd = new SqlCommand(strSql, conn);
            dCmd.Parameters.AddWithValue("@Name", TextBox1.Text.Trim( ));
            dCmd.Parameters.AddWithValue("@Address", TextBox2.Text.Trim( ));
            dCmd.Parameters.AddWithValue("@Phone", TextBox3.Text.Trim( ));
            dCmd.Parameters.AddWithValue("@City", TextBox4.Text.Trim( ));
            dCmd.ExecuteNonQuery( );
            // Reset the textbox value
            TextBox1.Text = "";
            TextBox2.Text = "";
            TextBox3.Text = "";
            TextBox4.Text = "";
            conn.Close( );
            lblMessage.Text = "New Records Entered Successfully !!!";           }                  }

}

Pages

Sunday 9 December 2012

Ajax: UpdateProgress Control

No comments:

Post a Comment