隐藏和显示功能可不断刷新页面

Question

I'm trying to have a hide and show button Whenever i click on the button, it works but also refreshes the page at the same time. I'm not sure what is causing the refresh. This is on aspx:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function () {
    $("#buttontest").click(function () {
        $("#hello").toggle();
    });
});</script>

<button id="buttontest">test</button>
<div id="hello">hello</div>

Not sure if its the aspx.cs is causing the refreshing:

  protected void Page_Load(object sender, EventArgs e)
{
    SqlConnection myConnect = new SqlConnection(_connStr);
    acct = new Account();
    acct = (Account)Session["Account"];


    if (!IsPostBack)
    {

        LoadCart();
        DataBind();

        string strCommandText = "SELECT * From Customer where Cust_Id = @Cust_Id";

        SqlCommand cmd = new SqlCommand(strCommandText, myConnect);
        cmd.Parameters.AddWithValue("@Cust_Id", 1);

        //open connection and retrieve data by calling ExecuteReader
        myConnect.Open();
        SqlDataReader dr = cmd.ExecuteReader();

        if (dr.Read())
        {

            Lbl_FName.Text = dr["First_Name"].ToString();
            Lbl_LName.Text = dr["Last_Name"].ToString();
            Lbl_CNo.Text = dr["Contact_No"].ToString();
            string addr1 = dr["Address"].ToString();
            string addr2 = dr["Address2"].ToString();

            address = new List<string>();
            address.Add(dr["Address"].ToString() + " " + "Singapore " + dr["Postal_Code"].ToString());
            address.Add(dr["Address2"].ToString() + " " + "Singapore " + dr["Postal_Code"].ToString());
            //Ddl_Address.Text = dr["Address"].ToString() + " " + "Singapore " + dr["Postal_Code"].ToString();
            //Ddl_Address.Text = dr["Address2"].ToString() + " " + "Singapore " + dr["Postal_Code"].ToString();


            ddl_Addr.DataSource = address;
            ddl_Addr.DataBind();

        }
        dr.Dispose();
        dr.Close();
        myConnect.Close();


        //page load box retrieve
        SqlConnection myConnect2 = new SqlConnection(_connStr);
        string strCommandText2 = "SELECT * From Card_Details where Card_Id = @Card_Id";
        myConnect2.Open();
        SqlCommand cmd2 = new SqlCommand(strCommandText2, myConnect2);
        cmd2.Parameters.AddWithValue("@Card_Id", 1);

        ////open connection and retrieve data by calling ExecuteReader

        SqlDataReader dr2 = cmd2.ExecuteReader();


        if (dr2.Read())
        {

            CNo1 = dr2["Card_Number"].ToString();
            CNo2 = dr2["Card_Number2"].ToString();
            Session["CardNo1"] = CNo1;
            Session["CardNo2"] = CNo2;

            CNo = new List<string>();
            CNo.Add(CNo1);
            CNo.Add(CNo2);

            ddl_CNo.DataSource = CNo;
            ddl_CNo.DataBind();

            //display when first run
            Lbl_CardName.Text = dr2["Name_On_Card"].ToString();
            Lbl_CardType.Text = dr2["Card_Type"].ToString();
            Lbl_EDate.Text = dr2["Expired_Date"].ToString();

            dr2.Dispose();
            dr2.Close();

            myConnect2.Close();
        }

    }
}

protected void ddl_CNo_SelectedIndexChanged(object sender, EventArgs e)
{

    string cardNum1 = Session["CardNo1"].ToString();
    string cardNum2 = Session["CardNo2"].ToString();


     if (ddl_CNo.SelectedIndex == 0)
     {
         SqlConnection myConnect2 = new SqlConnection(_connStr);
         string strCommandText2 = "SELECT Name_On_Card, Card_Type, Expired_Date From Card_Details where Card_Number = @Card_Number";
         myConnect2.Open();
         SqlCommand cmd2 = new SqlCommand(strCommandText2, myConnect2);
         cmd2.Parameters.AddWithValue("@Card_Number", cardNum1);
         SqlDataReader dr2 = cmd2.ExecuteReader();

         if (dr2.Read())
         {
                Lbl_CardName.Text = dr2["Name_On_Card"].ToString();
                Lbl_CardType.Text = dr2["Card_Type"].ToString();
                Lbl_EDate.Text = dr2["Expired_Date"].ToString();
             }

             dr2.Dispose();
             dr2.Close();
             // DataBind();

             myConnect2.Close();
         }

     else if (ddl_CNo.SelectedIndex == 1)
     {
           SqlConnection myConnect3 = new SqlConnection(_connStr);
           string strCommandText3 = "SELECT Name_On_Card2, Card_Type2, Expired_Date2 From Card_Details where Card_Number2 = @Card_Number2";
         myConnect3.Open();
         SqlCommand cmd3 = new SqlCommand(strCommandText3, myConnect3);
         cmd3.Parameters.AddWithValue("@Card_Number2", cardNum2);
         SqlDataReader dr3 = cmd3.ExecuteReader();

         if (dr3.Read())
         {
                Lbl_CardName.Text = dr3["Name_On_Card2"].ToString();
                Lbl_CardType.Text = dr3["Card_Type2"].ToString();
                Lbl_EDate.Text = dr3["Expired_Date2"].ToString();
             }

             dr3.Dispose();
             dr3.Close();
             // DataBind();

             myConnect3.Close();
         }

     }



protected void LoadCart()
{

    gv_CartView.DataSource = ShoppingCart.Instance.Items;
    gv_CartView.DataBind();
    decimal total = 0.0m;
    foreach (ShoppingCartItem item in ShoppingCart.Instance.Items)
    {
        total = total + item.TotalPrice;
    }
    decimal a = 2.0m;
    decimal totalP = a + total;
    Lbl_Subtotal.Text = total.ToString("C");



    Lbl_TotalPrice.Text = totalP.ToString("C");


}

I'm still unfamiliar with all these, any help would be appreciated

EDIT: I've edited the button and javascript, it still caused a refresh

Answer 1

this looks like you might have button type as submit other wise this is not possible to happen

please make sure you added button as button not as submit button

Also please try to avoid

$("button").click(function () {

used specific button id

  $("#btn_toggle").click(function () {

And you can also do.. in case if your button type is submit but you need to do return false.

  $("#btn_toggle").click(function () {
            $("#hello").toggle();
            return false;
   });

but make sure this will stop submit your from at server.

Answer 2

Replace server button with html button. ie

Replace

<asp:Button />

With

<input type="button" />

OR

do this:

$("button").click(function () {
        $("#hello").toggle();
        return false;
    });

Answer 3

Try this 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function () {
    $("button").click(function () {

        $("#hello").toggle();
    });
});</script>

<button>hello</button>
<div id="hello">hello</div>