SynapseIndia Dotnet Development Panel Control

SynapseIndia Dotnet
Development Panel Control
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 truewhich is the default case.
Partial
UpdatesPanel Control
Page
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
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
Update
Panel
- -Example
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
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
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
PageUpdatesHowPanel
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 controls 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.
PageUpdatesHowPanel
UpdateControl
Panel Control
is refreshed?
Partial PagePartial
Updates
How Update
is refreshed?
If the UpdateMode property is set to Conditional, the UpdatePanel controls 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>
PageUpdatesUpdate
Panel Control
with User
Controls
Partial PagePartial
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.
PageUpdatesUpdate
Panel Control
with User
Controls
Partial PagePartial
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.Tex
t) + 32;
FahText.Text =
a.ToString();
}
Partial Page
UpdatesThe Partial
Page
Update
Life Cycle
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.NETs ability to maintain the
scroll position all continue to work when using the UpdatePanel.
Partial
Page UpdatesThe Panel
UpdateCautions
Panel Caution
Complexities
Partial Page
Updates
The Update
andand
Complexities
Complex controls that make heavy use of dynamically registered script
wont 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 UpdatesThe Panel
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 cant 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.

SynapseIndia Dotnet Development Panel Control

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SynapseIndia Dotnet Development Panel Control

Uploaded by

Copyright:

Available Formats

SynapseIndia Dotnet

Development Panel Control

Partial Page Updates

Partial Page Updates

Partial rendering divides the page into independent regions, each

more interactive Web applications

manager be set to truewhich is the default case.

When the page is first requested, the

asynchronous postback occurs and

The property settings of the UpdatePanel control determine

are inside other UpdatePanel controls, and postbacks

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

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

to be used only when the UpdateMode property is set to Conditional.

A trigger's control event is optional. If an event is not specified, the trigger

The trigger is defined by using the <asp:AsyncPostBackTrigger> element

UpdatePanels can be nested inside one another. When the outer

ChildrenAsTriggers set to true, an asynchronous update of the

To have controls in a contained UpdatePanel cause a refresh, they

The ScriptManager control will manage partial-page updates for

It is valid to put an UpdatePanel control inside a user control so

page must explicitly add a ScriptManager control in the host

Drag and drop a UpdatePanel Control and

Add a button event handler to perform the

Create a Web Page UpdateUserControl.aspx

Place a ScriptManager Control in the page.

Drap and drop the user control into it.

Run the Page.

included with ASP.NET AJAX.

The validation controls also register script in a way that is incompatible

You might also like