Finding Control that causes PostBack Made Simple

Introduction

While developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET postback based on the control that caused the postback to occur. The action, for example, could be to set focus back to the control that caused the postback or to load remaining controls on the form based n the control that cause the postback.

In this article, we will look into the JavaScript __doPostBack function and then as a little walkthrough we will write one small program to determine the control that causes the postback


Let us take a look at the __doPostBack function shown below:

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
                      <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
                      function __doPostBack(eventTarget, eventArgument) {
                      if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
                      theForm.__EVENTTARGET.value = eventTarget;
                      theForm.__EVENTARGUMENT.value = eventArgument;
                      theForm.submit();
                      }
                      }

Select all Open in new window

The __doPostBack function takes two arguments eventTarget, and eventArgument. The eventTarget contains the ID of the control that causes the postback and the eventArgument contains any additional data associated with the control. One thng should be noted that the two hidden fields _EVENTTARGET and _EVENTARGUMENT are automatically declared. the value of the eventTarget and eventArgument are stored in the hidden fields. The two hidden variables can be accessed from code behind using the forms/params collection.

Finding the control that caused the PostBack:

You can find the ID of the control which caused the postback by retrieving the value of the _EVENTTARGET hidden variable from the form parameter collection by using the code like bellow:

        protected void Page_Load(object sender, EventArgs e)
                              {
                                  string controlName = Request.Params.Get("__EVENTTARGET");
                                  Response.Write("control caused the postback is: " + controlName);
                              }

Select all Open in new window

The above code works for all web server controls on the form except for Button and ImageButton.

Try putting the above code to work:

1

Add three DropDownList controls on the page and set the AutoPostBack property to true for all the three controls. Keep the default ID for all the controls i.e. DropDownList1, DropDownList2, DropDownList3.

2

Populate the each dropdownlist control with some dummy data.

3

Write the following code in the Page_Load event.

        protected void Page_Load(object sender, EventArgs e)
                              {
                                  string controlName = Request.Params.Get("__EVENTTARGET");
                                  Response.Write("control caused the postback is: " + controlName);
                              }

Select all Open in new window

4

Run the code to verify outputThe program displays the controlName that caused the postback. If you view the source of the page, you can see that onchange event of the DropDownList calls the __doPostBack function. The ID of the control DropDownList1 is also passed to the __doPostBack function and stored in the _EVENTTARGET hiddle field. In the Page_Load, I fetch the value of the _EVENTTARGET variable which in this case is the ID of the DropDownList. This way we can findout which control caused the postback.

Wroking with Buttons and ImageButtons to Handle Postbacks

If you see the code generated by Button (or ImageButton) <input type="submit" name="Button1" value="Do PostBack" id="Button1" /> the button control (or the ImageButton control) does not call the __doPostBack function, and hence the _EVENTTARGET will always be empty. However, you can findout the ID of the Button by looping through the form controls collection.

I have written one small function GetPostBackControl that returns control name as string datatype that caused the postback. All the statements inside the function are self explanatory. Comments have been included where-ever necessary.

Try it out:

1

Add different controls like DropDownLists, CheckBoxes, Buttons to the page. For DropDownLists, or for CheckBoxes set AutoPostBack property to true. I have added three DropDownLists, four Buttons, and three CheckBoxes to the page. The corresponding .ASPX code is shown below:

<body>
                          <form id="form1" runat="server">
                          <div>
                              <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
                                  <asp:ListItem>Item11</asp:ListItem>
                                  <asp:ListItem>Item12</asp:ListItem>
                                  <asp:ListItem>Item13</asp:ListItem>
                                  <asp:ListItem>Item14</asp:ListItem>
                              </asp:DropDownList><br />
                              <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True">
                                  <asp:ListItem>Item11</asp:ListItem>
                                  <asp:ListItem>Item12</asp:ListItem>
                                  <asp:ListItem>Item13</asp:ListItem>
                                  <asp:ListItem>Item14</asp:ListItem>
                              </asp:DropDownList><br />
                              <asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="True">
                                  <asp:ListItem>Item11</asp:ListItem>
                                  <asp:ListItem>Item12</asp:ListItem>
                                  <asp:ListItem>Item13</asp:ListItem>
                                  <asp:ListItem>Item14</asp:ListItem>
                              </asp:DropDownList>
                              <br />
                              <br />
                              <asp:Button ID="Button1" runat="server" Text="Button 1" />
                      &nbsp;<asp:Button ID="Button2" runat="server" Text="Button 2" />
                      &nbsp;<asp:Button ID="Button3" runat="server" Text="Button 3" />
                      &nbsp;<asp:Button ID="Button4" runat="server" Text="Button 4" />
                              <br />
                              <br />
                              <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" 
                                  Text="CheckBox 1" />
                      &nbsp;<asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="True" 
                                  Text="CheckBox 2" />
                      &nbsp;<asp:CheckBox ID="CheckBox3" runat="server" AutoPostBack="True" 
                                  Text="CheckBox 3" />
                          </div>
                          </form>
                      </body>

Select all Open in new window

2

Write the following function in the code-behind page:

        public string GetPostBackControl(Page page)
                              {
                                  string controlName = page.Request.Params.Get("__EVENTTARGET");
                                  if (controlName == string.Empty)
                                  {
                                      //Means,  some Button or ImageButton has been clicked.
                                      foreach (string controlItem in page.Request.Form)
                                      {
                                          Control c = Page.FindControl(controlItem);
                                          if (c is Button)
                                          {
                                              controlName = c.ID;
                                              break;
                                          }
                                      }
                                  }
                                  return controlName;
                              }

Select all Open in new window

3

To use the above function, write the following code in the Page_Load event:

        protected void Page_Load(object sender, EventArgs e)
                              {
                                  string control = GetPostBackControl(this.Page);
                                  Response.Write("Control caused postback:" + control);
                              }

Select all Open in new window

4

Now, run the above code and check what control is causing postback.
Hope this article helps to all the readers. Happy programming!