Manually Triggering Events in ASP.NET from JavaScript

Date Published: 18/08/2009 12:39

I was recently working on an ASP.NET web application for a client and came across an interesting 'hack' which I felt other people may find useful. The app I was working on was built by another developer some time before, who was absent at the time when I was fixing various bugs and functionality issues. The problem I had was he had used the "OnSelectedIndexChanged" method of an "asp:DropDownList", to switch various things on a form based on the item selected in the drop down list. With the "AutoPostBack" property set to true this means that everytime someone changes the selected item the whole page posts back causing an unnatural user experience. By simply posting back the form in JavaScript activated all the validators on the page meaning error messages started appearing when the user hadn't completed the form.

I determined a quick technique to fire the ASP.NET event without having to use the "AutoPostBack" option. Even though this example applies to the problem I encountered it can be used on any events of this nature within ASP.NET.

Setting up the Problem

To set this up I have an example where I have an "asp:DropDownList" using the "OnSelectedIndexChanged" method.

<asp:DropDownList runat="server" ID="ddlTest" OnSelectedIndexChanged="ddlTest_IndexChanged">
   <asp:ListItem Value="test1">Test 1</asp:ListItem>
   <asp:ListItem Value="test2">Test 2</asp:ListItem>
   <asp:ListItem Value="test3">Test 3</asp:ListItem>
   <asp:ListItem Value="test4">Test 4</asp:ListItem>
   <asp:ListItem Value="test5">Test 5</asp:ListItem>
</asp:DropDownList>

I have defined the method in C#.NET which will be used when the form posts back. It simply checks if the selected value of "ddlTest" is "test1", if so it enables a panel, otherwise it hides the panel.

protected void ddlTest_IndexChanged(object sender, EventArgs e)
{
   if (ddlTest.SelectedValue == "test1")
   {
      pnlTest.Visible = true;
   }
   else
   {
      pnlTest.Visible = false;
   }
}

Triggering the Event Manually

The problem with what I have set up above is that the page will always post back when really, it only needs to if the item with a value of "test1" is selected. The obvious answer is to just post the form from JavaScript back to the server if this option is selected but this is where the problem lies. When the form is posted naturally any validation on the page will fire as it thinks you are attempting to submit the form. To avoid this, ASP.NET forms have a hidden field called "__EVENTTARGET" which is used when built in client side features of ASP.NET are used. To trigger an event manually we can just change the value of the "__EVENTTARGET" input to contain the name of the field which we are submitting from. Here is an example where I attach a "change" event to "ddlTest" which changes the value of the "__EVENTTARGET" input to the name of the "ddlTest" drop down list and submits the form if the selected value is "test1". NOTE: You have to use the full names of elements in your JavaScript which ASP.NET generates.

JavaScript

var test = document.getElementById("ctl00_main_ddlTest");
if (test.addEventListener) {
   test.addEventListener ("change", triggerEvent, false);
}
else if (test.attachEvent) {
   test.attachEvent ("onchange", triggerEvent);
}
else {
   test.onchange = triggerEvent;
}

function triggerEvent(){
   if (this.getAttribute("value") == "test1"){
      document.getElementById("__EVENTTARGET").setAttribute("value", "ctl00_main_ddlTest");
      document.form.submit();
   }
}

JQuery

$("select[name=ctl00$main$ddlTest]").change(function() {
   if ($(this).val() == "test1"){
      $("input[name=__EVENTTARGET]").val("ctl00$main$ddlTest");
      form = $("body form");
      form.submit();
   }
});

When the form is submitted after the "__EVENTTARGET" input is set it will make the server believe it has been triggered by its own client side code, meaning it will be executed using the "ddlTest_IndexChanged" method.

Conclusion

Using this technique allows you to hold your ASP.NET applications together by mixing built in features with customised functionality making your work more flexible. ASP.NET has such a huge feature list it can sometimes feel necessary to only use built in tools instead of attempting to customise them to suit your own needs. This can sometimes however be restricting and developers should never sacrifice usability for the sake of speeding up development.

Comments

Sorry comments are currently disabled for maintenence

5 Most Recent Articles

Manually Triggering Events in ASP.NET from JavaScript

A quick guide for ASP.NET developers on how to manually trigger ASP.NET events from JavaScript.

Advanced Use of MySQL Stored Procedures

An article for users of MySQL databases describing how they can use advanced stored procedures to improve efficiently in their applications.

Using MySQL Stored Procedures and Extending MySQLi in PHP

A guide for LAMP developers to using stored procedures in MySQL and extending the MySQLi class.

Reading and Writing to Excel Spreadsheets in Python

An introduction to using the xlwt and xlrd modules for python to interact with Microsoft Excel spreadsheets.

Interact with the Web Using Python and the HTTP Library

This is an introduction to making HTTP requests from a python script/application using httplib.

Sponsors