2 buttons in the same position. Display at different times!!

Question

Is it possible to place two buttons in the same position in an aspx page. Depending on some condition, it has to display one among them.

<asp:ImageButton ID="btnapply" ImageUrl="../images/apply.gif" runat="server"
    ImageAlign="Right" OnClick="imgApply_Click" ValidationGroup="0" />
<asp:ImageButton ID="btnremove" ImageUrl="../images/remove.gif" runat="server"
    ImageAlign="Right" OnClick="imgremove_Click" ValidationGroup="0" />

Answer 1

Sure. Put them each in a DIV, and hide/show those DIVs as appropriate. To expand a little:

<div id="button1" style="display:none">Button 1 goes here</div>
<div id="button2" style="display:block">Button 2 goes here</div>

And then you can toggle the display with a bit of Javascript:

function showHide() {
  if (document.getElementById("button1").style.display == "none")) {
    document.getElementById("button1").style.display = "block";
    document.getElementById("button2").style.display = "none";
  } else {
    document.getElementById("button1").style.display = "none";
    document.getElementById("button2").style.display = "block";
  }
}

Answer 2

Why not use one button and change the text and action based on the said condition?

Answer 3

Option 1: If you can make the decision as the page is rendered, i.e. server-side:

In your code-behind:

protected void Page_Load()
{
  if (variableToSwitchOn == true)
  {
    button1.Visible = true;
    button2.Visible = false;
  }
  else
  {
    button1.Visible = false;
    button2.Visible = true;
  }
}

In your .aspx page:

<div>
  <asp:button runat="server" ID="button1" Text="Button 1" />
  <asp:button runat="server" ID="button2" Text="Button 2" />
</div>

Option 2: If you need to make the decision client-side

In your .aspx page:

<div>
  <asp:button runat="server" ID="button1" Text="Button 1" />
  <asp:button runat="server" ID="button2" Text="Button 2" />
</div>
<script language="javascript" type="text/javascript">
    var button1Id = '<%=button1.ClientId%>';
    var button2Id = '<%=button2.ClientId%>';
</script>

You can now have a piece of javascript that controls whether the buttons are visible, for example:

function ChangeWhichButtonIsVisible()
{
    var button1 = document.getElementById(button1Id);
    var button2 = document.getElementById(button2Id);
    if (someCondition == true)
    {
        button1.style.display = 'none';
        button2.style.display = 'block';   
    }
    else
    {
        button1.style.display = 'block';
        button2.style.display = 'none';   
    }
}

Answer 4

Instead of using two buttons change the properties of the button based on the condition in the code behind or do the same in the Client side with CSS/Java Scripting.