Handle ClientSide onLoad in AJAX

Hi,

See my earliar post on the same.

We oftenly handle the onLoad event in JS. But the moment we include AJAX (Script Manager) in our pages, the onLoad event fires only for the first time and then never. In such cases, we’ll end up with problems. For. E.g Hiding Label on Client load, will fail after the first load event .

To handle this, need is to introduce the load handler in AJAX, rather than the regular one. Here is the code.

<asp:ScriptManager ID="scmObjectAssignment" runat="server">

</asp:ScriptManager>

<script language="javascript" type="text/javascript">

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_pageLoaded(pageLoaded);

function pageLoaded(sender, args)

{

var element = window.document.getElementById('lblName');

if(element != null)

{

lblName.style.Display = ‘none’;

}

}

</script>

Thanks & Regards,

Arun Manglick || Senior Tech

Few facts about UpdateProgress control.

Few facts about UpdateProgress control

· UpdateProgress controls can be either inside or outside other UpdatePanel controls.

· For initial page rendering and for synchronous postbacks, the UpdateProgress control is not displayed. [M. Imp]

· If the ChildrenAsTriggers property of a UpdatePanel control is set to false and an asynchronous postback originates from inside that UpdatePanel control, any associated UpdateProgress controls will still be displayed.

In following situations, you may face that the UpdateProgress control does not display automatically:

· When the UpdateProgress control is associated with a specific update panel using ‘AssociatedUpdatePanelID’ property, and the asynchronous postback results from a control that is not inside that update panel instead postback results from a control that is inside a Trigger.

· When the UpdateProgress control is not associated with any UpdatePanel control, and the asynchronous postback does not result from a control that is not inside an UpdatePanel and is not a trigger. For example, the update is performed in code.

Thanks & Regards,

Arun Manglick || Tech Lead

How AJAX Postback differs from Regular Postback

To see what makes the rendering stage different for an AJAX postback, take a close lookbelow:

§ A partial rendering request is often referred to as an AJAX postback.

§ An AJAX postback is like a classic ASP.NET postback, except that it is carried out by a piece of script code defined in the client-side ASP.NET AJAX library.

§ Although dressed like a pure AJAX remote call, an AJAX postback, once on the server, the request goes through the same typical lifecycle of postback requests and raises such events as Init, Load, and PreRender.

§ Difference is only in the algorithm it uses to render the final markup. The different algorithm is key to the improved performance and absence of page flickering. However, the application model remains the same as in ASP.NET.

§ Basically the modified rendering process / algorithm for an AJAX postback loops through all updatable panels in the page that are involved with the postback and accumulates the markup of each.

§ All markup chunks, along with hidden fields and any error information, are packed into a response stream and passed to the client.

Now let's dissect a typical partial rendering call in the context of a sample page.

Whenever a page is requested, system detects that an whether its an AJAX postback is occurring. The ScriptManager control checks an HTTP header in the request to determine whether the request is an AJAX postback. The HTTP header is set before triggering the AJAX request by the MicrosoftAjaxWebForms.js file.

Once identified that it's a AJAX PostBack below code fires from the System.Web.Extensions assembly:

protected override void OnPreRender(EventArgs e)

{

base.OnPreRender(e);

if (IsInAsyncPostBack)

PageRequestManager.OnPreRender();

}

The OnPreRender method on the PageRequestManager class does the following:

internal void OnPreRender()

{

_owner.SetRenderMethodDelegate(

new RenderMethod(this.RenderPageCallback));

}

In the preceding code snippet, the method is invoked on the current page and ends up overriding the whole rendering process for the current request.

The actual code responsible for the markup of an AJAX postback is therefore defined in the RenderPageCallback method—an internal method in the PageRequestManager class.

This modified rendering process for an AJAX postback loops through all updatable panels in the page that are involved with the postback and accumulates the markup of each as shown below. All markup chunks, along with hidden fields and any error information, are packed into a response stream and passed to the client.

Whenever the script manager detects one or more UpdatePanel controls in the page, it emits the block of script as in the following

<script type="text/javascript">

Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));

Sys.WebForms.PageRequestManager.getInstance()._updateControls( ['tUpdatePanel1','tUpdatePanel2'], [], [], 90);

</script>

Hence this way only the piece of code contained in various update panels is updated and not the complete page.

Thanks & Regards,

Arun Manglick || Tech Lead

Learnings - File uploads does not work during async postbacks

Hi,

http://weblogs.asp.net/leftslipper/archive/2007/03/30/why-don-t-file-uploads-work-during-async-postbacks.aspx

File uploads do not work when doing an async postback. To my knowledge there's no way to support this scenario due to the browser's security restrictions.

Reason - understand how async postbacks are different than a regular postback.

When the browser performs a Regular Postback it has the benefit of being actual code with no security restrictions running on the client computer. When you submit a form it creates a web request with all the form fields. When it encounters an <input type="file"> it examines the file the user chose, reads it from disk, and adds it to the web request.

When the AJAX JavaScript code is running in the browser i.e when Async Postbacks occurs it can do the first part about creating a request with all the form fields. However, when it gets to <input type="file"> fields it doesn't have the necessary security permissions to read those files from disk.

Workaround -

· Have a dedicated "Upload" button that does a regular postback instead of an async postback. You can achieve this using several techniques:

o Have the button be outside all UpdatePanels;

o Have the button be the target of an UpdatePanel's PostBackTrigger; or

<Triggers>

<asp:PostBackTrigger ControlID="UploadButton" />

</Triggers>

o Call ScriptManager.RegisterPostBackControl(<Button Control>) on it during page load.

if (!IsPostBack)

{

ScriptManager1.RegisterPostBackControl(UploadButton);

}

· Have a dedicated file upload page that doesn't have any UpdatePanels. Many web sites already do this anyway.

Thanks & Regards,

Arun Manglick || Tech Lead

Learnings from ValidatorCalloutExtender in AJAX

Using the ValidatorCalloutExtender is quite a truicky thing. Take care of below notes while using them.

· By default, when the validator trigger, the error message is shown at two places – One is in Extender and other one is in Default Validator.

o To avoid this make use of ‘*’

· By default, when the validation trigger fies at button click, the error message is shown only for the first extender. For the rest of the things, the message is shown when the focus is arrived to the particlar control.

o To avoid this use ‘SetFocusOnError’ property.

· The extender must be placed in the same Update Panel where the validator is placed.

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

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

<ContentTemplate>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="TextBox1"

SetFocusOnError="true">*</asp:RequiredFieldValidator>

<asp:TextBox ID="TextBox2" runat="server" TabIndex="1"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2"

ErrorMessage="RequiredFieldValidator" SetFocusOnError="true">*</asp:RequiredFieldValidator>

<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

<ajaxtoolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RequiredFieldValidator2" />

<ajaxtoolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" TargetControlID="RequiredFieldValidator1" />

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

· One more important thing: Update Panel is not necessary to use the Validator Callout Extender. i.e It can be used without them as below:

o All we requite is the use of ‘ScriptManager’ control.

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"

ErrorMessage="RequiredFieldValidator" SetFocusOnError="true">*</asp:RequiredFieldValidator>

<ajaxtoolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" TargetControlID="RequiredFieldValidator1" />

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

</div>

</form>

Thanks & Regards,

Arun Manglick || Tech Lead

Learnings from ValidatorCalloutExtender in AJAX

Using the ValidatorCalloutExtender is quite a truicky thing. Take care of below notes while using them.

· By default, when the validator trigger, the error message is shown at two places – One is in Extender and other one is in Default Validator.

o To avoid this make use of ‘*’

· By default, when the validation trigger fies at button click, the error message is shown only for the first extender. For the rest of the things, the message is shown when the focus is arrived to the particlar control.

o To avoid this use ‘SetFocusOnError’ property.

· The extender must be placed in the same Update Panel where the validator is placed.

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

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

<ContentTemplate>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="TextBox1"

SetFocusOnError="true">*</asp:RequiredFieldValidator>

<asp:TextBox ID="TextBox2" runat="server" TabIndex="1"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2"

ErrorMessage="RequiredFieldValidator" SetFocusOnError="true">*</asp:RequiredFieldValidator>

<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

<ajaxtoolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RequiredFieldValidator2" />

<ajaxtoolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" TargetControlID="RequiredFieldValidator1" />

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

Thanks & Regards,

Arun Manglick || Tech Lead

ScriptManager - RegisterStartupScript

RegisterStartupScript:

In days of old you would have added script to the page as a result of a full postback such as this:

protected void Button1_Click(object sender, EventArgs e)

{

Page.ClientScript.RegisterStartupScript(this.GetType(),"myscript","alert('hello world!');"); // or below

Page.RegisterStartupScript("CallClient", callClientScript);

}

But this new method can break under ASP.NET AJAX. Why? Because ClientScriptManager is not a control that understands partial postbacks and partial rendering, and so script code registered with it will not be included in the page response for a partial postback.

Instead, if you wanted the button to introduce client script into the page output, you would leverage the ScriptManager:

protected void Button1_Click(object sender, EventArgs e)

{

ScriptManager.RegisterStartupScript(this,this.GetType(),"myscript","alert('hello world!');",true);

}

The result is the same, but the method is slightly different. In fact, the methods of the ClientScriptManager control are now included in the ScriptManager control as static methods (RegisterStartupScript, for example). Whenever you are utilizing ASP.NET AJAX and want to work with script through partial postbacks, you must now use methods exposed by the ScriptManager control instead.

Thanks & Regards,

Arun Manglick || Tech Lead