4

My idea is when the user isn't loged in he won't be able to add an item to the shopping cart, so what I did is like so:

<asp:Button ID="BTNAddToCart" runat="server" Text="Add to cart" class="btn btn-info btn-lg" style="display: inline; margin: auto; display: block; visibility: hidden;"  OnClick="BTNAddToCart_Click" />

And then on code behind:

if (Session["User"] == null)
{
    BTNAddToCart.Attributes["class"] = "btn btn-info btn-lg disabled";
    BTNAddToCart.Attributes.Add("title", "Error");  
    BTNAddToCart.Attributes.Add("data-toggle", "popover");
    BTNAddToCart.Attributes.Add("data-trigger", "hover");
    BTNAddToCart.Attributes.Add("data-placement", "bottom");
    BTNAddToCart.Attributes.Add("data-content", "You must be loged in to add items to the cart");  
}

As You can see, by using Bootstrap I gave the button the look which he can't be clicked, but in reality He is still clickable.

So I thought that mabey if I will disable the button postback it will really be not clickable.

How can I disable the button postback?

I have tried:

<asp:Button ID="BTNAddToCart" runat="server" Text="Add to cart" class="btn btn-info btn-lg" style="display: inline; margin: auto; display: block; visibility: hidden;" OnClientClick="BTNJavaScriptClick()" OnClick="BTNAddToCart_Click" />



<script>  

function BTNJavaScriptClick()
{
    var ButtonAdd = document.getElementById("BTNAddToCart");
    if (ButtonAdd.className == "btn btn-info btn-lg disabled") 
        return false;
}

 </script>

I even tried BTNAddToCart.Enabled = false; and it worked but it made my popover disapper.

harel486
  • 183
  • 1
  • 1
  • 13

2 Answers2

3

You can simple set Enable asp.net attribute to false and the button will not post back. 

BTNAddToCart.Enabled = false;

When an element is disabled you can use the disabled style on css to give him the desired look. Here is a simple example:

input:disabled {
    background: #444;
}

relative to that: Styling a disabled input with css only

Community
  • 1
  • 1
Aristos
  • 66,005
  • 16
  • 114
  • 150
  • One more thing, by doing that it cancelled the "style" I gave the button (The popover) how can I make both oh them work? – harel486 Jul 03 '16 at 10:35
  • @harel486 see the style with the :disabled on css http://www.w3schools.com/cssref/sel_disabled.asp and please vote and accept the answer if works for you – Aristos Jul 03 '16 at 10:53
  • The thing is after puting the `BTNAddToCart.Enabled = false;` I can't change class via code behind... – harel486 Jul 03 '16 at 11:35
  • @harel486 Yes you can, but because is disabled is follow some other set on the css. Just let the class as it is to see what is happens - bootstrap have take care of the disabled elements – Aristos Jul 03 '16 at 11:44
  • Can you show me how by writing a bit of the css code? I want the popover to work if the `BTNAddToCart.Enabled = true;` – harel486 Jul 03 '16 at 13:09
  • @harel486 I have write you and a sample and give you 2 links. In bootstrap is little more difficult to make it work, but try and you find it – Aristos Jul 03 '16 at 15:32
1

If you want the button to react when the mouse is over it (e.g. show a tooltip) while not triggering a postback when clicked, you can:

  • Keep the button enabled
  • Show the button as disabled with the BootStrap style
  • Prevent the postback by returning false in OnClientClick
  • Prevent the button from getting the focus

The code would look like this:

if (Session["User"] == null)
{
    BTNAddToCart.CssClass = "btn btn-info btn-lg disabled";
    BTNAddToCart.OnClientClick = "return false;";
    BTNAddToCart.Attributes.Add("onfocus", "this.blur();");
    ...
}
ConnorsFan
  • 70,558
  • 13
  • 122
  • 146