473,231 Members | 1,824 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes and contribute your articles to a community of 473,231 developers and data experts.

How to use JavaScript in ASP.NET

9,735 Expert Mod 8TB
JavaScript in ASP.NET

Using JavaScript in ASP.NET pages can make your application seem to work faster and prevent unnecessary calls to the server. JavaScript can be used to perform client-side functionality in the user's browser without having to make calls back to the server; thus, saving resources.

The following example demonstrates how you can use an ASP.NET button to trigger a JavaScript call which modifies an ASP.NET TextBox.


The following example will show you:
  • how to dynamically add JavaScript to your page
  • how to call the JavaScript function when the user clicks a button
  • how to either allow or prevent the button from posting back to the server

First of all, you will have to create an ASP.NET project. This example uses a MasterPage, so when you create your ASP.NET project, be sure to add a MasterPage to it, then add a Web Content Form (aspx page) to your project and be sure to select your MasterPage while adding the Content Form.

In your ASPX page (your Content Form) you need to add a TextBox. This TextBox will be used to display the text "hello world".

You will also need to add an ASP.NET Button. This ASP.NET Button will trigger a JavaScript function that asks the user if they want to insert the text "hello world!" into the ASP.NET TextBox using JavaScript code...we'll get to the JavaScript function in a minute.

Keep in mind that once the ASP.NET button and TextBoxes are rendered for the browser, they are simple html objects that can be modified through JavaScript.

Your page should look something like the following:
Expand|Select|Wrap|Line Numbers
  1. <%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="CTest.aspx.vb" Inherits="Test" title="Untitled Page" %>
  3. <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
  5.          <asp:TextBox id="MyTextbox" runat="server"></asp:Textbox>
  6.          <asp:Button id="HelloWorldButton" runat="server" text="Say Hi" />
  8. </asp:Content>

Please note that there are two click events for an ASP.NET button:
  • The JavaScript onclick event, which is executed in the browser before the page is submitted to the server
  • And the .NET OnClick event, which is executed on the server and handled by your VB.NET or C# code.

In order to call the JavaScript function we have to assign the button's JavaScript "onclick" event to call the method. There are two ways in which you can set the JavaScript "onclick" event: declaratively in your asp code using the OnClientClick property of the button; or dynamically using the button's "attributes" property in your VB.NET or C# code.

To declaratively provide a method to call during the JavaScript "onclick" event you would modify your button declaration and provide it with a value for the OnClientClick property:
Expand|Select|Wrap|Line Numbers
  1. <asp:Button id="HelloWorldButton" runat="server" text="Say Hi" OnClientClick="return DisplayHelloWorld();" />
Please note that if you set the OnClick property of an ASP.NET button, it will attempt to post back to the server and execute a method with the name that you provided:
Expand|Select|Wrap|Line Numbers
  1. <!-- The following will postback to the server and attempt to execute a method named DisplayHelloWorld -->
  2. <asp:Button id="HelloWorldButton" runat="server" text="Say Hi" OnClick="return DisplayHelloWorld();" />
In this example, I'm going to show you how to dynamically set the JavaScript "onclick" event using the button's "attributes" property. During the Page PeRender event (or if you like the Page Load event) you need to configure the button to call the JavaScript function when it is clicked.

The following code assigns the button's JavaScript "onclick" event to call a JavaScript method named "DisplayHelloWorld". It passes the method a parameter which is the ID that the TextBox has once it's rendered in the browser:

Expand|Select|Wrap|Line Numbers
  1. Private Sub Test_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
  3.       CreateHelloWorldJavaScript()
  5.      ' Please note that here we are providing the DisplayHelloWorld function with 
  6.      ' the MyTextBox.ClientID.  The reason we use the ClientID is because when 
  7.      ' the TextBox is rendered in the browser it is given a special "ClientID" ...it's name
  8.      ' changes from "MyTextBox" to something like "ctl00_ContentPlaceHolder1_MyTextBox"
  9.      ' when using MasterPage.  Therefore, in order for the JavaScript to know what the
  10.      ' TextBox's id is in the page, we pass it the TextBox's ClientID
  11.      If IsPostBack = False Then
  12.        'note the "return", if you set a button to return False it will not postback to the server.
  13.          HelloWorldButton.Attributes.Add("onclick","return DisplayHelloWorld('" + MyTextbox.ClientID + "');")
  14.     End If
  16. End Sub
Notice that there is a call to a Sub called "CreateHelloWorldJavaScript".

This sub is responsible for dynamically creating the JavaScript and register it in the page:
Expand|Select|Wrap|Line Numbers
  1. Private Sub CreateHelloWorldJavaScript()
  3.   If Not Page.ClientScript.IsStartupScritRegistered("HelloWorldScript") Then
  4.      Dim script As New Text.StringBuilder
  5.      script.Append("function DisplayHelloWorld(textboxID)" + vblf)
  6.      script.Append("{" +vblf)
  7.      script.Append("     if(confirm("Do you want to use JavaScript code to display the text?")==true)" + vblf)
  8.      script.Append("     {     document.getElementById(textboxID).value = 'Hello World! From JavaScript!';"+ vblf)
  9.      script.Append("           return false;"+ vblf)
  10.      script.Append("     }" +vblf)
  11.      script.Append("     else"+ vblf)
  12.      script.Append("     {     return true;}"+ vblf)
  13.      script.Append("}" +vblf)
  15.      Page.ClientScript.RegisterStartupScript(page.GetType,"HelloWorldScript",script.ToString())
  17.   End If
  18. End Sub 
The above function dynamically creates the JavaScript function using a StringBuilder to hold the code. Once the script has been created it uses the "Page.ClientScript.RegisterStartupScript" method to register the JavaScript with the page and make it available in the browser.

Now that the JavaScript is available in the browser, it can be executed when the button is clicked in the web browser because we have set the button to call it during the JavaScript "onclick" event.

The JavaScript function dynamically generated in the above code displays a confirm box which asks the user if they want to display the text using JavaScript code. If the user click "yes" then the JavaScript locates the TextBox, sets it's text to "Hello World! From JavaScript!", and returns false. If the user clicks "no" then the JavaScript function returns true which allows the page to post back to the server so that the server side code can be called.

It's important to note something that I skipped over quickly earlier.
In the PreRender event, when we are setting the JavaScript "onclick" event to call the JavaScript method, we are telling it return the value returned by the JavaScript "DisplayHelloWorld" method:
Expand|Select|Wrap|Line Numbers
  1.  HelloWorldButton.Attributes.Add("onclick","return DisplayHelloWorld('" + MyTextbox.ClientID + "');")
Now if the JavaScript method returns false, then the "onclick" event will return false and the postback to the server will be cancelled. If the JavaScript method returns true, then the "onclick" event will return true and the postback to the server will continue as normal. It is in this way that you can prevent unnecessary postbacks to the server from occurring.

Oh, there's one last thing to do: implement the server code that writes "Hello World" in the text box:
Expand|Select|Wrap|Line Numbers
  1. Protected Sub HelloWorldButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles HelloWorldButton.Click
  2.     MyTextBox.Text = "Hello World! From the server!"     
  3. End Sub
This method will only be executed if the button is permitted to postback to the server.

  • You have a .NET button that will call a JavaScript function named "DisplayHelloWorld" to display the text "Hello World!" in a .NET TextBox.
    The DisplayHelloWorld function takes one parameter: the ID of the .NET TextBox. The TextBox ID that is passed into the DisplayHelloWorld function is the TextBox's ClientID. The reason we use the ClientID is because (when using MasterPages or Web User Controls) the .NET TextBox is given a special ID when it is rendered in the browser that does not match the .NET variable name.
  • You have assigned the JavaScript call to the Button so that when the button's (JavaScript) "onclick" event is fired, it calls the JavaScript Function "DisplayHelloWorld".
  • The "DisplayHelloWorld" JavaScript function has been registered in the page
  • The JavaScript function asks the user if they want to display "Hello World" from the JavaScript code or from the Server Code. If the user wants to display the text from JavaScript, the function inserts the text "Hello World! From JavaScript" into the TextBox by retrieving the TextBox from the page using the document.getElementById() function. Otherwise, the function returns true, allowing the postback to occur.
Jul 1 '08 #1
2 37603
Thanks for the answer.
Nov 23 '09 #2
really lovely example..i was confused b4
Nov 25 '10 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.