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();


    }

Solution 1

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;");

Solution 2

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" .... />

Solution 3

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

Solution 4

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.

Solution 5

Set MaintainScrollPositionOnPostBack="true" in the page declaration:

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

View more solutions

Comments

[Viral Jain]

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?

[Zeeshan Ajmal]

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.

[Kritner]

OP stated they wanted to stop page refresh, not to remember the scroll position. Why is this being suggested?

[Kelevandos]

Please park your code as such with Ctrl+K. It will make it easier to read and understand.

[JSK NS]

this is not an answer

[Elijah Ignacio]

Set MaintainScrollPositionOnPostBack="true" in the page declaration: <%@ Page Language="C#" MaintainScrollPositionOnPostBack="true" Title="Home" %> this was already suggested i tried it and it worked

[silentsod]

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.

[M_Griffiths]

However it was not an answer to the question as the page still refreshes

[Zeeshan Ahmad Khalil]

It will not call the function as well.

[NegativeFeedbackLoop]

This works.Should be marked as solution. However, for reducing confusion the example should include the function too: <asp:button ID="btninsert" runat="server" text="Button" onClick = "{Your function goes here}" OnClientClick="return false;" />