Accessing C# methods from JavaScript

I usually do not appreciate myself. But you know, sometimes, you are left with no other option. Well today, one of my friend was busy on some task in ASP.Net. He was actually stuck somewhere and wasn’t getting any glimpse of what to do next. He therefore called a guy, in the hope that he will help him in solving the issue. It was before 2 minutes, he was struggling alone, now, he got company. There entered a third guy, and yes he came there for help too. It was almost 1 hour I am watching them quarrelling among each other on what to be done to solve the problem. As being so kind and helpful, I can’t see the struggling threesome. I therefore decided, “it’s time for my entry”.

I went to him, grabbed a chair and started analyzing the issue. It took me about 5 min to conclude what has to be done to get away with the persisting problem. “Give me the chair,” I asked. He got up. I sat on the chair, and started typing some C-Sharp’s stuff. It was hardly a task of half an hour, and good thing is, it was completed at the precise time.

The Persisting Issue

Although the problem was solved, but it wasn’t the complete picture. Their arose a condition where we need to access a method, written in the code behind of the aspx page from a JavaScript’s function. It was really a challenge. There was a way of doing this by using a [WebMethod] attribute over the function, but it will not work for this particular situation, it demands something different, yet something concrete.

In this post of ours, we will try doing the same. For that, I have created an Asp.Net’s empty website project, and added a webform to it, and named it as index.aspx.

   1: <!DOCTYPE html>

2:

   3: <html xmlns="http://www.w3.org/1999/xhtml">

   4: <head runat="server">

   5:     <title></title>

   6:     <script type="text/javascript">

   7:         function Hello() {

   8:             __doPostBack("MyFunction", "Hello World");

   9:           }

  10:     </script>

  11: </head>

  12: <body>

  13:     <form id="form1" runat="server">

  14:         <div style="background-color:#000; height:300px; width:300px;" onclick="Hello()">

  15:         </div>

  16:     </form>

  17: </body>

  18: </html>

Inside the form tag, I’ve created a division, styled it and created a click event of it. The click event of the division points to a function Hello() written in the JavaScript above.
In that function hello(), there is a call to a method __doPostBack() which accepts two thing, first is __EVENTTARGET and second is __EVENTARGUMENT respectively. What it does is it simply post back the page with the parameters specified. Next we detect this post back and after checking some conditions, can make use of it. Here is how it can be done.

   1: public partial class index : System.Web.UI.Page

   2:     {

   3:         protected void Page_Load(object sender, EventArgs e)

   4:         {

   5:             this.ClientScript.GetPostBackEventReference(this, string.Empty);

6:

   7:             if (this.IsPostBack)

   8:             {

   9:                 string eventTarget = (this.Request["__EVENTTARGET"] == null) ?

  10:                                         string.Empty : this.Request["__EVENTTARGET"];

  11:                 string eventArgument = (this.Request["__EVENTARGUMENT"] == null) ?

  12:                                         string.Empty : this.Request["__EVENTARGUMENT"];

13:

  14:                 if (eventTarget == "MyFunction")

  15:                 {

  16:                     MyFunction(eventArgument);

  17:                 }

  18:             }

  19:         }

20:

  21:         public void MyFunction(string temp)

  22:         {

  23:             Response.Write(temp);

  24:         }

  25:     }

Above is the code of index.aspx.cs page. We checked whether the pageload occurred due to the post back or not. If it does, we extract the __EVENTTARGET and __EVENTARGUMENT the page is post backed with. Next, if the __EVENTTARGET matched with the parameters we declared in the code, bingo! we can write our custom logic there. Which in my case iscalling a private method.

Please note that line #5 is important to let JavaScript recognize the __doPostBack() method.

And again, this is a simple way to access the C# methods from JavaScript. Stay tuned!!

Happy Reading!!!