How to avoid page refresh after button click event in asp.net

Question

This is the following code the page refreshes as soon as the btninsert click event is completed i want to stop the page refresh after the btninsert is click

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

    <ContentTemplate>


        <div style="margin-bottom: 20px; margin-top: 20px;"><span><strong style="font-size: large;">Edit User</strong></span></div>
        <div>
            <span style="float: left; width: 50%;">&nbsp;</span> <span style="float: left; width: 50%;">
                <span style="width: 100%; float: left; text-align: right;">
                    <asp:Label ID="lblMessage" runat="server" Text="-"></asp:Label></span>
            </span>
        </div>

        <div style="width: 100%; float: left;">
            <hr />
        </div>


        <div style="width: 816px; margin-left: 5px; margin-top: 20px; height: 463px;">

            <div style="width: 100%; float: left; padding-top: 15px; height: 257px; margin-left: 0px;">
                <span class="Divide">
                    <span class="simDivide1">FullName</span>
                    <span class="simDivide">
                        <asp:TextBox ID="txtfullname" runat="server" Width="180px">
                        </asp:TextBox>
                    </span>


                </span>
                <span class="Divide">
                    <span class="simDivide1"></span>
                    <span class="simDivide"></span>
                </span>


                <span class="Divide">
                    <span class="simDivide1">Username</span>
                    <span class="simDivide">
                        <asp:TextBox ID="txtusername" runat="server" Width="180px">
                        </asp:TextBox>
                    </span>
                </span>

                <span class="Divide">
                    <span class="simDivide1"></span>
                    <span class="simDivide"></span>
                </span>

                <span class="Divide">
                    <span class="simDivide1">Password</span>
                    <span class="simDivide">
                        <asp:TextBox ID="txtpassword" runat="server" Width="180px">
                        </asp:TextBox>
                    </span>
                </span>

                <span class="Divide">
                    <span class="simDivide1"></span>
                    <span class="simDivide"></span>
                </span>


                <span class="Divide">
                    <span class="simDivide1">Mobile No
                    </span>
                    &nbsp;<span class="simDivide"><asp:TextBox ID="txtmobileno" runat="server" Width="180px">
                    </asp:TextBox>
                    </span>
                </span>

                <span class="Divide">

                    <span class="simDivide"></span>
                </span>


                <span class="Divide">
                    <span class="simDivide1">Role
                    </span>
                    &nbsp;<span class="simDivide"><asp:TextBox ID="txtrole" runat="server" Width="180px">
                    </asp:TextBox>
                    </span>
                </span>



                <script src="jquery-2.0.2.js"></script>

                <script language="javascript">

                    function done() {
                        var list = document.getElementById("tid");
                        list.removeChild(list.lastChild);


                    }


                    function changecourse(e) {

                        var change = document.getElementById('mytext').value;
                        var i = 1;

                        mNewObj = document.createElement('div');
                        mNewObj.id = "BOX" + i;
                        mNewObj.style.visibility = "show";
                        mNewObj.innerHTML = change + "&nbsp<a href='#' style='text-decoration: none; color:red' onClick='done()'> x </a> ";


                        document.getElementById("tid").appendChild(mNewObj);
                        i++
                        var a = document.getElementById('mytext').selectedIndex;
                        document.getElementById("ContentPlaceHolder1_Hidden1").value = a;
                        //document.getElementById("ContentPlaceHolder1_btninsert").click();

                        deleted();




                    }

                    function yes() {

                        $("#ContentPlaceHolder1_btninsert").click();

                    }


                    //function insert() {

                    //    $.ajax({
                    //        type: "POST",
                    //        url: "Edituser.aspx.cs/insert",

                    //        success: function () { alert('success'); },
                    //        error: function () { alert('error'); }

                    //    });


                    //}


                    function cancel() {

                        var select = document.getElementById('mytext');
                        select.remove(select.selectedIndex);
                    }


                    function deleted() {

                        document.getElementById("mytext").style.display = 'none';
                        document.getElementById("Button1").style.display = 'none';
                        document.getElementById("tid").style.display = 'inline';
                        document.getElementById("mylink").style.display = 'inline';
                    }



                    function showdiv() {

                        document.getElementById("mylink").style.display = 'none';
                        document.getElementById("mytext").style.display = 'inline';
                        document.getElementById("Button1").style.display = 'inline';


                    }


                </script>



            <input id="Hidden1" type="hidden" runat="server" />
            </div>
            <asp:Button ID="btnUpdate" runat="server" OnClick="btnUpdate_Click" Style="margin-left: 5px" Text="Edit" Width="39px" />
            <br>
            <br>

            <asp:UpdatePanel runat="server">
                <ContentTemplate>
           &nbsp&nbsp&nbsp&nbsp<div id="tid" >
                               </div>
            <div id="di">

                <a id="mylink" onclick="showdiv()">Add Depot</a>

                <select id='mytext' name='mytext' style="display: none">
                    <option>--Select--</option>
                    <option>Mumbai</option>
                    <option>Delhi</option>
                    <option>Banglore</option>
                    <option>Ahmedabad</option>
                </select>
               <input type="button" id="Button1" style="display: none" onclick=" changecourse(); yes(); cancel(); return false;" value="add" />
                </div>
            <asp:Button ID="btninsert" runat="server"  Style="display: none" OnClick="btninsert_Click" Text="Insert" ValidationGroup="C" />

                </ContentTemplate>
                </asp:UpdatePanel>
             </ContentTemplate>
</asp:UpdatePanel>

and this is Edit.aspx.cs in which i have method

    protected void btninsert_Click(object sender, EventArgs e)
    {
        string a = Hidden1.Value;
        string UserId = Convert.ToString(Session["LoginId"]);
        con.Open();
        SqlCommand cmd = new SqlCommand("INSERT INTO UserDepot (UserId,DepotId)" +
            "VALUES ('" + UserId + "','" + a + "')", con);
        cmd.ExecuteNonQuery();
        con.Close();


    }

Why do you want to stop page refresh??? If you do that, then ur SqlCommand won't get executed... Are you trying to maintain the values of the page or what? — Viral Jain, Jan 24 '14 at 05:54

score 22 · Answer 1 · answered Jan 24 '14 at 05:53

22

Add OnClientClick="return false;" ,

<asp:button ID="btninsert" runat="server" text="Button" OnClientClick="return false;" />

or in the CodeBehind:

 btninsert.Attributes.Add("onclick", "return false;");

answered Jan 24 '14 at 05:53

zey

5,803
14
53
100

1

It will not call the function as well. – Zeeshan Ahmad Khalil Aug 26 '20 at 12:15
1

This works.Should be marked as solution. However, for reducing confusion the example should include the function too: – NegativeFeedbackLoop Oct 08 '20 at 09:00

score 9 · Answer 2 · edited Jan 24 '14 at 06:01

9

As you are using asp:Button which is a server control, post back will happen to avoid that go for html button,

asp:Button .... />

Type to

input type="button" .... />

edited Jan 24 '14 at 06:01

Derek 朕會功夫

88,688
41
174
241

answered Jan 24 '14 at 05:47

M.K

218
3
10

mnshahab · Answer 3 · 2014-01-24T23:23:45.947

if you have some codes in your Page_Load method and you don't want that those execute after button click use if(!IsPostBack) on Page_Load

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
       // put codes here
    }
}

asp:Button is a server control and for send request to server and get response need page refresh. You can use JQuery and Ajax to prevent full Page refresh

score 5 · Answer 4 · answered Jan 24 '14 at 05:47

5

Page got refreshed when a trip to server is made, and server controls like Button has a property AutoPostback = true by default which means whenever they are clicked a trip to server will be made. Set AutoPostback = false for insert button, and this will do the trick for you.

answered Jan 24 '14 at 05:47

Zeeshan Ajmal

880
1
15
29

Frankly button with AutoPostback = false is frozen i.e. it cannot do anything unless u decide to send an Ajax call inside its click event. Please check that your button is inside another server control? If it is then that control will be responsible for page refreshes. – Zeeshan Ajmal Jan 24 '14 at 07:00

score 3 · Answer 5 · edited Oct 06 '14 at 13:24

3

Set MaintainScrollPositionOnPostBack="true" in the page declaration:

<%@ Page Language="C#" MaintainScrollPositionOnPostBack="true" Title="Home" %>

edited Oct 06 '14 at 13:24

arserbin3

5,812
8
33
52

answered Oct 06 '14 at 13:03

Muhammad Ahmad

47
3

9

OP stated they wanted to stop page refresh, not to remember the scroll position. Why is this being suggested? – Kritner Oct 06 '14 at 13:10

score 1 · Answer 6 · edited Aug 26 '16 at 11:39

1

I think I also have this problem, I was trying to make calendar visible after clicking a button but the page keeps refreshing after clicking the button

MaintainScrollPositionOnPostBack="true"

This actually answered my problem.

I cant vote or comment, I just joined SO today

edited Aug 26 '16 at 11:39

Ahmad

5,194
8
41
55

answered Dec 23 '14 at 07:48

Elijah Ignacio

11
1

5

this is not an answer – JSK NS Dec 23 '14 at 07:55
1

Set MaintainScrollPositionOnPostBack="true" in the page declaration: this was already suggested i tried it and it worked – Elijah Ignacio Dec 23 '14 at 08:01
1

However it was not an answer to the question as the page still refreshes – M_Griffiths Jan 17 '18 at 12:30

score 0 · Answer 7 · answered Nov 13 '19 at 08:38

I had the same problem with a button doing a page refresh before doing the actual button_click event (so the button had to be clicked twice). This behavior happened after a server.transfer-command (server.transfer("testpage.aspx").

In this case, the solution was to replace the server.transfer-command with response-redirect (response.redirect("testpage.aspx").

For details on the differences between the two commands, see Server.Transfer Vs. Response.Redirect

score -1 · Answer 8 · edited Dec 18 '14 at 09:45

-1

html

 "input type ="text" id="txtnothing" runat ="server" "

javacript

var txt = document.getElementById("txtnothing");
        txt.value =  Date.now();

code

 If Not (Session("txtnothing") Is Nothing OrElse String.IsNullOrEmpty(Session("txtnothing"))) Then
            If Session("txtnothing") = txtnothing.Value Then
                lblMsg.Text = "Please try again not a valid request"
                Exit Sub
            End If
        End If
        Session("txtnothing") = txtnothing.Value

edited Dec 18 '14 at 09:45

shivam

15,367
3
51
68

answered Dec 18 '14 at 09:16

robin

7
1

1

Please park your code as such with Ctrl+K. It will make it easier to read and understand. – Kelevandos Dec 18 '14 at 09:20

score -1 · Answer 9 · answered Aug 21 '20 at 18:42

After button click event complete your any task...last line copy and past it...Is's Working Fine...C# in Asp.Net

Page.Header.Controls.Add(new LiteralControl(string.Format(@" <META http-equiv='REFRESH' content=3.1;url={0}> ", Request.Url.AbsoluteUri)));

score -2 · Answer 10 · edited Nov 29 '16 at 19:11

-2

When one has to scroll down a gridview to select a row, MaintainScrollPositionOnPostBack="true" will make it continue to show that row after one has selected it.

edited Nov 29 '16 at 19:11

FelixSFD

5,810
10
43
111

answered Nov 29 '16 at 19:10

Jon Boy

9
1

3

This answer does not prevent a page refresh, nor does it provide anything new outside of two other answers with this exact same bit of code. – silentsod Nov 29 '16 at 19:22

How to avoid page refresh after button click event in asp.net

10 Answers10

Linked