One of the things one needs to take care of when converting an existing application to use MS AJAX is inline script blocks inside pages or user controls. Problem with these is that if the control is sent to the client as a result of a partial page update (e.g. AJAX call) the inline script block simply won’t execute at all.
The problem is caused by the way MS AJAX and browsers work.
When an UpdatePanel is to replace its old content with newly received AJAX content, it deletes the old content and then uses innerHTML to inject the new content. However, script blocks contained in the AJAX response do not get executed when added to the page with innerHTML. One way to get things working is to execute them using them with the eval() method. Another way is to manually construct a script object and add it to the head of the page. Either way, to get things working one needs to parse the AJAX response stream for script tags, extract their contents and force the browser to parse the scripts.
One way to workaround the problem is to take the approach of RadScriptBlock which comes with Telerik RadControls. What it does essentially is register its content (which is supposed to be a script tag) with the script manager, e.g.:
| <telerik:MyScriptBlock runat="server"> |
| |
| <script type="text/javascript"> |
| |
| alert("I can run with AJAX"); |
| |
| </script> |
| |
| </telerik:MyScriptBlock> |
And here is a possible implementation of such a control:
| public class MyScriptBlock : Control { |
| |
| protected override void Render(HtmlTextWriter writer) |
| { |
| ScriptManager sm = ScriptManager.GetCurrent(Page); |
| StringBuilder sb = new StringBuilder(); |
| base.Render(new HtmlTextWriter(new StringWriter(sb))); |
| string script = sb.ToString(); |
| ScriptManager.RegisterStartupScript(this, typeof(InlineScript), UniqueID, script, false); |
| |
| } |
| } |
While this approach is simple and works real well, it still requires changing your existing controls - and wrapping their script tags. Yet, could there be a way to avoid any changes to all those tens or hundreds of .ascx-es that you already have in the application you are trying to AJAXify? In fact there is - and the approach is somewhat similar to what RadAjax does. A simple script added to the main page can take care of this. By using this script, absolutely no changes are required to the original source code of your pages and user controls that use scripts tags and are loaded through AJAX.
The example features a user control with inline script. There three scenarios demonstrated – a simple postback (as the base case), MS AJAX load (not working OK), and the properly working solution using the above-mentioned script.
What the script does is getting the response text of the AJAX request and extracting the script blocks’ content from it. After that a script element is dynamically created by using the document.createElement(“script”) method, the extracted script content is assigned to it and the new generated script block is added to the DOM.
Attached to this post is a fully functional demo.
.
UserControlWithScriptAndAjax (1)