Calling server method from Javascript

Every once in a while people want to call their server-side code from JavaScript. I ran into this particular difficulty myself to find that many people online (including inside the msdn forums) say that this cannot be done. But somehow i managed to get it done!

First of all, your website doesnt need to be AJAX enabled. You just simply go to our aspx page and change it to the following:

<script type=“text/javascript”>
      function RecieveServerData(arg, context) 
      { 
         alert(arg); 
      }
 <script>
.
.
.
<form id=“form1” runat=“server”>
<input type=“button” value=“Callback” onclick=“CallServer(‘Calling From Button’, null)” />
</form>

 

And then change your server side coding to the following:

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

 

public partial class _Default : System.Web.UI.Page,

   ICallbackEventHandler

{

   string fromClient;

 

   ///

   /// Fired when the page loads. Creates

   /// JavaScript to connect to the server.

   ///

   ///

   ///

   protected void Page_Load(

      object sender, EventArgs e)

   {

      // Get javascript function from the

      // server that is capible of connecting

      // to our server. RecieveServerData is

      // the javascript method we will call when

      // we are done processing the data

      string reference =

         this.ClientScript.GetCallbackEventReference(

         this, “arg”, “RecieveServerData”, “”);

 

      // Generate the javascript that can connect

      // to the server

      string callBackScript =

         @”   function CallServer(arg, context)

            {“ + reference + “;}”;

 

      // Put the javascript on the page

      this.ClientScript.RegisterClientScriptBlock(

         this.GetType(), “CallServer”,

         callBackScript, true);

   }

 

   ///

   /// This is the method called by the

   /// javascript. Here you can do some server

   /// processing to manage what you are going

   /// to give back to the client if anything.

   ///

   ///

   public void RaiseCallbackEvent(

      string eventArgument)

   {

      /* Im saving stuff here */

      this.fromClient = eventArgument;

   }

 

   ///

   /// This is the method that passes back

   /// to the javascript.

   ///

   ///

   public string GetCallbackResult()

   {

      return this.fromClient;

   }

}

 

And that is it. Run it and you will be sending information to the server, processing it, and sending the information back to the client.

Advertisements

About Saad Khan

Saad is an ASP.NET developer with 4 years of experience, and has also made a number of contributions to the Sitefinity marketplace and community. He loves to explore new code, and create innovative tools and procedures while exploring new approaches in his work with Sitefinity and MVC. As an experienced .NET developer, he frequents both Telerik and Microsoft technologies. In his spare time, Saad is an avid gamer and movie fanatic, and also experiments with new and interesting tools on the Microsoft platform.​​

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: