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

Question

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

有一个名为showDiv的按钮可以显示或隐藏搜索div，并且可以正常工作。

但是在div中，假设有人在TextBox1键入了一些文本进行搜索，则在显示div之后，我有文本和一个按钮可以搜索。

但是，如果我键入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不得具有click方法

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

---

添加一个临时按钮，并通过将样式设置为显示来使其隐藏：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>

服务器端的Click方法：

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

    }