How to prevent postback from asp.net linkbutton

Question

ASP:

<asp:LinkButton ID="lbSave" OnClick="lbSave_Click" runat="server">Save</asp:LinkButton>

HTML:

<a id="ContentMain_lbSave" href="javascript:__doPostBack(&#39;ctl00$ContentMain$lbSave&#39;,&#39;&#39;)">Save</a>

Code-behind:

public void lbSave_Click(object sender, EventArgs e)
    {
        if (strP != "")
        {
            ScriptManager.RegisterStartupScript(this.Page, typeof(Page), "DiffUser", "showDiffUser();", true);
        }
        else
        {
            //do something else...
        }
    }

JQuery:

function showDiffUser() {
    $("#dvHide").fadeIn("slow");
    $("#backOverlay").fadeIn("slow");
}

When I click the button, I want the page to not do a postback and run the JQuery function. Instead, when I click the link it refreshes the page and then executes the JQuery function.

How can I prevent the postback.

I tried the following: onClientClick='javascript:void(0);' but that doesn't execute the JQuery function.

Solution 1

try

OnClientClick="return false;"

UPDATE:

OnClientClick="showDiffUser();return false;"

showDiffUser(); calls the JS-Method

return false; prevents postback

Solution 2

You only add your jQuery function call to the page after button is clicked. Of course if you suppress the click postback the function call never gets to the page and never gets executed.

What you want though to is to call this function and then suppress, right? Therefore do this:

OnClientClick="showDiffUser(); return false;"

And you do not need the server-side click handler anymore.

Solution 3

If you don't want to cause a postback don't use a .Net LinkButton, use a standard HTML hyperlink instead and use jQuery to capture the event:

<a id="my-link">Save</a>

<script>
$(function () {
   $("#my-link").click(function () {
      showDiffUser();
   });
})
</script>

In the same call, you could do an AJAX call to raise your server-side validation:

<script>
$(function () {
   $("#my-link").click(function () {
      // AJAX Call
        $.ajax({
            type: "post",
            url: "your-url",
            success: function (returnData) {
                showDiffUser();
            }
        });
   });
})
</script>

Comments

[SearchForKnowledge]

I tried that but when I click the link, nothing happens.

[SearchForKnowledge]

Thank you for the response. I need to have the server side call as shown in the updated question. Please advise.

[SearchForKnowledge]

Thank you. I left out some information and updated my question. I have to call the function through the code-behind because I am doing if/else checking.

[fubo]

when you want to do something serverside you need a postback or ajax

[Andrei]

@SearchForKnowledge, emm, a bit confused now. So do you want to disable postback completely or not? As it currently stands you want it to happen sometimes, but not always.

[SearchForKnowledge]

So when the page loads, strP is assigned a value. if it is blank then execute JQuery otherwise do not execute. the strP is a server side variable. I know I am confusing the question.

[SearchForKnowledge]

The server side needs to be execute to retrieve a variable value. That is my issue unfortunately :/

[SearchForKnowledge]

That sounds like a good idea. Please give me some info to start with :) Thank you.

[Matt]

I've edited to include an AJAX call where you can pass your variable back. Failing that you could always wrap the LinkButton in an UpdatePanel to supress the postback

[SearchForKnowledge]

So how do I change the linkbutton code and the code-behind? Thank you btw for the clarification.

[fubo]

this post seem to fit your needs stackoverflow.com/questions/18236634/…