Update Panle Usuage: Enables sections of a page to be partially rendered without a postback.

Size: px

Start display at page:

Download "Update Panle Usuage: Enables sections of a page to be partially rendered without a postback."

Sharleen Hensley
6 years ago
Views:

1 WWW221 Agenda Week 4 -Update Panel revisited Update Panle Usuage: Enables sectins f a page t be partially rendered withut a pstback. Refreshing UpdatePanel Cntent When partial-page rendering is enabled, a cntrl can perfrm a pstback that updates the whle page r an asynchrnus pstback that updates the cntent f ne r mre UpdatePanel cntrls. Whether a cntrl causes an asynchrnus pstback and updates an UpdatePanel cntrl depends n the fllwing: If the UpdateMde prperty f the UpdatePanel cntrl is set t Always, the UpdatePanel cntrl's cntent is updated n every pstback that riginates frm the page. This includes asynchrnus pstbacks frm cntrls that are inside ther UpdatePanel cntrls and pstbacks frm cntrls that are nt inside UpdatePanel cntrls. If the UpdateMde prperty is set t Cnditinal, the UpdatePanel cntrl's cntent is updated in the fllwing circumstances: When yu call the Update() methd f the UpdatePanel cntrl explicitly. When the UpdatePanel cntrl is nested inside anther UpdatePanel cntrl, and the parent panel is updated. When a pstback is caused by a cntrl that is defined as a trigger by using the Triggers prperty f the UpdatePanel cntrl. In this scenari, the cntrl explicitly triggers an update f the panel cntent. The cntrl can be either inside r utside the UpdatePanel cntrl that the trigger is assciated with. When the ChildrenAsTriggers prperty is set t true and a child cntrl f the UpdatePanel cntrl causes a pstback. Child cntrls f nested UpdatePanel cntrls d nt cause an update t the uter UpdatePanel cntrl unless they are explicitly defined as triggers. ASP.NET AJAX Extensins Update Panel and Triggers T grasp full understanding f asyncrnus pstback cnsider the fllwing example: S far we have been using Update Panels with cntrls inside the Update Panel which initiate the partial page refresh. 1

2 What if we want t refresh an Update Panel based n an external event like a Buttn which is nt necessarily a part f the UpdatePanel's cntent template? Wait! Dnt jump int ugly ways f refreshing the whle page using F5! Triggers is yur friend in this case. A trigger can be defined within the Update Panel t specify which cntrl needs t trigger a partial refresh fr that sectin. Fr that matter, the nly 2 tags yu can directly place within an UpdatePanel are CntentTemplate and Triggers. If yu directly try placing HTML r Web Cntrls within the UpdatePanel, it will start thrwing cmpilatin errrs! Ok, let us jump int cde t understand mre. Cpy paste the fllwing HTML Surce and Cde behind t yur Asp.Net Ajax page (chse VB as a language). <frm id="frm1" runat="server"> <asp:scriptmanager ID="ScriptManager1" runat="server" /> <div> Label utside the Update Panel Refreshed at: <asp:label ID="Label2" runat="server"></asp:label> <br /><br /> <asp:buttn ID="Buttn1" runat="server" Text="Refresh" OnClick="Buttn1_Click" /> <br /><br /> <asp:updatepanel ID="UpdatePanel1" runat="server" UpdateMde="cnditinal"> <CntentTemplate> Label within the Update Panel Refreshed at: <asp:label ID="Label1" runat="server"></asp:label> </CntentTemplate> <Triggers> <%--<asp:pstbacktrigger CntrlID="Buttn1" />--%> <asp:asyncpstbacktrigger CntrlID="Buttn1" EventName="Click" /> </Triggers> </asp:updatepanel> </div> </frm> Fr yur cde behind cpy in the fllwing cde int the respected areas: Prtected Sub Page_Lad(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Lad Label1.Text = System.DateTime.Nw.TString() Label2.Text = System.DateTime.Nw.TString() End Sub 2

3 Prtected Sub Buttn1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Buttn1.Click End Sub Ntice the abscence f any cde fr the buttn event. Can we guess why? Nw, when yu run this page, yu will ntice that when yu click n the "Refresh" buttn yu will see that the label belw the Refresh buttn gets updated whereas the label abve remains with ld value Cuple f interesting things t ntice:- The Buttn cntrl is defined utside the UpdatePanel unlike ur previus samples. The Triggers cntains smething called as AsyncPstBackTrigger fr which the CntrlID is specified as Buttn1 and EventID is specified as Click. Fr nw, frget the cmmented PstBackTrigger definitin. The AsyncPstBackTrigger initiates an async call back and the buttn assciated desn't d a refresh r pstback explicitly t execute the cde. In fact, the cde yu place within the Buttn1_Click event will thrw errr, if yu want t d smething like Respnse.Write. (Let's try it and see... hehehehe...) Thugh the Buttn is a nrmal asp:buttn, it desn't invke a pstback but refreshes the cntents f the Update Panel. Nw, if yu cmment the AsyncPstBackTrigger line and uncmment the PstBackTrigger line, and run the page, yu will ntice that the whle page refreshes upn clicking n the "Refresh" Buttn. This wrks like a nrmal buttn althugh it des update the cntents f the UpdatePanel. Yur results shuld be as fllws Ntice the cmment tags fr the asp/ajax Trigger cntrls are <%-- and --%> <asp:pstbacktrigger CntrlID="Buttn1" /> <%-- <asp:asyncpstbacktrigger CntrlID="Buttn1" EventName="Click" />--%> In nrmal cases yu wuld use AsyncPstBackTrigger since it implies the partial page refresh mechanism. 3

-Ajax Cntrl Tkit Dynamically Cntrlling UpdatePanel Animatins The Animatin cntrl in the ASP.NET AJAX Cntrl Tlkit is nt just a cntrl but a whle framewrk t add animatins t a cntrl.

4 -Ajax Cntrl Tkit Dynamically Cntrlling UpdatePanel Animatins The Animatin cntrl in the ASP.NET AJAX Cntrl Tlkit is nt just a cntrl but a whle framewrk t add animatins t a cntrl. Fr the cntents f an UpdatePanel, a special extender exists that relies heavily n the animatin framewrk: UpdatePanelAnimatin. It can als wrk tgether with UpdatePanel triggers. Overview The Animatin cntrl in the ASP.NET AJAX Cntrl Tlkit is nt just a cntrl but a whle framewrk t add animatins t a cntrl. Fr the cntents f an UpdatePanel, a special extender exists that relies heavily n the animatin framewrk: UpdatePanelAnimatin. It can als wrk tgether with UpdatePanel triggers. Steps The first step is as usual t include the ScriptManager in the page s that the ASP.NET AJAX library is laded and the Cntrl Tlkit can be used: <asp:scriptmanager ID="asm" runat="server" /> Nte- t imprt in the Tlkit, add in a tab in yur tlbx, by right clicking directly n the Standard Tlbar Tab and selecting Add Tab. Call yur tab Ajax Tlkit. Then right click inside the tab and select Chse Items. When the dialg bx appears click brwse t search fr the file called AjaxCntrlTlkit.dll. The snapsht belw shws the navigatin t brwse t. 4

5 After chsing yur dll file click Open and then Okay t clse ut f yur dialg bxes. Yu shuld nw see yur Tab laded with cntrls! The animatin in this scenari will be applied t a display f the current time. This infrmatin can be written int a label using the Page_Lad() methd, r (fr the sake f simplicity) the fllwing inline cde is used: <%= DateTime.Nw.TLngTimeString() %> Als, a buttn t trigger updating the time is created: <asp:buttn ID="Buttn1" runat="server" Text="Update" /> This cde is then put int the <CntentTemplate> sectin f an UpdatePanel element. The panel s UpdateMde attribute must be set t "Cnditinal", since nly triggers may update the panel s cntents. In the <Triggers> sectin f the UpdatePanel, an asynchrnus pstback trigger is created and tied t the Click event f the buttn. Thus, if the user clicks n the buttn, the UpdatePanel is refreshed. Here is the markup fr the UpdatePanel cntrl: <asp:updatepanel ID="UpdatePanel1" runat="server" UpdateMde="Cnditinal"> <CntentTemplate> <%= DateTime.Nw.TLngTimeString() %> </CntentTemplate> <Triggers> <asp:asyncpstbacktrigger CntrlID="Buttn1" EventName="Click" /> </Triggers> </asp:updatepanel> Finally, the UpdatePanelAnimatinExtender must be cnfigured: Set the TargetCntrlID attribute t the ID f the panel, and define an animatin within the extender. Fading in makes sense, which creates a nice visual emphasis n the updated time. Yur extender markup may then lk like this: <ajaxtlkit:updatepanelanimatinextender ID="upae" runat="server" TargetCntrlID="UpdatePanel1"> <Animatins> <OnUpdated> <FadeIn Duratin="1.0" Fps="24" /> </OnUpdated> </Animatins> </ajaxtlkit:updatepanelanimatinextender> Run the file in the brwser. Whenever yu click n the buttn, the current time is shwn in the panel, always fading in fr the duratin f ne secnd. Sample run fllws 5

6 -Lab 2 - MSAccess, Gridview cntrl -Hmewrk 2 (Sme javascript!!) -Due Dates Lab 2 - Mnday Feb. 22, 2010 ( week 06 ) Hmewrk 2- Mnday Feb. 22, 2010 ( week 06 ) 6

Using the Swiftpage Connect List Manager

Using the Swiftpage Connect List Manager Quick Start Guide T: Using the Swiftpage Cnnect List Manager The Swiftpage Cnnect List Manager can be used t imprt yur cntacts, mdify cntact infrmatin, create grups ut f thse cntacts, filter yur cntacts