前台div被js修改了display，回传后修改被取消了

[我坑我低着头]

我想模仿知网的搜索做一个类似的搜索框，效果看链接：
http://epub.cnki.net/KNS/brief/result.aspx?dbprefix=CJFQ


我用jQuery实现了每次可以增加和减少额外的搜索框，但是在ASP.NET的button控件后，发生了回传，被jQuery修改而显示出来的搜索框又隐藏起来了。

jQuery函数：

        $(document).ready(function () {
            $("#show").click(function () {
                $("div").children(".moreSearchBar:hidden:first").css("display", "block");
            });

            $("#hid").click(function () {
                $("div").children(".moreSearchBar:visible:last").children("input").val("");
                $("div").children(".moreSearchBar:visible:last").css("display", "none");
            });
        });

隐藏搜索框的样式

    .moreSearchBar
    {
        display:none;  
    }

页面代码：

    <div>
        
        <input id="show" type="button" value="+" />
        <input id="hid" type="button" value="-" />

        <asp:Button ID="Button1" runat="server" Text="搜索" onclick="Button1_Click" 
            ViewStateMode="Enabled" />

        

    </div>
    <div>
        <asp:Panel ID="Panel1" runat="server" CssClass="moreSearchBar"  >
        
            <asp:DropDownList ID="DropDownList3" runat="server">
                <asp:ListItem>1</asp:ListItem>
                <asp:ListItem>2</asp:ListItem>
            </asp:DropDownList>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:DropDownList ID="DropDownList1" runat="server">
                <asp:ListItem>1</asp:ListItem>
                <asp:ListItem>2</asp:ListItem>
            </asp:DropDownList>
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            <asp:DropDownList ID="DropDownList2" runat="server">
                <asp:ListItem>1</asp:ListItem>
                <asp:ListItem>2</asp:ListItem>
            </asp:DropDownList>
            <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>

        </asp:Panel>
        
        <asp:Panel ID="Panel2" runat="server" CssClass="moreSearchBar"  >
            <asp:DropDownList ID="DropDownList4" runat="server">
                <asp:ListItem>1</asp:ListItem>
                <asp:ListItem>2</asp:ListItem>
            </asp:DropDownList>
            <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
            <asp:DropDownList ID="DropDownList5" runat="server">
                <asp:ListItem>1</asp:ListItem>
                <asp:ListItem>2</asp:ListItem>
            </asp:DropDownList>
            <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
            <asp:DropDownList ID="DropDownList6" runat="server">
                <asp:ListItem>1</asp:ListItem>
                <asp:ListItem>2</asp:ListItem>
            </asp:DropDownList>
            <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>
        
        </asp:Panel>
        
        
        <asp:Panel ID="Panel3" runat="server" CssClass="moreSearchBar"  >
            <asp:DropDownList ID="DropDownList7" runat="server">
                <asp:ListItem>1</asp:ListItem>
                <asp:ListItem>2</asp:ListItem>
            </asp:DropDownList>
            <asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
            <asp:DropDownList ID="DropDownList8" runat="server">
                <asp:ListItem>1</asp:ListItem>
                <asp:ListItem>2</asp:ListItem>
            </asp:DropDownList>
            <asp:TextBox ID="TextBox9" runat="server"></asp:TextBox>
            <asp:DropDownList ID="DropDownList9" runat="server">
                <asp:ListItem>1</asp:ListItem>
                <asp:ListItem>2</asp:ListItem>
            </asp:DropDownList>
            <asp:TextBox ID="TextBox10" runat="server"></asp:TextBox>
        
        </asp:Panel>
        
        
        <asp:Panel ID="Panel4" runat="server" CssClass="moreSearchBar"  >
            <asp:DropDownList ID="DropDownList10" runat="server">
                <asp:ListItem>1</asp:ListItem>
                <asp:ListItem>2</asp:ListItem>
            </asp:DropDownList>
            <asp:TextBox ID="TextBox11" runat="server"></asp:TextBox>
            <asp:DropDownList ID="DropDownList11" runat="server">
                <asp:ListItem>1</asp:ListItem>
                <asp:ListItem>2</asp:ListItem>
            </asp:DropDownList>
            <asp:TextBox ID="TextBox12" runat="server"></asp:TextBox>
            <asp:DropDownList ID="DropDownList12" runat="server">
                <asp:ListItem>1</asp:ListItem>
                <asp:ListItem>2</asp:ListItem>
            </asp:DropDownList>
            <asp:TextBox ID="TextBox13" runat="server"></asp:TextBox>
       
        </asp:Panel>
    </div>

点击button后，只是那些被显示出来的搜索框的display又变成了none，但是之前输入的东西都还在，现在一直在纠结这个东西啊，求大家帮忙

[以专业开发人员为伍]

引用 楼主 l1170486003 的回复:

点击button后，只是那些被显示出来的搜索框的display又变成了none，但是之前输入的东西都还在，现在一直在纠结这个东西啊，求大家帮忙

这个不要再去纠结了。 轻量级的 ajax 跟 asp.net 本质上就是不容的。asp.net 是基于“一遍遍刷新页面”的架构来处理状态、事件的，而轻量级的 ajax 都是假设浏览器端单个页面就是一个富客户端的完整程序（刷新页面相当于重新启动新的富客户端程序），因此 asp.net 中不能过度使用 ajax。反过来说，如果你精通 ajax，那么应该认识到 asp.net 的所有产生页面的功能你都不需要了。 如果你为了开发效率（而非运行效率）而使用 asp.net，就无法很好地使用最近5年的 ajax 框架。

[moonwrite]

你是用js修改了客户端的显示 而没有修改服务端的

[娃都会打酱油了]

最近好多这样js修改了后，回发后端的问题……

[我坑我低着头]

引用 1 楼 sp1234 的回复:

轻量级的 ajax 跟 asp.net 本质上就是不容的。asp.net 是基于“一遍遍刷新页面”的架构来处理状态、事件的，而轻量级的 ajax 都是假设浏览器端单个页面就是一个富客户端的完整程序（刷新页面相当于重新启动新的富客户端程序），因此 asp.net 中不能过度使用 ajax。反过来说，如果你精通 ajax，那么应该认识到 asp.net 的所有产生页面的功能你都不需要了。

谢谢你的解释，你的意思是让我放弃asp.net技术来开发网站么？如果我不用asp.net来写网页，那我为什么要来asp.net这个版块来发帖呢？你觉得asp.net的功能都不需要了，那你还来asp.net这个版块解答其他人的问题干什么？抱歉我不精通ajax，所以写出这么个功能来，希望你能帮忙出出主意，解决一下这个问题，而不是说什么好什么不好。

[我坑我低着头]

引用 3 楼 starfd 的回复:

最近好多这样js修改了后，回发后端的问题……

我只找到一篇啊，而且还没有值得一试的解决办法，你有么，分享下，谢谢啦。

[我坑我低着头]

引用 2 楼 moonwrite 的回复:

你是用js修改了客户端的显示 而没有修改服务端的

那我该怎么把服务器端的也修改了呢？