Unable to Call C# and Javascript simultaneously in Same OnClick/OnClientClick/OnServerClick Call Without a Page Refresh Using ASP Button Objects

Question

We are using ASP buttons, but the issue we're having is that the JavaScript never runs. We need the button clicks to be persistent, and the page not to reload. We've tried swapping OnClick, OnClientClick, OnServerClick assignments, JS vs C#.

<asp:Button CssClass="btn btn-primary" style="width:150px;Height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" ID="OSTAQ1Button1asp" runat="server" Text="Pass" OnClick="OSTAQ1Button1Click" OnServerClick="selectButton(this, 'pass');"/>           

C# runs but JavaScript never runs, and the page refreshes and we lose track of which buttons are clicked.

This is like a survey, users click buttons, 3 per question, and the buttons need to remain clicked in order to record the answer, which is handled by the JavaScript.

Answer 1

Keep in mind, that most changes made client side?

If you post-back to the server, then such changes are lost. They don't automatic persist. So, while client side code can say change to show, or hide some div?

Or client side code can modify the style of some control?

If you THEN post-back to the server, then these changes are lost! (since on post-back, the server will re-generate the WHOLE page again).

There are some exceptions. So, if client side changes a text box, or check box?

Then yes, the value of that control will persist.

Let's take a simple example here.

We will click on a button, change the style of the button, and show some div that is hidden.

Hence, here is our button, 100% client-side code for that button.

        <asp:Button ID="cmdTest" runat="server" Text="Client side code test"
            ClientIDMode="Static"
            OnClientClick="myclientcode(this);return false"
            CssClass="btn btn-dark"
            />
        <br />

        <div id="mywaitdiv" style="display:none">
            <h4>Processing - please wait</h4>
            <img src="../Content/wait2.gif" width="64" />
        </div>


        <script>
            function myclientcode(mybut) {

                $(mybut).attr("style", "background-color:lightblue")
                $('#mywaitdiv').show()

            }

        </script>

So, when we click on our button (no server side code, and note the return = false so the button does NOT post back).

The result is thus this:

Now, let's add a server side code to this button.

Hence, this:

        <asp:Button ID="cmdTest" runat="server" Text="Client side code test"
            ClientIDMode="Static"
            OnClientClick="myclientcode(this)"
            OnClick="cmdTest_Click"
            CssClass="btn btn-dark"
            />

Note closely how we removed the return = false, since we want the button to post to the server, and have our code behind run.

And our button click code behind is this:

    protected void cmdTest_Click(object sender, EventArgs e)
    {
        // fake a 1 second long running process.

        System.Threading.Thread.Sleep(1000);

        Button mybut = (Button)sender;
        mybut.Style.Add("background-color", "lightcoral");

    }

So, now, what will occur?

The client-side code will run, then the page is posted to the server. Client-side, we see the browser wait - and then when the server side code is done?

Then you get a full new fresh page from the server. And our "div" will automatic re-hide, since such settings don't persist. This is a VERY handy way to show a "please wait" for a button click that takes some time.

The result is this:

And, if we remove the delay? Then we probably not really see much of anything of the client side code, since the page is going to come back from the server in a rather short amount of time.

And what happens if I remove the server side change of color, say with this:

    protected void cmdTest_Click(object sender, EventArgs e)
    {
        // fake a 2 second long running process.

        System.Threading.Thread.Sleep(2000);
    }

The result is now this:

So, everything quite much reverts back to what it was before the post-back and round trip to the server.

So, in general, changes made to controls are lost after such "round trips" to the server, since the server re-builds the page from scratch each time.

However, if you make changes to the page (code behind server side), then such changes tend to persist.

Since you ARE wanting to have server side code run, then it makes sense to change the style of such buttons with code behind anyway.

As noted, for input controls, and their values (text box, checkbox, radio buttons etc.)?

Then a user can type in values, or client side JS code can change such controls, and in most cases the values changed for input will persist. However, for things like style, or using client side code to "inject" controls on a page? They will be lost, since such "things" are not part of the compiled "code behind" page class that .net generates and creates for that given page.

So, what happens if the server side code "delay" is now removed?

Like this:

    protected void cmdTest_Click(object sender, EventArgs e)
    {
        // fake a 2 second long running process.

        // System.Threading.Thread.Sleep(2000);
    }

Well, the code behind going to run rather fast.

So, now when we click on the button, we see this:

So, it going to flash by quite fast, since the server side code runs rather fast, and "little" time will exist for the client side changes to be seen, since they will fast be over written by the whole new fresh and re-generated page from the server.

I should point out that you can call server side code without a full page post back. This is what we call a web "end point" or so called AJAX call. So, again this might be a possible option, but it depends on what you want the server side code to do when that button is clicked? In other words, without us here knowing what the server side code is doing? Then we can't really determine, nor suggest using a AJAX call, since what you attempting to do server side is somewhat limited by using a AJAX call. However, as noted a AJAX call can run server side code and do so without a page post back.

So, keep in mind, your client side code may well be running, but depending on what the client side code changes? It may well not persist, and thus gives the illusion that such code did not run or work, when in fact the refresh of the page is un-doing the changes made client side, and thus that client side code will appear to not have run.

As pointed out, we need to know what your server side code is attempting to do here to suggest a correct solution in regards to how the client side code, and the server side code are to interact with each other. However, a basic grasp of the page life cycle, or so called "round trip" to the server is required when you start to combine client side code, and that of server side code.

So, one can combine such client + server side code, but then we need a explain of what your attempting here to determine if your goal going to work or even be possible. You might require a update panel (which does not post back the full page), or you may well require that the client side JS code calls some server side code without a post-back.

Answer 2

It seems that you are wrongly wired the events. In asp.net, the server side the button control specify the "serverside click event" using the property called "OnClick" and the client side event specified using "OnClientClick" attribute.

So, I have created a simple web form and the markup code in aspx like below:

     <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Button runat="server" ID="btnSubmit" OnClientClick="ClientClick();" Text="Click Me" OnClick="btnSubmit_Click" />
    </form>
    <script type="text/javascript" >
        function ClientClick() {
            alert('Button client click called..');
        }
    </script>
</body>
</html>

and the server side event handler in the aspx.cs file look like below:

  protected void btnSubmit_Click(object sender, EventArgs e)
  {
      Response.Write("Server side click called");
  }

It's working fine i.e., first client click called and then server side event has been called. Hope this helps!