Click here to Skip to main content
15,867,330 members
Articles / Web Development / XHTML
Article

ASP.NET GridView Image Command Button Problem (Multiple PostBacks)

Rate me:
Please Sign up or sign in to vote.
4.48/5 (17 votes)
10 Oct 2008Apache3 min read 240.3K   912   42   35
This article describes workarounds to solve the problem of multiple postbacks when using a command button of type image in an ASP.NET GridView (Internet Explorer).

Last update: 2008-10-10 Updated template solution

To run the application, download and unzip it to a folder on your computer and open it with Visual Studio 2005 (Pro or Web Edition) and run it over the development server.

Screenshot - Running.gif

Introduction

I ran into the problem that my page was loaded twice after selecting a row in a GridView by clicking on a CommandField with Type equal to Image. I found out that two requests were sent from the client: the first request is not a PostBack request on my page (this is the request I didn't expect; the second request is a PostBack request on my page (this is the request I expected).

If something is completely strange, then I always check it in FireFox and to no much surprise, there is only one request (the expected PostBack request). Therefore I also checked it with Internet Explorer 6 and there the problem occurs once in about 4 times!?!?

To sum it up:

  • Internet Explorer 7: Always 2 requests
  • Internet Explorer 6: Sometimes it's okay, sometimes not
  • FireFox: Everything works correctly

Note: This behaviour is only present when using Image as type of the CommandField, with Link or Button, everything works great.

How I Would Do It When Everything Would Be Correct

The following ASPX definition shows a GridView with a CommandButton of type image:

ASP.NET
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    DataSourceID="ObjectDataSource1" 
    OnSelectedIndexChanged="SelectedIndexChanged">
    <Columns>
        <asp:CommandField ButtonType="Image" 
             SelectImageUrl="~/Select.gif" ShowSelectButton="True" />
        <asp:BoundField DataField="A" HeaderText="A" SortExpression="A" />
        <asp:BoundField DataField="B" HeaderText="B" SortExpression="B" />
        <asp:BoundField DataField="C" HeaderText="C" SortExpression="C" />
    </Columns>
</asp:GridView>  

This GridView results in the problems I described in the introduction. Although, I really don't understand what could go wrong here, it simply doesn't work. If you compare the generated HTML for a GridView with a CommandButton of type Link and one of type Image, then you'll see that nothing is really different - except that once there will be only one request and once there will be two!

I spent some time Googling and found some workarounds. I assembled all the information that I found and show you in the following sections three workarounds along with their advantages and disadvantages.

Solution 1 - Use CommandButton of Type Link and Add the Image as HTML in the Link Text

This is the simplest workaround. I simply change the type of the CommandButton to be Link instead of Image and set the Text property to some HTML that will show the image:

ASP.NET
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:CommandField ShowSelectButton="True" 
            SelectText="<img src='Select.gif' border=0 title='This is a Tooltip'>">
        </asp:CommandField>
        <asp:BoundField DataField="A" HeaderText="A" SortExpression="A" />
        <asp:BoundField DataField="B" HeaderText="B" SortExpression="B" />
        <asp:BoundField DataField="C" HeaderText="C" SortExpression="C" />
    </Columns>
</asp:GridView>

This works great but has one disadvantage: the localization of the tooltip text gets difficult. The whole HTML string has to be added to the local resource, which isn't quite nice.

Solution 2 - Switch to TemplateFields

To get a solution that is better localizable, I delete the CommandField column and add a template column that contains an ImageButton. To get the same behaviour, the CommandName has to be set to "Select".

ASP.NET
<asp:GridView ID="GridView3" runat="server" AutoGenerateColumns="False" 
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField ShowHeader="false">
            <ItemStyle HorizontalAlign="Center" />
            <ItemTemplate>
                <asp:ImageButton ID="btnView" runat="server" 
                    CausesValidation="False" CommandName="Select"
                    ImageUrl="~/Select.gif" ToolTip="View" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="A" HeaderText="A" SortExpression="A" />
        <asp:BoundField DataField="B" HeaderText="B" SortExpression="B" />
        <asp:BoundField DataField="C" HeaderText="C" SortExpression="C" />
    </Columns>
</asp:GridView>

Custom Commands Sample

In order to get your custom commands to work, you can either use a ButtonField with ButtonType equal to Link and use the same trick to display the image as in solution 1 or use a template field as in solution 2. I prefer solution 2, but be sure that you include the CommandArgument in the definition, otherwise you won't have access to the row index.

The following sample shows this together with the approaches that do not work (see Tooltip for explanation as to what happens):

ASP.NET
<asp:GridView ID="GridView4" runat="server" AutoGenerateColumns="False" 
              DataSourceID="ObjectDataSource1" OnRowCommand="RowCommand">
    <Columns>
        <asp:ButtonField ButtonType="Image" CommandName="MyCommand1" 
                         ImageUrl="~/Select.gif"
                         Text="Double PostBack in IE7 (sometimes in IE6)" />
        <asp:TemplateField ShowHeader="False">
            <ItemStyle HorizontalAlign="Center" />
            <ItemTemplate>
                <asp:ImageButton ID="btnView" runat="server" CausesValidation="False"
                                 CommandName="MyCommand2"
                                 CommandArgument="<%# Container.DataItemIndex %>"
                                 ImageUrl="~/Select.gif" 
                                 ToolTip="Works! Preferred solution." />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:ButtonField ButtonType="Link" CommandName="MyCommand3" 
            Text="<img src='Select.gif' border=0 title='Works! But bad localizable.'>"
        />
        <asp:BoundField DataField="A" HeaderText="A" SortExpression="A" />
        <asp:BoundField DataField="B" HeaderText="B" SortExpression="B" />
        <asp:BoundField DataField="C" HeaderText="C" SortExpression="C" />         
    </Columns>
</asp:GridView>

Conclusion

There exists a problem in Internet Explorer that leads to multiple PostBacks when using a CommandButton with type Image. As long as this bug isn't fixed (or everybody uses FireFox;-)), we have to use some workarounds. In this article, I showed you three workarounds along with the scenario in which you can use them. In short: if you use template fields, you're always on the safe side.

If you have further information or other/better workarounds or even real solutions, then PLEASE post them below!!

History

  • 2007-08-09 Initial version
  • 2008-10-10 Changed template fields solution as proposed by Petr Behensky in his message post 

License

This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0


Written By
Architect bbv Software Services AG
Switzerland Switzerland
Urs Enzler is working for bbv Software Services in Switzerland as a Software Architect.

Blogger at planetgeek.ch

Comments and Discussions

 
AnswerSolution Pin
Zaibot22-Nov-10 5:57
Zaibot22-Nov-10 5:57 
GeneralRe: Solution Pin
Josep Mª15-Jan-14 2:36
Josep Mª15-Jan-14 2:36 
GeneralGenius Pin
Lechu8116-Nov-10 17:48
Lechu8116-Nov-10 17:48 
GeneralMy vote of 5 Pin
Jeff Allegi23-Oct-10 5:23
Jeff Allegi23-Oct-10 5:23 
GeneralA little problem with gridview Pin
Marcel OUEDRAOGO1-Apr-10 6:26
Marcel OUEDRAOGO1-Apr-10 6:26 
GeneralThanks Pin
Billy Camargo4-Mar-10 16:27
Billy Camargo4-Mar-10 16:27 
Generalthanks Pin
onurand20-Feb-10 6:27
onurand20-Feb-10 6:27 
GeneralRe: thanks Pin
Urs Enzler21-Feb-10 2:32
Urs Enzler21-Feb-10 2:32 
GeneralThank you very much Pin
mehdi_javan8-Nov-09 23:57
mehdi_javan8-Nov-09 23:57 
GeneralRe: Thank you very much Pin
Urs Enzler18-Nov-09 22:52
Urs Enzler18-Nov-09 22:52 
GeneralVery simple! Pin
jomree3-Nov-09 22:00
jomree3-Nov-09 22:00 
GeneralRe: Very simple! Pin
Urs Enzler18-Nov-09 22:53
Urs Enzler18-Nov-09 22:53 
GeneralThe Magic Pin
mhenrique15-Oct-09 8:05
mhenrique15-Oct-09 8:05 
GeneralAnother work around Pin
aida_dizdar7-Jun-09 22:21
aida_dizdar7-Jun-09 22:21 
GeneralDouble postback causes AJAX to hang Pin
JOZS26-Feb-09 22:06
JOZS26-Feb-09 22:06 
JokeThank you very much! Pin
zambizi9-Oct-08 1:18
zambizi9-Oct-08 1:18 
GeneralRe: Thank you very much! Pin
Urs Enzler10-Oct-08 12:37
Urs Enzler10-Oct-08 12:37 
Generaltemplate works well Pin
Petr Behensky29-Sep-08 23:05
Petr Behensky29-Sep-08 23:05 
GeneralRe: template works well Pin
Urs Enzler6-Oct-08 4:33
Urs Enzler6-Oct-08 4:33 
GeneralRe: template works well Pin
Urs Enzler9-Oct-08 2:41
Urs Enzler9-Oct-08 2:41 
GeneralMy fix Pin
Magnus_6-Aug-08 3:40
Magnus_6-Aug-08 3:40 
GeneralThanks Pin
H@is@here26-Jun-08 4:39
H@is@here26-Jun-08 4:39 
GeneralRe: Thanks Pin
Urs Enzler26-Jun-08 6:05
Urs Enzler26-Jun-08 6:05 
GeneralGreat Post! Pin
rk11384-Apr-08 11:56
rk11384-Apr-08 11:56 
GeneralRe: Great Post! Pin
Urs Enzler20-Jun-08 4:53
Urs Enzler20-Jun-08 4:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.