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的{{1}}事件被触发时，您正在回发到服务器。因此，您的ASPX页面将根据您在上面的ASPX页面中定义的方式进行渲染。在这种情况下，click，div_date和div_status会以无显示的方式呈现。您的选择列表将重置为默认项目（这将是第一个ListItem）。

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

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

Page_Load

你的JavaScript会......

runat="server"

在每个<input type="hidden" id="hidCriteria" runat="server" />部分中，以便跟踪可见内容。

我认为您也可以将div_date，div_status和div_subject更改为asp：Panel，我认为他们的状态（可见或不可见）将保存在viewstate中并保留在回发中。我不是百分之百确定，但在隐藏的输入控件之前，这可能是一个更容易测试的尝试。

要考虑的其他事项是，如果$("#hidCriteria").val("DATE"); //or "STAT" or "SUBJ" depending on what's selected点击事件是让用户保持在同一页面，也许你可以将btnSearch的点击事件连接到jQuery if(sel == 'xxx')调用以执行异步发布到服务器来完成你的工作，并通过回发保持你的UI不受影响。你可以这样做：

btnSearch

对不起，如果这有点长。希望这有帮助！

JQuery：div在回发时消失了

1 个答案: