[Translation] using JavaScript-Part 1 efficiently in ASP. NET 2.0

Published: 17 Sep 2008
By Satheesh Babu

Summary

. NET Framework 2.0 introduces many new features, so that JavaScript can be easily used in ASP. NET pages. The ClientScriptManager class in the Framework has many new methods to help developers efficiently use these features. In the first part of this series, Satheesh explains the common scenarios common heavy load methods frequently used by the ClientScriptManager class ). He first outlined the ClientScriptManager class, and then combined with the relevant source code, illustrations, usage instructions to explore its three methods: RegisterClientScriptBlock, RegisterStartupScript, and RegisterOnSubmitStatement.

Document directory
Introduction
ClientScriptManager class
RegisterClientScriptBlock () method
RegisterStartupScript () method
RegisterOnSubmitStatement () method
Conclusion

Introduction
[Back to Top]

JavaScript is a powerful (versatile) scripting language used in Web applications. Although we can do everything on the server side in C # language, we still prefer JavaScript for some tasks, such as verification. In ASP. NET 1.x, the. Net Framework does not support the dynamic combination of (hook) JavaScript Functions on ASP. NET pages. This drawback is solved in the release of ASP. NET 2.0. It provides many features for developers to dynamically embed JavaScript script blocks using the ClientScriptManager class. I will divide this article into two parts. Part 1 introduces three different methods of the ClientScriptManager class in combination with the example, and Part 2 will use some ASP. NET JavaScript skills to explore the remaining methods.

ClientScriptManager class
[Back to Top]

We usually add JavaScript Functions to the page with the <Script> tag. In some cases, we need to dynamically add scripts from the codebehind class. In. NET Framework 1.x, no library class can help us effectively handle this situation. This disadvantage is solved by a new class ClientScriptManager introduced by. NET Framework 2.0. This class can be used to manage and add script blocks to the asp.net page from the codebehind class.

Things we shoshould know about ClientScriptManager Class

What we should know about the ClientScriptManager class

ClientScriptManager class
 
The ClientScript attribute of the Page object is an instance of the ClientScriptManager class, through which we can dynamically add scripts to the HTML output.

This class uses the keyword key and type to uniquely identify the script. scripts with the same keyword and type are considered as repeated (duplicates). The same script should be avoided. In this way, we can avoid confusion when adding scripts to the user control. For example, the IsClientScriptBlockRegistered () method can be used to detect that the script is registered repeatedly by RegisterClientScriptBlock.

ClientScriptManager class has a series of useful methods that can be used to inject JavaScript functions into HTML output. We can choose these methods to solve our needs as needed.

This article will discuss the usage of the following three methods:
1. RegisterClientScriptBlock () method
2. RegisterStartupScript () method
3. RegisterOnSubmitStatement () method

RegisterClientScriptBlock () method
[Back to Top]

. Page. registerStartUpScript () and Page. the RegisterClientScriptBlock () method has been discarded. These two methods have been encapsulated in the ClientScriptManager class. The RegisterClientScriptBlock () method allows you to insert Javascript Functions to the top of the page, run when you access this page for the first time (when the browser loads the page ). The ClientScriptManager class also has an IsClientScriptBlockRegistered () method. When the script block has been registered with the same key, true is returned. In this way, we can prevent repeated script registration.

This method has two reloads.

Listing 1-RegisterClientScriptBlock Overloads

ClientScriptManager. RegisterClientScriptBlock (Type typeofscript, String key,
String script)
ClientScriptManager. RegisterClientScriptBlock (Type typeofscript, String key,
String script, Boolean addScriptTags)

Place the following code in page load or button click and execute it when the page is loaded or subsequently postback.

Listing 2-1st overload

ClientScriptManager script = Page. ClientScript;
If (! Script. IsClientScriptBlockRegistered (this. GetType (), "Alert "))
{
Script. RegisterClientScriptBlock (this. GetType (), "Alert ",
"<Script type = text/javascript> alert ('Hi') </script> ");
}

Listing 3-2nd overload

ClientScriptManager script = Page. ClientScript;
If (! Script. IsClientScriptBlockRegistered (this. GetType (), "Alert "))
{
Script. RegisterClientScriptBlock (this. GetType (), "Alert", "alert ('Hi')", true );
}

Figure 1-RegisterClientScriptBlock Output

As I mentioned earlier, scripts in these methods are executed during page loading, so we can see the alert pop-up box before the control is actually rendered.

RegisterStartupScript () method
[Back to Top]

In this section, let's take a look at the RegisterStartupScript () method of the ClientScriptManager class. Both the RegisterStartupScript () method and the RegisterClientScriptBlock () method inject Jscript code and execute it in the subsequent postback. However, the actual difference is that the latter (the original is former, and it is suspected that there is an error) will inject the script before the control after the form start tag, while RegisterStartupScript () the method will inject the script before the form ends the label after the control. This means that the script injected using the RegisterClientScriptBlock () method cannot access the page control. However, you can use the RegisterStartupScript () method.

The following tag (Listing 4 and 5) shows the html input block after ASP. NET executes the RegisterClientScriptBlock () and RegisterStartupScript () methods.

Listing 4-RegisterClientScriptBlock Output

<Form name = "form1" method = "post" action = "Default. aspx" id = "form1">
<Div>
<Input type = "hidden" name = "_ VIEWSTATE" id = "_ VIEWSTATE"
Value = "/wEPDwUJMjgzMDgzOTgzZGQfI8LfDKmcT0TXZj8jwrxqI6TOIA ="/>
</Div>
<Script type = text/javascript> alert ('Hi') </script>

From the preceding HTML code segment, we can see that the script is embedded before the page control, and after the form start label.

Listing 5-RegisterStartupScript Output

<Script type = "text/javascript">
<! --
Alert (document. getElementById ('txtname'). value) // -->
</Script>
</Form>
</Body>

From the preceding HTML code segment (Listing 5), we can see that the script block is embedded into the page control, and before the form ends the label, as I mentioned earlier, the script can access the page control.

Heavy Load

This method has two reloads.

Listing 6-RegisterClientScriptBlock Overloads

ClientScriptManager. RegisterClientScriptBlock (Type typeofscript, String key,
String script)
ClientScriptManager. RegisterClientScriptBlock (Type typeofscript, String key,
String script, Boolean addScriptTags)

Usage

Put the following code in page load or button click, so that the code is executed during loading or subsequent postback. Just like the RegisterClientScriptBlock () method, this method also has a method called IsStartupScriptRegistered (), which can detect repeated script registration. Refer to the Code for implementing the RegisterStartupScript () method below.

Listing 7-1st overload

ClientScriptManager script = Page. ClientScript;
TxtName. Text = "Welcome to AspAlliance !!! ";
If (! Script. IsStartupScriptRegistered (this. GetType (), "Alert "))
{
Script. RegisterStartupScript (this. GetType (), "Alert ",
"<Script type = text/javascript> alert (document. getElementById ('txtname'). value) </script> ");
}

Listing 8-2nd overload

ClientScriptManager script = Page. ClientScript;
TxtName. Text = "Welcome to AspAlliance !!! ";
If (! Script. IsStartupScriptRegistered (this. GetType (), "Alert "))
{
Script. RegisterStartupScript (this. GetType (), "Alert ",
"Alert (document. getElementById ('txtname'). value)", true );
}

When the above code is executed, we get the Output similar to "Figure 2-RegisterStartupScript Output.

Figure 2-RegisterStartupScript Output

Here, after the page control is rendered, the script block is executed and opposite to RegisterClientScriptBlock (). The page control is visible to the script block. See the example above. In this way, the RegisterStartupScript () method is used to register the script. We can access the page control.

RegisterOnSubmitStatement () method
[Back to Top]

This section describes how to implement the RegisterOnSubmitStatement () method of the ClientScriptManager class. Sometimes we need to verify the form before submitting it to the server. For example, in an input field, before storing data to the database, we may need to obtain confirmation from the customer. We cannot determine the validity through verification methods. This method can be used to provide a confirmation dialog box. The script registered in this method is executed when the page is submitted.

Listing 9-syntax

Public void RegisterOnSubmitStatement (
Type type,
String key,
String script
)

Usage

Place the following code in page load so that the script is executed each time the page form is submitted.

Listing 10-RegisterOnSubmitStatement

If (! Script. IsClientScriptBlockRegistered (this. GetType (), "SubmitScript "))
{
Script. RegisterOnSubmitStatement (this. GetType (), "SubmitScript ",
"Alert ('submit clicked ')");
}

Consider the following code:

Listing 10-RegisterOnSubmitStatement Example

Protected void Page_Load (object sender, EventArgs e)
{
ClientScriptManager script = Page. ClientScript;
If (! Script. IsClientScriptBlockRegistered (this. GetType (), "SubmitScript "))
{
Script. RegisterOnSubmitStatement (this. GetType (), "SubmitScript", "return
Confirm ('Are you sure to contine ')");
}
}
Protected void btnSubmit_Click (object sender, EventArgs e)
{
Response. Write ("Form is Submitted .");
}

Execute the above Code to generate a webform. Click Submit to generate a confirmation box like the following image.

Figure 3-RegisterOnSubmitStatement Output 1

Clicking Cancel does not trigger the submit click event, but clicking OK will, output as shown in Figure 4

Figure 4-RegisterOnSubmitStatement Output 2

Conclusion
[Back to homepage]

In this way, through this article, we have mastered a very practical feature subset provided by. NET Framework 2.0. Some JavaScript code blocks need to be processed based on business needs, or simply programmed to add JavaScript code blocks in HTML output, these methods provide good flexibility. Download the source code associated with this article in the download section to see the actual results. In Part 2 of this article, we will discuss other methods of the ClientScriptManager class and some JavaScript techniques.

Happy Coding !!

Reference

ClientScriptManager Class

Downloads

[Download source code]

Original article: Using JavaScript Effectively in ASP. NET 2.0-Part 1

Http://aspalliance.com/1701_Using_JavaScript_Effectively_in_ASPNET_20__Part_1.all