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.