Raising Server side event from JavaScript in ASP.NET (Tweaking the existing bits)

Well, knowing internal structure of an ASP.NET event system can always be an element of fun and interests. Recently I came across to a requirement to generate a server side event on a page directly from Javascript. There are a couple of approaches available with the existing models (like ICallbackEventHandler etc) but these will put additional pressure to the page and also does not use the existing code already present. So I thought to put a script that could use all the existing code and work similar to what happens in background.

You might know when a page is processed, it generates two hidden controls. viz. EventName and EventValue. The eventName is used to send the name of the event that the client is going to generate in the server side. As you know, ASP.NET is a stateless protocol. Hence everything that is genenrated in the server side to produce your page, will be disposed once it is done. Hence you need to postback the whole page again to communicate and during this phase, the ASP.NET server side page generates the respective events on various controls which is specified on the eventName.

The eventValue on the other hand will hold additional arguments that you need to send to the server for the particular event. The ASP.NET page will generate the event automatically during the rendering of the page in the server side.

Now here, I am going to build my own event so I need to do this myself. Lets see how :

public delegate void CustomEventHandler(string message);
public event CustomEventHandler public void OnCustomEventRaised(string message)
{
if (this.CustomEvent != null)
this.CustomEvent(message);
};

Say I have to generate this event from the client side. As this event is created totally by me, I need to configure it myself, such that it generates it when passed with special attribute. I personally thought it would be easier to understand this for a newbie if I write it under Page_Load, but you are free to generate this event as your wish (following your own pattern I guess). Now lets look the code to understand

First of all, I create two hidden field in the page with runat =”server”




This will ensure that the hiddenfields will be available from server side. Now inside Page_Load, I write code to raise the event :

public void Page_Load(…)
{
if (hidEventName.Value == "CustomEvent")
{
hidEventName.Value = ""; //It is essential reset it and remove viewstate data
OnCustomEventRaised(hidEventValue.Value);
}
}

public void OnCustomEventRaised(string message)
{
if (this.CustomEvent != null)
this.CustomEvent(message);
}

So eventually I am raising the eventhandler once the page is posted back from the client side. Now to raise the event from the client side, let me add a javascript :

function RaiseEvent(pEventName, pEventValue) {

document.getElementById('<%=hidEventName.ClientID %>').value = pEventName;
document.getElementById('<%=hidEventValue.ClientID %>').value = pEventValue;

if (document.getElementById('<%=MyUpdatePanel.ClientID %>') != null) {
__doPostBack('<%=MyUpdatePanel.ClientID %>', '');
}
}

So basically I am posting back the whole page from the client side using the __doPostBack method already present for every page. Here I have used my UpdatePanelId to ensure that postback is generated from my UpdatePanel.

Now from javascript if I call :
RaiseEvent(‘CustomEvent’, ‘Hello from server’);
It will eventually call the server with my custom message.

I hope the code snippet will come handy.