按钮搜索单击后，Div 切换消失

Question

我正在尝试用 jQuery 做一件简单的事情。

有一个名为 showDiv 的按钮可以显示或隐藏搜索 div，它运行良好。

但是在 div 中，我有文本和一个按钮来搜索，在我显示 div 之后，假设有人在 TextBox1 中输入了一些文本来搜索。

但是，如果我输入TextBox1 并单击searchButton，则 div 会进入隐藏位置。

我认为这是因为页面重新加载，但我不知道如何修复它。

这是我的代码：

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=showDiv.ClientID%>').click(function (evt) {
            $("#<%=myDiv.ClientID%>").slideToggle("slow");
            evt.preventDefault();
        });
    });
</script>


<asp:Button ID="showDiv" runat="server" Text="Show/Hide Div" />
<br />
<br />
<div id="myDiv" runat="server" style="display:none">
    <asp:Button ID="searchButton" runat="server" Text="Serach Button" />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>

Answer 1

更新：

注意：按钮searchButton不能有点击方法

<asp:Button ID="searchButton" runat="server" Text="Serach Button" />

---

添加一个临时按钮并通过将样式设置为 display:none 使其隐藏：

<asp:Button ID="btnInvisible" runat="server" style="display: none" 
    OnClick="btnInvisible_Click" />

在 jQuery 中：

<script src="../Scripts/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        $('#<%=searchButtin.ClientID%>').click(function (e) {
            $('#<%=btnInvisible.ClientID%>').click();
            e.preventDefault();
        });
    });

</script>

服务器端的点击方法：

protected void btnInvisible_Click(object sender, EventArgs e)
{
    //... code for searching...
}

Answer 2

如果你想使用asp控件，必须在服务器端管理回发和切换方法

在 showDiv 按钮上添加点击方法并编写此代码

<asp:Button ID="showDiv" runat="server" CssClass="showDiv" Text="Show/Hide Div" OnClick="showDiv_Click"/>

服务器端代码是

protected void showDiv_Click(object sender, EventArgs e)
    {

        if (myDiv.Style["Display"] == "none")
        {
            myDiv.Style["Display"] = "block";
        }
        else
        {
            myDiv.Style["Display"] = "none";
        }
    }

并且对于服务器端代码中的页面加载方法必须是

 protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack){
         myDiv.Style["Display"] = "none";
        }

    }

如果你必须使用 thr jquery 方法，最好使用 html 按钮并通过 jquery 管理它的显示

另一种方法是在搜索按钮单击方法中编写此代码

<asp:Button ID="searchButton"  runat="server" Text="Serach Button" OnClick="searchButton_Click" />

protected void searchButton_Click(object sender, EventArgs e)
    {

            myDiv.Style["Display"] = "block";

    }

并在页面加载方法中设置显示属性

protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack){
         myDiv.Style["Display"] = "none";
        }

    }