How can I run my Javascript OnClientClick and C# OnClick without postback?

Question

I have a div that acts as a popup in my master page called 'mydiv-clear'.
I have my main page content inside the div 'fade'.

I am able to successfully "popup" my div (change display from none to block) with Javascript OnClientClick if I use "return false;" in my OnClientClick to prevent postback (div goes back to display:none on postback).

I want to perform C# OnClick control for extra functionality within my popup. When I have return=false; in my OnClientClick I am not able to hit my C# OnClick code. When I remove return=false; my page is posted back and my display is back to display=none;. Solutions online suggested moving my button into an UpdatePanel control or to use UseSubmitBehaviour=false but neither of these have worked for me.

The below solution when I break through my code will fire my javascript (popup appears) cause a postback (popup disappears) and fire my C#. Can someone suggest a way to prevent postback and still fire C#? Thanks

.Net

<asp:Button ID="btnOptOut" OnClientClick="div_show();" UseSubmitBehavior="false" OnClick="btnOptOut_Click" CssClass="btn btn-default" runat="server" Text="Opt Out" />

C#

protected void btnOptOut_Click(object sender, EventArgs e)
            {

                try
                {

                    _dal.createOptOutRecord(_myuser.id, _myuser.EmailAddress);

                    //More functionality to go here

                }

                catch(Exception ex)
                {


                }
            }

Javascript

 function div_show() {
    document.getElementById('mydiv-clear').style.display = "block";
    document.getElementById('fade').style.opacity = ".1";
}

VDWWD VDWWD · Accepted Answer · 2016-08-30T11:04:17

Postback will always be executed on the button OnClick event. Even if it is in an UpdatePanel it will still do a (partial) postback. But an UpdatePanel can still work as long as the div is on the outside.

But there are multiple ways to keep the visibility of the div. First example uses RegisterStartupScript

    protected void btnOptOut_Click(object sender, EventArgs e)
    {
        //call the div_show() function again after postback
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "showDiv", "div_show()", true);
        //or set the visibility directly to the div after postback
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "showDiv", "document.getElementById('mydiv-clear').style.display = \"block\";", true);
    }

The second example uses a global variable.

    public string divVisibility = "none";
    protected void btnOptOut_Click(object sender, EventArgs e)
    {
        divVisibility = "block";
    }

and then in .aspx file

    <div id="mydiv-clear" style="display: <%= divVisibility %>">myDiv</div>

The third example with an UpdatePanel in the .aspx page.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel3" runat="server">
    <ContentTemplate>
        <asp:Button ID="btnOptOut" OnClientClick="div_show();" UseSubmitBehavior="false" OnClick="btnOptOut_Click" CssClass="btn btn-default" runat="server" Text="Opt Out" />
        <asp:Label ID="Label1" runat="server" Text="Does it work?"></asp:Label>
    </ContentTemplate>
</asp:UpdatePanel>

<div id="mydiv-clear" style="display: none">myDiv</div>

And then in code-behind.

    protected void btnOptOut_Click(object sender, EventArgs e)
    {
        Label1.Text = "Yes it does!";
    }

How can I run my Javascript OnClientClick and C# OnClick without postback?

1 Answers