Differences between ScriptManager and ClientScript when used to execute JS?

Question

Can somebody explain for me what the differences are between ScriptManager and ClientScript?

ClientScript works well when I use it in Button_Clicked event, but it doesn't work when I use it in the GridView_RowUpdated of a GridView. (The GirdView is wrapped inside an update panel). Then I tried ClientScript and it worked perfectly in this case.

Answer 1

You've pretty much identified the primary difference. The ScriptManager is meant to be used with async postbacks, which is why it works with the UpdatePanel. The ClientScript class is for synchronous postbacks. So, if you're going to be posting back from an UpdatePanel, be sure to use the ScriptManager instead of ClientScript.

ScriptManager

Answer 2

_{9 years after this question was asked, I'm finding myself doing some software archeology and I'm writing up my own notes about ASP.NET's idioms, hence this answer, which I hope actually answers the question, as I felt ShellyFM's answer was incorrect, as this statement: "ClientScript class is for synchronous postbacks" is untrue)}

---

ClientScriptManager

• The Page.ClientScript property exposes an instance of ClientScriptManager.

  • Each Page instance has its own single instance of ClientScriptManager.
  • ClientScriptManager stores a list of <script> elements. These <script> elements are automatically rendered inside the <asp:form runat="server"> element, located immediately after where ViewState controls are rendered in <div class="aspNetHidden">.

• These <script> elements can be registered using different methods:

  1. RegisterClientScriptBlock
  2. RegisterClientScriptInclude
  3. RegisterClientScriptResource
  • For example:

    • RegisterClientScriptBlock adds an inline script directly to the page.

      // Page code:
      this.ClientScript.RegisterClientScriptBlock( type: typeof(TestPage), key: " Script1", script: "function foo(){}", addScriptTags: true );
      

      // *.aspx code:
      <form id="form1" runat="server">
      </form>
      

      // Rendered result:
      <form method="post" action="./TestPage.aspx" id="form1">
      <div class="aspNetHidden"><!-- ViewState is rendered here --></div>
      <script type="text/javascript">function foo(){}</script>
      </form>
      

    • RegisterClientScriptInclude will add a <script src=""></script> element without any inline script:

    • RegisterClientScriptResource will add a <script> that gets its content from an <EmbeddedResource> from a .NET Assembly's GetManifestResourceStream. The script is referenced using src="/WebResource.axd?d=..." instead of being rendered inline.

      • The /WebResource.axd file doesn't exist in your filesystem. It's a reserved URL pattern that ASP.NET handles by itself by-default.
  • The Page.BeginFormRender method directly calls ClientScriptManager.RenderClientScriptBlocks() and passes it the HtmlTextWriter, so ClientScriptManager is not a WebControl.

• Somewhat surprisingly, ClientScriptManager does not offer a way to remove or un-register a script - nor can you enumerate existing registrations: you can only replace an existing registration - and only if you know the String key that was used to register it in the first place.

ScriptManager

• The ScriptManager class was added in ASP.NET AJAX which was an extension to ASP.NET 2.0 released in 2007.

  • It was built-in to ASP.NET in ASP.NET 4.0 in 2010 (instead of being an extension).
  • It lives in System.Web.Extensions.dll (in both ASP.NET 2.0 and 4.0), while ClientScriptManager lives in System.Web.dll, which indicates it's more central and integral to ASP.NET than ScriptManager.
  • ScriptManager itself is a WebControl (it derives from System.Web.UI.Control) so it's responsible for rendering HTML directly via its .Render() method, whereas ClientScriptManager was invoked directly by Page's BeginFormRender.

• The ScriptManager does not have any instance methods for registering <script> elements to render to the page.

  • It does have static methods for registering scripts to a Page instance, but all it does is call into Page.ClientScript.RegisterClientScriptBlock, Page.ClientScript.RegisterClientScriptInclude, or Page.ClientScript.RegisterClientScriptResource.

• The <asp:ScriptManager> control must be placed inside your <asp:Form> and must be placed before any other WebControls that depend on ScriptManager-registered scripts. You also cannot have more than 1 <asp:ScriptManager> control on a page.

• So if ScriptManager simply wraps ClientScriptManager, what does it actually do itself?

  • Well, unlike ClientScriptManager, the ScriptManager does let you remove a script registration and get a list of current registrations.
    • ...provided those scripts were registered with ScriptManger and not ClientScriptManager and that you removed the offending script before ScriptManager.RegisterScripts() is called (which happens inside Page's PreRender event btw).
  • Additionally, ScriptManager handles the automatic creation of JavaScript code for ASMX and WCF client proxies and renders those as registered scripts too.
    • This is what the <asp:ScriptManager><Services> collection is for. For each <asp:ServiceReference /> child element it will generate a <script> containing functions that wrap XMLHttpRequest calls to each [WebMethod] method.
      • [WebMethod] methods exist in .asmx classes, though your WebService subclass also needs [ScriptService] applied.
      • [WebMethod] can also be static methods on your Page subclass, though you need to set EnablePageMethods="true" to use those.

TL;DR:

• ClientScriptManager is integral to ASP.NET WebForms and renders pre-registered <script> elements inside your <form>.
• ScriptManager is an optional extension to ASP.NET WebForms (as a part of ASP.NET AJAX) and essentially extends ClientScriptManager to allow for removing registrations and also generates JavaScript to make it easier to call [WebMethod] methods defined in .asmx WebService or a "Page method" (which is a static method on a Page subclass, also with [WebMethod]).