Question

I have a Navigation menu using ul and li.. i am able to populate it but it cannot remember its state once postback happens or if i move to a new page.

Here is the code:

Masterpage.Master

 <ul id="main-nav">         

            <li> 
                <a href="MPTest2.aspx" class="nav-top-item" runat="server"> 
                Employees
                </a>
                <ul id="mgList" runat="server" >

                </ul>

            </li>
</ul>

MasterPage.Master.cs

protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        SqlConnection connection = new SqlConnection(@"Data Source= localhost;Initial Catalog=ServerDb;Integrated Security=True");
        connection.Open();
        SqlCommand sqlCmd = new SqlCommand("select EmpName, EmpID from Employee order by EmpName", connection);
        SqlDataAdapter sqlDa = new SqlDataAdapter(sqlCmd);

        sqlDa.Fill(dt);
        connection.Close();
        if (dt.Rows.Count > 0)
        {
            HtmlGenericControl li;

            for (int j = 0; j < dt.Rows.Count; j++)
            {
                li = new HtmlGenericControl("li");

                HtmlAnchor a = new HtmlAnchor();
                a.HRef = "~/MPTest1.aspx?MGID=" + Convert.ToInt32(dt.Rows[j]["EmpID"]);
                a.InnerText = dt.Rows[j]["EmpName"].ToString();
                li.Controls.Add(a);
                mgList.Controls.Add(li);
            }
        }          
    }

JQuery:

$(document).ready(function(){

//Sidebar Accordion Menu:

    $("#main-nav li ul").hide(); // Hide all sub menus


    $("#main-nav li a.nav-top-item").click( // When a top menu item is clicked...
        function() {
            $(this).parent().siblings().find("ul").slideUp("normal"); // Slide up all sub menus except the one clicked
            $(this).next().slideToggle("normal"); // Slide down the clicked sub menu
            return false;
        }
    ); }

Now i know the hide() function hides all the menus which is needed to be called the first time. But after that i need a class or function which remembers the state of the menu if it was open rather than collapsing everything.

It would be great if i could get some suggestions or some examples.

Thanks

Answer 1

I know this isn’t exactly what you are looking for but it is what I use to track my menu/submenu activeness. I believe you should be able to use the premise I provide below to show the correct menu items. I might also not be understanding the question, if that is the case please let me know and I’ll try to help further. The example below is being used with Razor MVC3.

I’d also like to point out that I have limited myself to two levels of menus for this code and if you use more than that you should modify the code to be more recursively robust.

$(function () {
        $("#menu li a[href='@Request.Url.LocalPath'],#menu li a[href='@(Request.Url.PathAndQuery)']").parent("li").addClass("current_page_item");
        $("li.current_page_item").parent("ul").parent("li").addClass("current_page_item");
    });

In the theme of your below comment I believe you could do something like the following which is not perfect but may give you a start in the right direction.

[WebMethod]
public static string MarkOpened(string id)
{
    HttpContext.Current.Session["currentPage"] = id
}       

$(document).ready(function(){
    $("#main-nav li a.nav-top-item:<%= HttpContext.Current.Session["currentPage"] %>").next().slideToggle("normal"); 
    $("#main-nav li a.nav-top-item").click(function(){
        $.ajax({
            type: "POST",
            url: location.href + "/MarkOpened",
            contentType: "application/json; charset=utf-8",
            data: "{ 'id':'" + $(this).attr("something") + "'}",
            dataType: "json"
        });
    };
); }