Calling ASP.NET Server Side Events using JavaScript

Introduction

Many times we want to execute ASP.NET Server Side Events using JavaScript. What about calling a TextChanged Event on the onchange javascript event of a textbox control. It can be done quite easily without giving pain to our brain too much.

Background

In one of our ASP.NET Web Form which is a part of our exisiting application, I was trying to implement and open an AJAX Modal Popup Extender Dialogue box on the click of an image button control. But, there is a TextBox in the form in which a JavaScript attribute was bound for the OnPropertyChange Event. The TextBox was actually a date picker control. If user selects a date then certain kind of bussiness logics get fired. But, just because of that ModalPopupControl never worked with this form. Because, whenever the Image Button was clicked to open the Modal Dialog Box, the OnPropertyChange Event was fired and the form.submit method was called which did not let the Modal Dialog Box to open. So, the situation was like that I had to avoid the form.submit method but keeping in mind that the Bussiness Logic remained the same.

Using the code

To overcome from this situation, I used the following code:

(i) I used the GetPostbackEventReference method of the Page object to register the ASP.NET Server Control which can create PostBack using Client Side callback.

      Page.GetPostBackEventReference(txt_sssn_dt);        

(ii) Then, I used the __dPostBack Event to fire the TextChanged Event of the datepicker control (txt_sssn_dt). This code had been placed inside the Date Picker JavaScript function and it would be fired everytime the user selects the date from the date picker.

      __doPostBack("txt_sssn_dt", "TextChanged");     

(iii) It was also necessary to write a simple JavaScript function to handle the situation when user just wanted to type the date directly into the date picker (txt_sssn_dt) . I wrote a JavaScript function called DoPostBack().

     function DoPostBack()
     {        
           __doPostBack("txt_sssn_dt", "TextChanged");
     }  

(iv) I called this function on the OnChange event of the date picker control. I got the solution.

     if(!IsPostback)
     {
      /...Implementation.../ 
         /.................../
      txt_sssn_dt.Attributes.Add("OnChange", "javascript:return DoPostBack()")
     }

It's a very simple demonstration to show how to call a Server Side ASP.NET Events from Client Side. Please share your ideas if there is any other or better way to do this. I am available at sanjaysantra@hotmail.com.

Points of Interest

.NET Framework, C#, ASP.NET, SQL Programming, SSRS, XML, Silverlight.