How can prevent postback page in the case of using both a JavaScript and a C# method on a button?

Question

This is an ASP.NET C# question.

    <script>
        function buttonfunc() {
            document.getElementById("demo").innerHTML = "js work";
        }
    </script>

    <form id="form1" runat="server">
        <div>
            <p id="demo"></p>
            <asp:Button ID="UpdateButton" runat="server" Text="Update"
             OnClick="UpdateButton_Click" OnClientClick="buttonfunc()"; return false;/>
        </div>
    </form>

        protected void UpdateButton_Click(object sender, EventArgs e)
        {
            Response.Write("cs work");
        }

In the case of using both a JavaScript and a C# method on a button, how can we stop postback page and display two lines of text at the same time (if possible, without using AJAX)?

Answer 1

The way this works is rather handy.

While that button can have both a client side event, and a server side event?

If the client side js code/event returns false, then the server side event will not trigger. This is ideal for say prompting a user to delete a record, or to perform some operation that you require a "confirm" for.

so, take this button:

        <asp:Button ID="cmdDel" runat="server" Text="Delete record"
            CssClass="btn"
            OnClick="cmdDel_Click"
            OnClientClick="return DelConfirm()" />

    <script>

        function DelConfirm() {

            return confirm("Really delete this reocrd?")

        }

    </script>

so, if the js code (client side) returns true, then server button click runs. If client side js code returns false, then server side button does not run.

You would see this for running above:

and display two lines of text at the same time

Hum, that is not clear what you goal here. What 2 lines are you looking to display here?

I mean, either you want/have the server side button event code run, or it does not. As noted, if you return false, then you should not be seeing a post-back. With your sample code, the return false should result in the server side button even NEVER running.

I mean, if you don't do a post-back, then it does not make sense that you can/will have the server side button code run. You require a post-back for this to occur.

Now, you might be able to live with a update panel, and that allows you to define ONLY that part of the web page that will travel up to the server, and run your code. From a user point of view, the page will not appear to have a post back (and you don't actually have a full page post back in this case). The brower scoll bar will not change postion, and you not see the browser "spinner" show a post-back.

So, you drag + drop in the script manager, and then inside of the update paneel, you would have this:

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>

                <asp:Button ID="cmdDel" runat="server" Text="Delete record"
                    CssClass="btn"
                    OnClick="cmdDel_Click"
                    OnClientClick="return DelConfirm()" />

                <script>

                    function DelConfirm() {

                        return confirm("Really delete this reocrd?")

                    }

                </script>


            </ContentTemplate>
        </asp:UpdatePanel>

Now, in your code exmaple, place everything inside of the content template, and remove your return false for the client side click. give it a try.

Now, some caution with above. The page life cycle DOES trigger. So, the page load event will fire (like it always does), and then your code stub will run. but to the user, you not see a full page post back. This is often called a "partial page" post-back.

Needless to say, to build a working web forms page, 99% of the time, your page load event that sets up values for controls and does things on the FIRST page load ONLY?

You have the,IsPost back stub in the page load event. so your REAL first time page load code only ever runs one time.

eg:

if (!IsPostBack) 
{
     // first time page load
     // load up grid, some combo boxes etc.
     // this code only runs ONE time, on first page load
}