Sunday 9 December 2012

Ajax - UpdatePanel


2 UpdatePanel Control
UpdatePanel control is a central part of ASP.NET AJAX functionality. It is used with ScriptManager control to enable partial rendering of the page. You must be aware that partial page rendering reduces the need for synchronous postbacks and complete page updates when a part of the page need to be updated.
There are bunch of properties and method associated with UpdatePanel control but I am going to show few properties that are oftenly used.
ChildControlsCreated
Gets or sets a value that indicates whether the server control's child control have been created.
ChildrenAsTriggers
Gets or sets a value that indicates whether postback from immediate child controls of an UpdatePanel control updates the panel's content.
ClientID
Gets the server control identifier generated by ASP.NET
ContentTemplate
This is the must use property of the UpdatePanel control. Gets or sets the template that defines the content of the UpdatePanel control. You need to place content of the page that you want to be in the UpdatePanel inside this.
EnableTheming
Gets or sets a value that indicates whether themes apply to this control.
EnableViewState
Gets or sets a value (true/false) that indicates whether the server control persists its and its child control view state.
IsInPartialRendering
Gets or sets a value (true/false) that indicates whether UpdatePanel control is being updated as a result of an asynchornous postbacks.
RenderMode
Gets or sets a value (Block/Inline) that indicates whether content is enclosed with HTML div (block) or span (inline).
Triggers
Gets an UpdatePanelTriggerCollection object that contains AsyncPostBackTrigger and PostBackTrigger objects that were registered for the UpdatePanel control.
UpdateMode
Gets or sets a value (Always/Conditional) that indicates when an UpdatePanel controls content is updated. Always: Update the content of the UpdatePanel irrespective any postback. Conditional: Update the content of the UpdatePanel when control triggers associated with this UpdatePanel.

DEMO : UpdatePanel
Try using Edit/Delete and notice whole page is not refreshing

Delete?
AutoID
Name
Address
Phone
City
Edit
Delete
10898




Edit
Delete
10896
d
d
3
d
Edit
Delete
10862
dfg
dfg
dfg
dfg
Edit
Delete
10893
Gabriel Jorge
Quifica 38
937606245
Luanda
Edit
Delete
10877
gbergert
werwerwer
rwerwe
rwerwe
1
2
3
4
5
6
7
8
9
10
// Update Panel
<asp:UpdatePanel runat="Server" ID="UpdatePanel1" UpdateMode="Conditional">
    // Content Template, You can put whatever content you want,
    // any event fires inside this block will update this block content only
    <ContentTemplate>
   
        <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" Caption="Try using Edit/Delete and notice whole page is not refreshing"
            AllowPaging="True" AllowSorting="True" AutoGenerateEditButton="true" DataKeyNames="AutoID"
            PageSize="5" CellPadding="2" CellSpacing="1" EmptyDataText="<b>Sorry, There are no records to show in GridView. </b>">
            <Columns>
                <asp:TemplateField HeaderText="Delete?">
                    <ItemTemplate>
                        <asp:LinkButton ID="lnk1" runat="server" Text="Delete" OnClientClick="return confirm('Are you sure to Delete?')"
                            CommandName="Delete"></asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
       
        // SqlDataSource, the datasource of the GridView
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString='<%$ ConnectionStrings:ConnStr %>'
            SelectCommand="Select * FROM SampleForTutorials ORDER BY [Name]" DeleteCommand="Delete FROM SampleForTutorials WHERE AutoID = @AutoID"
            UpdateCommand="UPDATE SampleForTutorials SET Name = @Name, Address = @Address, Phone = @Phone, City = @City WHERE AutoID = @AutoID">
            <DeleteParameters>
                <asp:Parameter Name="AutoID" />
            </DeleteParameters>
            <UpdateParameters>
                <asp:Parameter Name="AutoID" Type="Int32" />
                <asp:Parameter Name="Name" Type="string" Size="50" />
                <asp:Parameter Name="Address" Type="string" Size="200" />
                <asp:Parameter Name="Phone" Type="string" />
                <asp:Parameter Name="City" Type="string" Size="20" />
            </UpdateParameters>
        </asp:SqlDataSource>
       
    </ContentTemplate>
</asp:UpdatePanel>

Updatepanel.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" Runat="Server">  </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderForTitleAndIntro" Runat="Server">
<div class="ArticleTitle"><h1>UpdatePanel Control</h1></div>
<div class="ArticleContents">
UpdatePanel control is a central part of ASP.NET AJAX functionality. It is used with <a href="scriptmanager.aspx">ScriptManager</a> control to enable partial rendering of the page. You must be aware that partial page rendering reduces the need for synchronous postbacks and complete page updates when a part of the page need to be updated.
</div>   </asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" Runat="Server">
<div class="ArticleContents">
<p>There are bunch of properties and method associated with UpdatePanel control but I am going to show few properties that are oftenly used.</p></div>
<table width="98%" class="TutoPropPlaceHolder" border="1" cellpadding="2" cellspacing="1">
<tr>   <td class="DemoCP">ChildControlsCreated</td>
    <td>  Gets or sets a value that indicates whether the server control's child control have been created.  </td></tr>
<tr>    <td class="DemoCP">ChildrenAsTriggers</td>
    <td>        Gets or sets a value that indicates whether postback from immediate child controls of an UpdatePanel control updates the panel's content.    </td></tr>
<tr>    <td class="DemoCP">ClientID</td>
    <td>        Gets the server control identifier generated by ASP.NET    </td></tr>
<tr>    <td class="DemoCP">ContentTemplate</td>
    <td> This is the must use property of the UpdatePanel control. Gets or sets the template that defines the content of UpdatePanel control. U need to place content of the page that you want to be in the UpdatePanel inside this.  </td></tr>
<tr>    <td class="DemoCP">EnableTheming</td>
    <td>        Gets or sets a value that indicates whether themes apply to this control.    </td></tr>
<tr>    <td class="DemoCP">EnableViewState</td>
    <td> Gets or sets a value (true/false) that indicates whether the server control persists its and its child control view 
state.    </td></tr>
<tr>    <td class="DemoCP">IsInPartialRendering</td>
    <td>        Gets or sets a value (true/false) that indicates whether UpdatePanel control is being updated as a result of an asynchornous postbacks.    </td></tr>
<tr>    <td class="DemoCP">RenderMode</td>
    <td>       Gets or sets a value (Block/Inline) that indicates whether content is enclosed with HTML div (block) or span (inline).    </td></tr>
<tr>    <td class="DemoCP">Triggers</td>
    <td>        Gets an UpdatePanelTriggerCollection object that contains AsyncPostBackTrigger and PostBackTrigger objects that were registered for the UpdatePanel control.    </td></tr>
<tr>    <td class="DemoCP">UpdateMode</td>
    <td>     Gets or sets a value (Always/Conditional) that indicates when an UpdatePanel controls content is updated. <b>Always:</b> Update the content of the UpdatePanel irrespective any postback. <b>Conditional:</b> Update the content of the UpdatePanel when control triggers associated with this UpdatePanel.            </td></tr>
</table>
<!-- START - Demo Section -->
        <table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
            <tr>             <td class="DemoTitle">                 DEMO : UpdatePanel                </td>
                <td align="right">             <a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/ajax/updatepanel.aspx" target="_blank">Show Source Code</a>               </td>             </tr>
            <tr>                <td>                  <asp:UpdatePanel runat="Server" ID="UpdatePanel1" UpdateMode="Conditional">
                        <ContentTemplate>                       
            <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" Caption="Try using Edit/Delete and notice whole page is not refreshing"  AllowPaging="True"  AllowSorting="True"  AutoGenerateEditButton="true"  DataKeyNames="AutoID"  PageSize="5"  CellPadding="2"  CellSpacing="1" EmptyDataText=" <b>Sorry, There are  no  records to show in GridView. Try Inserting records from <a href='/tutorials/controls/formview.aspx'>FormView Control </a> tutorial.</b>">
    <Columns>
        <asp:TemplateField HeaderText="Delete?">
              <ItemTemplate>
    <asp:LinkButton ID="lnk1" runat="server" Text="Delete" OnClientClick="return confirm('Are you sure to Delete?')"
                                                CommandName="Delete"></asp:LinkButton>
              </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>                          
      <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString='<%$ ConnectionStrings:ConnStr %>'
       SelectCommand="Select * FROM SampleForTutorials ORDER BY [Name]" DeleteCommand="Delete FROM SampleForTutorials WHERE AutoID = @AutoID"  UpdateCommand="UPDATE SampleForTutorials SET  Name = @Name,  Address =  @Address, Phone = @Phone, City = @City WHERE AutoID = @AutoID">    
     <DeleteParameters>   <asp:Parameter Name="AutoID" /> </DeleteParameters>
     <UpdateParameters>
        <asp:Parameter Name="AutoID" Type="Int32" />      <asp:Parameter Name="Name" Type="string" Size="50" />
        <asp:Parameter Name="Address" Type="string" Size="200" />   <asp:Parameter Name="Phone" Type="string" />
        <asp:Parameter Name="City" Type="string" Size="20" />
    </UpdateParameters> </asp:SqlDataSource>                        </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>  <b>// Update Panel</b>
&lt;asp:UpdatePanel runat="Server" ID="UpdatePanel1" UpdateMode="Conditional"&gt;
    <b>// Content Template, You can put whatever content you want,
    // any event fires inside this block will update this block content only </b>       &lt;ContentTemplate&gt;   
        &lt;asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" Caption="Try using Edit/Delete and notice whole page is not refreshing"             AllowPaging="True"  AllowSorting="True"  AutoGenerateEditButton= "true" DataKeyNames="AutoID"  PageSize="5" CellPadding="2" CellSpacing="1"  EmptyDataText= "&lt;b&gt;Sorry,  There are no records to show in GridView. &lt;/b&gt;"&gt;  &lt;Columns&gt; &lt;asp:TemplateField  HeaderText= "Delete?"&gt;   &lt;ItemTemplate&gt;
                        &lt;asp:LinkButton ID="lnk1" runat="server"  Text="Delete" OnClientClick= "return confirm ('Are you  sure  to Delete?')"  CommandName="Delete"&gt;&lt;/asp:LinkButton&gt;     &lt;/ItemTemplate&gt;
                &lt;/asp:TemplateField&gt;            &lt;/Columns&gt;           &lt;/asp:GridView&gt;       
       <b> // SqlDataSource, the datasource of the GridView</b>        &lt;asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString='&lt;%$ ConnectionStrings:ConnStr %&gt;'
            SelectCommand="Select * FROM SampleForTutorials ORDER BY [Name]" DeleteCommand="Delete FROM SampleForTutorials WHERE AutoID = @AutoID"
            UpdateCommand="UPDATE SampleForTutorials SET Name = @Name, Address = @Address, Phone = @Phone, City = @City WHERE AutoID = @AutoID"&gt;
            &lt;DeleteParameters&gt;                          &lt;asp:Parameter Name="AutoID" /&gt;             &lt;/DeleteParameters&gt;                            &lt;UpdateParameters&gt;
                &lt;asp:Parameter Name="AutoID" Type="Int32" /&gt;
                &lt;asp:Parameter Name="Name" Type="string" Size="50" /&gt;
                &lt;asp:Parameter Name="Address" Type="string" Size="200" /&gt;
                &lt;asp:Parameter Name="Phone" Type="string" /&gt;
                &lt;asp:Parameter Name="City" Type="string" Size="20" /&gt;
            &lt;/UpdateParameters&gt;                                   &lt;/asp:SqlDataSource&gt;                                    &lt;/ContentTemplate&gt;
&lt;/asp:UpdatePanel&gt;</pre>                     </td>                        </tr>
</table>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" Runat="Server">
</asp:Content>
Updatepanel.aspx.cs
using System;
using System.Data;
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_updatepanel : System.Web.UI.Page   {
    protected void Page_Load(object sender, EventArgs e)                {
        try          {
            impFunctions.WriteMetaTags(this, "updatepanel, asp:updatepanel, updatepanel tutorials, online updatepanel tutorials", "Free online ASP.NET Ajax UpdatePanel 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> > UpdatePanel Control ";                        }
        catch { }            }
}
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)