回发后隐藏/显示菜单代码不起作用

时间:2012-03-28 10:31:16

标签: jquery asp.net postback

我的网页上有一个切换菜单的按钮。回发后菜单回来,尽管我更新了一个隐藏的字段值来存储它的状态。我在这里做错了吗?如果有更好的方法,请告诉我!

标记:

    <asp:Button ID="btnMenu" runat="server" Text="Hide Menu" UseSubmitBehavior="False"
                                        OnClientClick="return toggleMenu(this);" />
    <asp:Panel runat="server" ID="pnlMenuToggle">
        //Main Menu
    </asp:Panel>
    <asp:Panel runat="server" ID="pnlSubMenuToggle">
        //Sub Menu
    </asp:Panel>
    <asp:HiddenField ID="hfMenuState" runat="server" Value="true" />

<script>


//Toggles menu visibility
        function toggleMenu(menuButton) {

            var menuVisible = $('#<%=hfMenuState.ClientID%>').val() == 'true' ? true : false;

            $('#<%=pnlMenuToggle.ClientID%>').slideToggleWidth();
            $('#<%=pnlSubMenuToggle.ClientID%>').slideToggle('slow');

            //Update whether the menu is visible
            menuVisible = !menuVisible;

            //Update menu button text
            $(menuButton).val(menuVisible ? 'Hide Menu' : 'Show Menu');

            $('#<%=hfMenuState.ClientID%>').val(menuVisible)

            return false;
        }
</script>

代码背后:

(页面加载)

        bool menu = Convert.ToBoolean( hfMenuState.Value );

        pnlMenuToggle.Visible = menu;
        pnlSubMenuToggle.Visible = menu;

javascripts更新了隐藏字段值,但看起来它从未发布回服务器。

如何确保菜单在回发后保持隐藏状态。

我还尝试将隐藏字段放在Update Panel中,并将Update Mode设置为Always

2 个答案:

答案 0 :(得分:1)

该按钮具有UseSubmitBehavior="False",因此它永远不会发布到服务器。这就是隐藏字段中的值未提交的原因。

答案 1 :(得分:1)

好的,这就是我想出的......

母版页

  <asp:Button ID="btnMenu" runat="server" Text="Hide Menu" UseSubmitBehavior="False" OnClientClick="return toggleMenu(this);" />
        <asp:Panel runat="server" ID="pnlMenuToggle">
            //Main Menu
        </asp:Panel>
        <asp:Panel runat="server" ID="pnlSubMenuToggle">
            //Sub Menu
        </asp:Panel>
        <asp:HiddenField ID="hfMenuVisible" runat="server" Value="true" />

     <script type="text/javascript">


    //Toggles menu visibility
            var _MenuVisible = $('#<%=hfMenuVisible.ClientID%>').val() == 'true' ? true : false;

            function toggleMenu(menuButton) {

                $('#<%=pnlMenuToggle.ClientID%>').slideToggleWidth();
                $('#<%=pnlSubMenuToggle.ClientID%>').slideToggle('slow');

                //Update whether the menu is visible
                _MenuVisible = !_MenuVisible;

                //Update menu button text
                $(menuButton).val(_MenuVisible ? 'Hide Menu' : 'Show Menu');

                //Update menu visibility via ajax
                $.ajax(
                      {
                          type: "POST",
                          url: "Default.aspx/UpdateMenuVisibility",
                          data: "{ 'visible': '" + _MenuVisible + "' }",
                          contentType: "application/json; charset=utf-8",
                          dataType: "json"
                      });

                return false;
            }

</script>

页面加载:

 if ( Default.MenuVisible )
        {
            pnlMenuToggle.Style.Remove( "display" );
            pnlSubMenuToggle.Style.Remove( "display" );
            btnMenu.Text = "Hide Menu";
            hfMenuVisible.Value = true.ToString().ToLower();
        }
        else
        {
            pnlMenuToggle.Style.Add( "display", "none" );
            pnlSubMenuToggle.Style.Add( "display", "none" );
            btnMenu.Text = "Show Menu";
            hfMenuVisible.Value = false.ToString().ToLower();
        }

<强> Default.aspx的:

/// <summary>
    /// Gets or Sets whether the Menu Is Visible
    /// </summary>
    public static bool MenuVisible
    {
        get
        {
            if ( HttpContext.Current.Session[ "MenuVisible" ] == null )
            {
                HttpContext.Current.Session[ "MenuVisible" ] = true;
            }

            return ( bool ) HttpContext.Current.Session[ "MenuVisible" ];
        }
        set
        {
            HttpContext.Current.Session[ "MenuVisible" ] = value;
        }
    }

    /// <summary>
    /// Updates whether the menu is visible or not
    /// </summary>
    /// <param name="visible">visible</param>
    [WebMethod, ScriptMethod]
    public static void UpdateMenuVisibility( bool visible )
    {
        try
        {
            Default.MenuVisible = visible;
        }
        catch ( Exception )
        {
            throw;
        }
    }

基本上,隐藏显示菜单按钮现在更新会话变量以跟踪回发之间是否显示菜单,即使重新创建母版页也是如此。

这是一种享受。