How to use JavaSscript in asp.net

Sourav.Kayal
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 1846 red flag

This article will show, how to use javaScript in asp.net

How to use JavaSscript in asp.net

In this article I am going to show ,how to implement JavaScript in asp.net application. As we know java script is scripting language and it’s a client side language. Means using JavaScript parse and run in client browser and output gets display in browser. So it does not depend on any server side technology like PHP, ASP or JSP.

Note- JavaScript and java are entirely different; Sometimes people think they are same. Java is a platform like C# and javaScript is light weight scripting language which runs in only browser based application. And if we compare Java and JavaScript in terms of functionality and capability, JavaScript is nothing in front of Java.

Here we will discuss how to use java script with asp.net. As java is scripting language ,we can write code within HTML page which will execute in browser. Basically it’s traditional way to keep Scripting language code in HEAD section of HTML page but it’s not mandatory. We can keep anywhere in our HTML page.

Let’s see in example where we can keep JavaScript code in HTML file.

Keep code in <HEAD> section

<head runat="server">
    <title></title>
    <script language=javascript type="text/javascript">
        functionMyFunction() {            alert("Hello");
        }
 
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="Button2" type="button" value="button" onclick="MyFunction()" />
    </div>
    </form>
</body>
</html>
 

Here I have kept function in head section and from body onclick() event I am invoking this function.

And the output is in below.


Write JavaScript function in <BODY> section

Same as head section we can keep code in body section too. In below code in will place Hello() function within <DOBY> tag and it will work smoothly.

<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <script language=javascript type="text/javascript">
         function MyFunction() {
             alert("Hello");
         }
 
    </script>
        <input id="Button2" type="button" value="button" onclick="MyFunction()" />
    </div>
    </form>
</body>
</html>
 

Here is the output screen.


How to call by server side and client side control?

As we know ASP.NET is server side technology. Most of the controls in ASP.NET environment are server side control , so what does it mean ? It means controls operation will perform in server and in server will generate raw HTML and that row HTML will come in browser and will get display. So how we will identify server and client side control ?. The control which has runat=”server” attribute are server side control.  And the control which not containing (HTML control, You can find them in HTML tab to Visual studio toolbox)

Both server side control and client side control can call JavaScript function. But calling style is bit different.

Call java script function using asp button

Here we will see how to call JavaScript function using server side button control. We will use onClientClick() method to call java script function.  Have a look on below code.

<head runat="server">
    <title></title>
  <script language=javascript type="text/javascript">
       function MyFunction() {
           alert("function invoked");
       }
     </script>
 </head>
<body>
    <form id="form1" runat="server">
    <div>
       <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="MyFunction()" />
   </div>
    </form>
</body>
</html>
 

Here Button1 is ASP.NET button control and we can use onClientClick() event to call javaScript function from server control like this  OnClientClick="MyFunction()"

And here is output


Call JavaScript function using HTML button

Here we are going to see how to call JavaScript function from HTML button. 

<head runat="server">
    <title></title>
  <script language=javascript type="text/javascript">
       function MyFunction() {
           alert("function invoked");
       }
   </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <input id="Button2" type="button" value="button" onclick="MyFunction()" />
    </div>
    </form>
</body>
</html>

In case of normal HTML control we will use onclick() event to call JavaScript. And the output is in below.


Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)