JavaScript: Call a Server Side Method in ASP.Net C#

This article explains how to call a Server Side method from JavaScript in ASP.NET C#.

The following is my aspx code.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title>Java Script: Calling Server Side Method</title>  
  6.   
  7.     <script type="text/javascript" language="javascript">  
  8.         function jsCallServerSideMethod() {  
  9.             var _msg = $get("txtMessage").value;  
  10.             PageMethods.GetUserMessage(_msg, OnSuccess, OnFailure);  
  11.         }  
  12.         function OnSuccess(result) {  
  13.             if (result) {  
  14.                 alert(result);  
  15.             }  
  16.         }  
  17.         function OnFailure(error) {  
  18.   
  19.         }  
  20.     </script>  
  21.   
  22. </head>  
  23. <body>  
  24.     <form id="form1" runat="server">  
  25.     <div>  
  26.         <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">  
  27.         </asp:ScriptManager>  
  28.         <table style="border: solid 15px blue; width: 100%; vertical-align: central;" cellpadding="10"  
  29.             cellspacing="10">  
  30.             <tr>  
  31.                 <td style="padding-left: 20px; padding-top: 20px; padding-bottom: 20px; background-color: skyblue;  
  32.                     font-family: 'Times New Roman'; font-size: 20pt; color: red;">  
  33.                     Java Script: Calling Server Side Method  
  34.                 </td>  
  35.             </tr>  
  36.             <tr>  
  37.                 <td style="text-align: left; font-family: Times New Roman; font-size: 12pt;">  
  38.                     Enter Your Message #  
  39.                     <asp:TextBox ID="txtMessage" runat="server" Width="200px"></asp:TextBox>  
  40.                     <asp:Button ID="btnClick" runat="server" Text="Click" OnClientClick="jsCallServerSideMethod()" />  
  41.                 </td>  
  42.             </tr>  
  43.         </table>  
  44.     </div>  
  45.     </form>  
  46. </body>  
  47. </html> 

The following is my aspx.cs code.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Web.Services;  
  8.   
  9. public partial class _Default : System.Web.UI.Page  
  10. {  
  11.     protected void Page_Load(object sender, EventArgs e)  
  12.     {  
  13.   
  14.     }  
  15.   
  16.     [WebMethod]  
  17.     public static string GetUserMessage(string message)  
  18.     {  
  19.         return "Welcome " + message + Environment.NewLine + System.DateTime.Now;  
  20.     }  

Now run the application.

javaScript
                                                                     Image 1.

application
                                                                     Image 2.

run the application
                                                                   Image 3.