This is asked many times on asp.net forums,
1. How to call Server Side methods or functions using JavaScript in ASP.Net
2. How to call Server Side methods Client Side in ASP.Net.
Initially I explained the same using jQuery in the following article.
But the issue is that many developers are not well acquainted with jQuery hence now I am explaining the same using ASP.Net AJAX PageMethods.
ASP.Net AJAX ScriptManager allows you to call Server Side ASP.Net methods from client side without any PostBack using PageMethods. Actually it is an AJAX call to the server but it allows us to call the method or function defined server side.
 
 
Enabling PageMethods
The first thing you need to do is add a ASP.Net AJAX ScriptManager to the page and set its EnablePageMethods property to true.
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
 
 
HTML Markup
The following HTML Markup consists of an ASP.Net TextBox, an HTML Button and an ASP.Net AJAX ScriptManager.
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<div>
Your Name :
<asp:TextBox ID="txtUserName" runat="server" ></asp:TextBox>
<input id="btnGetTime" type="button" value="Show Current Time" onclick="ShowCurrentTime()"/>
</div>
</form>
 
 

Client Side Script
When user enter his name and Button is clicked the ShowCurrentTime JavaScript method is executed to get the Current Time.
The ShowCurrentTime method makes an AJAX call to the server using ASP.Net AJAX ScriptManager PageMethods and executes the GetCurrentTime method which accepts the username and returns a string value.
<script type="text/javascript">
    function ShowCurrentTime() {
        PageMethods.GetCurrentTime(document.getElementById("<%=txtUserName.ClientID%>").value, OnSuccess);
    }
    function OnSuccess(response, userContext, methodName) {
        alert(response);
    }
</script>
 
 
The WebMethod
The following WebMethod returns a greeting message to the user along with the current server time. An important thing to note is that the method is declared as static (C#) and Shared (VB.Net) and is decorated with WebMethod attribute, unless you do this you won’t be able to call the methods using ASP.Net AJAX ScriptManager PageMethods.
C#
[System.Web.Services.WebMethod]
public static string GetCurrentTime(string name)
{
    return "Hello " + name + Environment.NewLine + "The Current Time is: "
        + DateTime.Now.ToString();
}
 
VB.Net
<System.Web.Services.WebMethod()> _
Public Shared Function GetCurrentTime(ByVal name AsString) AsString
    Return "Hello " & name & Environment.NewLine & "The Current Time is: " & _
            DateTime.Now.ToString()
End Function
 
 
Screenshot
Calling Server Side Methods JavaScript and AJAX in ASP.Net
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads