MSDN Magzine - ScriptManager Control in AJAX

Sub: Extensive use of ScriptManager control

There are many interesting scenarios where your expectations will fail when we AJAXify our pages, leaving you with a mess on your hands. In this post, we’ll see extensive use of: the ScriptManager control.

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.

RegisterAsyncPostBackControl - Programmatically adding Triggers

When a button is not present in Update Panel, you can programmatically identify triggers and cause an UpdatePanel control to refresh in the server code of your page.

protected void Page_Load()

{

ScriptManager1.RegisterAsyncPostBackControl(Button1);

}

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

</asp:ScriptManager>

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

<ContentTemplate>

<%= DateTime.Now.ToString() %>

</ContentTemplate>

</asp:UpdatePanel>

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

protected void Button1_Click(object sender, EventArgs e)

{

UpdatePanel1.Update();

}

RegisterPostBackControl- Forcing Full Post Back

You could also make an element inside an UpdatePanel cause the whole page to refresh—a full postback. To do so, you just use a different method on the ScriptManager called RegisterPostBackControl.

protected void Page_Load()

{

ScriptManager1.RegisterPostBackControl (Button1);

}

RegisterDataItem: Refresh controls or data outside an UpdatePanel

ScriptManager's RegisterDataItem method makes it easy to refresh controls or data outside an UpdatePanel. RegisterDataItem allows extra data of your choosing to be sent down to the client when an UpdatePanel control posts back; the data can be consumed by script you write on the client.

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{

ScriptManager1.RegisterDataItem(TextBox1, Calendar1.SelectedDate.ToShortDateString());

}

In this example, I want to update the Textbox with whatever value has been clicked in the Calendar control.

Along with the above code, below JS code is also required.

<script language="javascript" type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
//prm.add_endRequest(EndRequest);
prm.add_pageLoading(PageLoadingHandler);

function PageLoadingHandler(sender,args)
{
var dataItems = args.get_dataItems();
if($get('TextBox1')!==null)
{
$get('TextBox1').value = dataItems['TextBox1'];
}

return;
}

function EndRequest(sender, args)
{
alert('Done');
}

if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();
</script>

Note: Copy-Paste of code may not work properly. Please do consider them just as a close reference to your need. In case of any doubts feel free to call me.

Regards,

Arun Manglick