单击按钮搜索后，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控件必须管理服务器端的回发和切换方法

将click方法添加到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";
        }

    }

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

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

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

protected void searchButton_Click(object sender, EventArgs e)
    {

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

    }

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

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

    }