JQuery的：DIV回发上消失，除了

Question

一切都很正常，当事件火（btnSearch_click）控制（txtSubject，或日期或ddlStatus，要看是什么我从dropdonlist选择）消失......

这里我的代码...：

<script type="text/javascript"> 

     $(document).ready(function() { 

     $('.ddlFilter').change(function() { 

       var sel = $(this).val(); 

       $('#div_date').hide(); 
       $('#div_subject').hide(); 
       $('#div_status').hide(); 

       if (sel === 'Date') { 
        $('#div_date').show(); 
       } 
       else if (sel == 'Subject') { 
        $('#div_subject').show(); 
       } 
       else if (sel == 'Status') { 
        $('#div_status').show(); 
       } 
      }); 

     }); 

    </script> 



<div id="select"> 
      Filter Results by: 

      <asp:DropDownList CssClass="ddlFilter" ID="ddlFilterResultBy" 
         runat="server" Width="221px"> 
       <asp:ListItem Text="Select..." Value=""></asp:ListItem> 
       <asp:ListItem Text="Date" Value="Date"></asp:ListItem> 
       <asp:ListItem Text="Subject" Value="Subject"></asp:ListItem> 
       <asp:ListItem Text="Status" Value="Status"></asp:ListItem> 
      </asp:DropDownList> 

      </div> 
      <div id="holder"> 
      <div id="div_date" style="width: 250px; display: none;" class="sectionrowDate"> 
       Date Range: 

       <uc1:DatePicker ID="dpFromDate" runat="server" /> 
       <uc1:DatePicker ID="dpToDate" runat="server" /> 
      </div> 
      <div id="div_subject" style="display: none;" class="sectionrow"> 
       Subject: 
       <asp:TextBox ID="txtSubject" runat="server" Width="225px" SkinID="Picker"></asp:TextBox> 
      </div> 

      <div id="div_status" style="display: none;" class="sectionrow"> 
       Status: 

       <asp:DropDownList DataSourceID="ods_status" DataValueField="Id" DataTextField="Name" 
        AppendDataBoundItems="true" ID="ddlStatus" runat="server" Width="152px"> 
       </asp:DropDownList> 

      </div> 
      </div> 

      <asp:Button ID="btnSearch" Text="Search" runat="server" OnClick="btnSearch_Click" /> 
     </div> 

Answer 1

当你的btnSearch的click事件被触发，你正在做一个完整的回发回服务器。因此，您的ASPX页面将根据您在ASPX页面中定义的方式进行渲染。在这种情况下，div_date,div_status和div_subject被渲染为无显示。并且您的选择列表将重置为默认项目（这将是第一个ListItem）。

如果要保持相同的行为（完整回发），则需要在回发发生之前跟踪可见内容和选择内容。我对如何处理这个问题有几点想法。

您可能希望有一个隐藏的输入元素谁是你在你的JavaScript的.change()处理每个if {}语句设置值。如果该隐藏值设置为runat="server"，则可以在Page_Load期间更容易地在服务器上获取它的值，然后设置div的正确可见性（尽管除非您动态呈现它们，那么这些div也必须为runat="server"。）

<input type="hidden" id="hidCriteria" runat="server" /> 

和你的JavaScript将有...

$("#hidCriteria").val("DATE"); //or "STAT" or "SUBJ" depending on what's selected 

每个 if(sel == 'xxx')部分

，以跟踪什么是可见的。

我想你也可以改变你的div_date，div_status和div_subject asp：Panel's，我认为他们的状态（可见或不可见）将保持在视图状态并保留在回发中。我不是100％肯定的，但这可能是一个更容易的测试，在隐藏输入控制之前尝试。

别的东西要考虑的是，如果btnSearch点击事件是保持用户在同一页上，也许你可以在btnSearch的点击事件连接到一个jQuery的$.ajax()调用来完成一个异步发送到服务器做你的工作并通过回传保持你的用户界面不变。你可以这样做：如果

$("#btnSearch").click(function() { 
    $.ajax({ 
    url: 'myService.svc/DoSearch', //url you're posting to, 
    type: 'POST', 
    dataType: 'json', //up to you...could be 'xml', 'text', etc. 
    data: { 
     //your search criteria here 
    }, 
    ... 
    }); 
}); 

对不起，这是一种长。希望这可以帮助！