CODEWITHSUNDEEP
c#asp.nethtml
challengeAccepted
challengeAccepted

Reputation: 7600

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

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" />

Upvotes: 1

Views: 2129

Answers (4)

Nash
Nash

Reputation: 531

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.

Upvotes: 0

David Knell
David Knell

Reputation: 764

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

Upvotes: 0

Rob
Rob

Reputation: 45771

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

Upvotes: 3

nportelli
nportelli

Reputation: 3916

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

Upvotes: 1

Related Questions