Create and Register Client Script

There are three ways of defining a client script on an ASP.NET Web page:

  • Define a script block on your page
  • Use the ClientScriptManager class to dynamically add JavaScript at run time
  • Use the ScriptManager server control to register JavaScript

Now let’s look deeper into the details. The first method of defining scripts is the traditional method. It has nothing to do with ASP.NET, so you can embed your scripts like this into simple HTML pages or PHP as well. You should add a script tag anywhere on your page (the head section is the most preferred) and define your JavaScript there, like this:

<script type=”text/javascript”>

    function myFunc() {

        //do something

    }

</script>

For better reusability you should wrap up all your JavaScript code which isn’t page-specific into a .js file, and include it as follows:

<script  src=”myScriptFile.js”/>

It’s that simple! The second method, using the ClientScriptManager class is a bit more complicated. Every ASP.NET page exposes one instance of the ClientScriptManager class within its ClientScript property, and there are four methods for registering custom scripts to that page:

  • RegisterClientScriptBlock: you set up the script as a string, and then pass it to this method, which then adds it to the top of the page.
  • RegisterClientScriptInclude: this is very similar to the previous method, the difference is that this one adds a script reference to a .js file specified in the second string parameter.
  • RegisterStartupScirpt: adds a script to the page, which executes after the page finishes loading, but before the onload event of the page.
  • RegisterOnSubmitStatement: adds a script that executes on the onsubmit event. This gives you an opportunity to cancel the given submit.

Now an example:

 

This one adds the myFunc  function to the page as the result of a page load event.

There’s one method left to add custom scripts to a page, and this one is the ScriptManager control. You have the opportunity to add a script declaratively, but when more flexibility is needed, you can also add script references programmatically.

To declaratively add a script reference, use the following syntax:

<asp:ScriptManager runat=”server”>

    <Scripts>

        <asp:ScriptReference Name=”AddScript.js”/>

    </Scripts>

</ScriptManager>

There are four properties of the ScriptReference class in which we are particularly interested, namely:

  • Name: there are two cases when you should set the name.
    •  The first is when you are sure that your page is in the same directory as the .js file you want to reference on. In this case, you set it to the file name and the .js extension. For example: MyFunc.js.
    •  The second case is when your script file is embedded in an assembly. Then you should set the name property to the embedded .js file. The proper syntax is DefaultNamespace.JScriptFileName.js.
  • Assembly: you will use this property if your .js file is embedded in a compiled assembly. Simply set it to the assembly name, without any extensions.
  • Path: a relative path of the script object. When used together with the Name property, Path will take precedence.
  • ScriptMode: set to indicate which version of the script should be used (Release/Debug).

To add a ScriptReference class programmatically to your ScriptManager, you’d create an instance of it, set the properties above, and add the instance to the Scripts property of the ScriptManager.

Finally the topic of embedding JavaScript files as a resource into an assembly should be discussed. There are multiple scenarios in which you’d like to do so (for example, when you’re creating an extender, or an AJAX enabled server control). Doing so is rather easy. You define a JavaScript file within your custom control project. Then you set its Build Action to embedded resource. Finally, you need to add an entry to the AssemblyInfo of the project. It should look like this:

[assembly:System.Web.UI.WebResource(“DefaultNameSpace.JScriptFileName.js”, “application/x-javascript]

Then build the project, and you are ready.

Further Readings

Add Client Script Dynamically to ASP.NET Web Pages

Embedding a JavaScript File as a Resource in an Assembly

Advertisements

Tags: , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: