<

Finding Control that causes PostBack Made Simple

Published on
10,023 Points
4,023 Views
Last Modified:
Approved

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();
}
}

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);
        }

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);
        }

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>

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;
        }

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);
        }

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!
0
Comment
Author:kak_mca
  • 2
2 Comments
 
LVL 2

Author Comment

by:kak_mca
Subject: How can I edit the article to add some short explanation to the article?

Hi tedbilly,

I have clicked on EDIT ARTICLE to add some introduction for the purpose to provide a short explanation to the article, but I could not see any changes made when I clicked on SUBMIT ARTICLE button. How can I edit the article to add some introduction to the article?
0
 
LVL 2

Author Comment

by:kak_mca
Hi mark_wills,
I think, I have done all the changes asked by reviewers / page editors.

Anything more changes required?

When can I expect the article to be published?

I feel that I don't have any more problems with the article.

Thanks and Regards,
Ashok kumar.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Join & Write a Comment

this video summaries big data hadoop online training demo (http://onlineitguru.com/big-data-hadoop-online-training-placement.html) , and covers basics in big data hadoop .
Is your OST file inaccessible, Need to transfer OST file from one computer to another? Want to convert OST file to PST? If the answer to any of the above question is yes, then look no further. With the help of Stellar OST to PST Converter, you can e…
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month