Wednesday, June 29, 2011

Using JavaScript in ASP.Net / VB.Net Applications

You basically have two options when you want to imbed JavaScript into an application.  There is actually the third method of simply adding the code inline in the body of the document that becomes clunky and hard to read, so we will look at the RegisterStartupScript and RegisterClientScriptBlock methods.

RegisterStartupScript

Just as the name implies, it is script that you want to be initiated when the page is first loaded.  This could be some setup for attributes of a control you have on a page, DHTML, and the like. 
Protected Sub Page_Load(ByVal sender As Object, 
ByVal e As System.EventArgs)
Handles Me.Load Page.RegisterStartupScript("CustomScript", "<script language=javascript>" & _ "function AlertWindow() { alert('This is the text that will show up in the alert window.'); }</script>") txtTextBoxControl.Attributes("onclick") = "AlertWindow()" btnButtonControl.Attributes("onclick") = "AlertWindow()"
End Sub



So here we have in our Page_Load event, we are registering our Script Block.  Then we are adding Attributes to the Text and Button controls programmatically.  Essentially, when someone clicks on either the Text or Button control – they will receive an alert.
The RegisterStartupScript places the JavaScript block right before the closing Form tag </form> on the page.  This is significant, as the control you are trying to effect is already on the page.  However, if you use RegisterClientScriptBlock the JavaScript Block is written right after the opening Form tag <form>. 

The significance is that if you are trying to effect one of the controls on the page, the control might not be rendered on the page yet when you use RegisterClientScriptBlock. 


RegisterClientScriptBlock

Private Sub Page_Load(ByVal sender As System.Object, 
ByVal e As System.EventArgs) Handles MyBase.Load Page.RegisterClientScriptBlock("MyScript", "<script language=javascript>" & _ "if (document.images) {"MyButton = new Image; MyButtonShaded = new Image;" & _ "MyButton.src = 'button1.jpg'; MyButtonShaded.src = 'button2.jpg';" & _ "}else { MyButton = ''; MyButtonShaded = '';}</script>") ImageButton1.Attributes.Add("onmouseover", "this.src = MyButtonShaded.src; window.status='Oh Yes! Click here!';") ImageButton1.Attributes.Add("onmouseout", "this.src = MyButton.src; window.status='';")
End Sub



This script will be written right after the opening Form tag <form>.  In addition, it will display a message in the status line.

Both the RegisterClientScriptBlock and RegisterStartupScript a unique identifier and the script itself as the parameters.  Additionally, you can keep your JavaScript in a different .js file by specifying the SRC parameter like so:
Page.RegisterClientScriptBlock("MyScript", 
"<script language=javascript src='MyJavaScriptFile.js'>")



Conclusion


This makes integrating JavaScript into .Net applications extremely easy and versatile.  You can also integrate JavaScript by using an HTMLGenericControl.  You can see how easy it would be to extend and utilize this functionality.



Happy .Netting…. Saleh

No comments:

Post a Comment