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

Question

我想要一个隐藏和显示按钮每当我单击该按钮时，它都会起作用，但同时也会刷新页面。我不确定是什么导致刷新。这是在 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>

不确定是否是 aspx.cs 引起了刷新：

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


}

我对所有这些仍然不熟悉，任何帮助将不胜感激

编辑：我编辑了按钮 javascript，它仍然导致刷新

Answer 1

用 html 按钮替换服务器按钮。即

替换

<asp:Button />

有

<input type="button" />

或

这样做：

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

Answer 2

这看起来你可能有按钮类型作为提交，否则这是不可能发生的

请确保您将按钮添加为按钮而不是提交按钮

另外请尽量避免

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

使用了特定的按钮 ID

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

你也可以这样做..如果你的按钮类型是提交但你需要做 return false.

  $("#btn_toggle").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>

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

hide and show function keeps refreshing the page

html

javascript

jquery

show-hide

page-refresh