SynapseIndia dotnet development panel control

Page 1

SynapseIndia Dotnet Development Panel Control

Partial Page Updates

Partial Page Updates

Partial rendering divides the page into independent regions, each of which controls its own postbacks and refreshes without causing or requiring a full page update. This is desirable when only a portion of the page needs to change during a postback. • Partial updates reduce screen flickering and allows to create more interactive Web applications • Partial rendering requires a ScriptManager control in the page. It is essential that the EnablePartialRendering property on the manager be set to true—which is the default case.

Partial– Page UpdatesPanel Control Partial Page Updates Update PanelUpdate Control The UpdatePanel is a container control without any UI of its own. • Defined in the System.Web.Extensions assembly, it belongs specifically to the System.Web.UI namespace. The control class is declared as follows: public class UpdatePanel : Control{ ...} • The control has a number of properties to control page updates and also exposes a clientside object model. •

When a control within the UpdatePanel triggers a postback, the UpdatePanel intervenes to initiate the postback asynchronously and update just that portion of the page.

•

At the time the call to the server is made, the name of a JavaScript callback function that will be called is provided, when the response has been received. That callback function will receive the results and update various page controls accordingly.

Partial– Page UpdatesPanel Control Partial Page Updates Update PanelUpdate Control Partial Page Update is coordinated by the ScriptManager server control and the client PageRequestManager class. When partial-page updates are enabled, controls can asynchronously posted to the server. • With an asynchronous postback, page updates are limited to regions of the page that are enclosed in UpdatePanel controls and that are marked to be updated. • The server sends HTML markup for only the affected elements to the browser. In the browser, the client PageRequestManager class performs Document Object Model (DOM) manipulation to replace existing HTML with updated markup. • The UpdatePanel control sends an out-of-band request for fresh markup and then updates the Document Object Model (DOM) tree when the response is ready.

Partial Page UpdatesUpdateControl Panel Control -Example Partial Page Updates – Update Panel - Example The Example page has two labels and two buttons that can each cause a postback. It simply updates the two labels with the current server time. Button1 and its label are placed inside an UpdatePanel. Actually, they are put in the ContentTemplate of the UpdatePanel.. The other label and button are left outside the UpdatePanel <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server" language="C#" > protected override void OnLoad(EventArgs e) { base.OnLoad(e); string theTime = DateTime.Now.ToLongTimeString(); for (int i = 0; i < 3; i++) { theTime += "<br />" + theTime; } time1.Text = theTime; time2.Text = theTime; } </script>

Partial– Page UpdatesPanel Control Partial Page Updates Update PanelUpdate Control <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>Basic Update Panel</title> </head> <body> <form id="form1" runat="server"> <div>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <asp:Label runat="server" ID="time1"></asp:Label><br /><br /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div style="border-style:solid;background-color:gray;"> <asp:Label runat="server" ID="time2"></asp:Label><br /> <asp:Button ID="Button1" runat="server" Text="Inside Button" /> </div><br /> </ContentTemplate> </asp:UpdatePanel> <asp:Button ID="Button2" runat="server" Text="Outside Button" />

</div> </form> </body> </html>

Partial– Page UpdatesPanel Control Partial Page Updates Update PanelUpdate Control In the code-behind, both labels are assigned the same time string in the same way. When the page is first requested, the two labels show the same time When the Outside Button is clicked, a postback occurs and the time is updated for both of the labels. When the button inside the UpdatePanel is clicked, an asynchronous postback occurs and only the label inside the UpdatePanel is updated

Page–UpdatesHowPanel UpdateControl Panel Control is refreshed? Partial PagePartial Updates How Update is refreshed?

The property settings of the UpdatePanel control determine when a panel's content is updated during partial-page rendering. If the UpdateMode property is set to Always, the UpdatePanel control’s content is updated on every postback that originates from anywhere on the page. This includes asynchronous postbacks from controls that are inside other UpdatePanel controls, and postbacks from controls that are not inside UpdatePanel controls.

Page–UpdatesHowPanel UpdateControl Panel Control is refreshed? Partial PagePartial Updates How Update is refreshed? If the UpdateMode property is set to Conditional, the UpdatePanel control’s content is updated when one of the following is true: •

When the postback is caused by a trigger for that UpdatePanel control.

•

When the UpdatePanel control's Update() method is called explicitly.

•

When the UpdatePanel control is nested inside another UpdatePanel control and the parent panel is updated.

•

When the ChildrenAsTriggers property is set to true and any child control of the UpdatePanel control causes a postback. Child controls of nested UpdatePanel controls do not cause an update to the outer UpdatePanel control unless they are explicitly defined as triggers for the parent panel.

If the ChildrenAsTriggers property is set to false and the UpdateMode property is set to Always, an exception is thrown. The ChildrenAsTriggers property is intended to be used only when the UpdateMode property is set to Conditional.

Partial Page –UpdatesUpdate Panel Control –Triggering Updates Partial Page Updates Update Panel Control – Triggering Updates By default, any postback control inside an UpdatePanel control causes an asynchronous postback and refreshes the panel's content. A trigger is a binding that specifies which postback control and event cause a panel to update. When the specified event of the trigger control is raised (for example, a button's Click event), the update panel is refreshed. A trigger's control event is optional. If an event is not specified, the trigger event is the default event of the control. For example, for the Button control, the default event is the Click event. The trigger is defined by using the <asp:AsyncPostBackTrigger> element inside the <Triggers> element of the UpdatePanel control.

Partial Page –UpdatesUpdate Panel Control –Triggering Updates Partial Page Updates Update Panel Control – Triggering Updates

UpdatePanels can be nested inside one another. When the outer UpdatePanel is refreshed, the inner UpdatePanel will also be refreshed. when the inner UpdatePanel is updated, the outer UpdatePanel is not affected. Even when the outer UpdatePanel has ChildrenAsTriggers set to true, an asynchronous update of the inner UpdatePanel will not cause the outer UpdatePanel to be refreshed. To have controls in a contained UpdatePanel cause a refresh, they have to be set explicitly as triggers on the outer UpdatePanel.

PartialUpdates Page UpdatesControl –Triggering Updates Example Partial Page –UpdateUpdate PanelPanel Control – Triggering Updates - Example <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Refreshing Update Panel through triggers</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Button ID="Button1" Text="Refresh Panel" runat="server" /> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" /> </Triggers> <ContentTemplate> <fieldset> <legend>UpdatePanel content</legend> <%=DateTime.Now.ToString() %> </fieldset> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body> </html>

Partial Page–UpdatesUpdate Panel Control with User Controls Partial Page Updates Update Panel Control with User Controls

The ScriptManager control will manage partial-page updates for UpdatePanel controls that are directly on the ASP.NET Web page or inside a user control on the page. The user controls inside an update panel will be refreshed when the contents of the update panel are updated. It is valid to put an UpdatePanel control inside a user control so that the user control supports partial-page updates. However, in that case, page developers who add the user control to a page must explicitly add a ScriptManager control in the host Web page.

Partial Page–UpdatesUpdate Panel Control with User Controls Partial Page Updates Update Panel Control with User Controls Create a UserControl named WebUserControl.ascx which performs temperature conversion from Celsuis to Fahrenheit. •

Drag and drop a UpdatePanel Control and place the textbox and button controls inside it

•

protected void ConvertButton_Click(obj ect sender, EventArgs e) { double a = 1.8 *

Add a button event handler to perform the temperature conversion

Create a Web Page ‘UpdateUserControl.aspx’ •

Place a ScriptManager Control in the page.

•

Drap and drop the user control into it.

•

Run the Page.

double.Parse(CelText.Te xt) + 32; FahText.Text = a.ToString(); }

Partial Page UpdatesThe Partial Page Update Life Cycle Partial Page Updates –The Partial Page Update Life Cycle The page execution Lifecycle is not altered by the partial rendering feature. The ScriptManager participates in the lifecycle to facilitate the partial page updates. It coordinates gathering the renderings from the UpdatePanels that need to be refreshed during an asynchronous post and carrying the hidden fields necessary to make the following post function correctly. Controls that modify the ViewState, even if they are not in the UpdatePanel being affected, do not have to take any special action to ensure the change is available in subsequent requests. Event validation, cross page posting, and ASP.NET’s ability to maintain the scroll position all continue to work when using the UpdatePanel.

Partial Page UpdatesThePanel UpdateCautions Panel Caution Complexities Partial Page Updates –The Update andand Complexities Complex controls that make heavy use of dynamically registered script won’t work correctly until they are updated to switch from using the ClientScriptManager of ASP.NET 2.0 to using the ScriptManager included with ASP.NET AJAX. The ASP.NET Menu and TreeView controls are not fully compatible with the UpdatePanel in the 1.0 release. The validation controls also register script in a way that is incompatible with the UpdatePanel. (Disable the client script for the validator controls and then use them in an UpdatePanel) Web Parts

Partial Page UpdatesThePanel UpdateCautions Panel Caution Complexities Partial Page Updates –The Update andand Complexities The GridView and DetailsView controls already have a feature for using client callbacks to paging and sorting. It is not enabled by default, but if the feature is enabled, these controls cannot be used inside an UpdatePanel. The FileUpload control also can’t submit files as part of an asynchronous postback The asp:substitution control The way the ScriptManager extracts the contents needed for the partial page updates in the 1.0 release, calling Response.Write during the execution of an asynchronous postback will result in an error Login, PasswordRecovery, ChangePassword, and CreateUserWizard controls whose contents have not been converted to editable templates.

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.