0

I am beginning to use ASP.NET MVC and i have a navigation which is build with javascript and css. The Navigation is collapsable, so that the menu only takes like 1cm when its collapsed. My problem is that i need to change the state (collapsed/expanded) by clicking on a button and setting a css class on the menu. But when i click on a menu-entry the page gets reloaded and so the css-class gets lost too.

How can i persist such data correctly? In normal views i could pass it to my viewmodel, but how can i do this in my _layout.cshtml? (i cant set a model there, right?)

What i tried was using the jquery plugin "cookies" but it only works sometimes (i think the problem is somewhere within the options of the plugin - maybe i have to set a domain or something...). Furthermore it would be nice if the solution wouldnt require the user to allow cookies.

Im glad for any help!

edit: ok, what i tried now is:

//the view

@model NHibernateSimpleDemoMVC.Models.MenuModel
....
<a id="togglemenu" />

@Html.HiddenFor(x => x.IsCollapsed, new { @id = "collapsedHdn" })

...

<script>
jQuery('#togglemenu').click(
    function () {
        if (jQuery("#collapsedHdn").val() == "true") {
            jQuery("#collapsedHdn").val("false")
        } else {
            jQuery("#collapsedHdn").val("true")
        }
    });

jQuery('#nav > li').click(
    function () {
        var name = jQuery(this).attr("id");
        jQuery("#selectedHdn").val(name);
    }
    );


jQuery(document).ready(function () {
    //set selected node
    if (jQuery("#collapsedHdn").val() == "true") {
       ... collapse ...
    }
     if (jQuery("#selectedHdn").val() != "") { //this is always empty ("")
        var name = "#" + jQuery("#selectedHdn").val();
        jQuery(name).addClass("current");
    }
});

</script>

//the model

public class MenuModel
{
    public bool IsCollapsed { get; set; }
    public string SelectedEntry { get; set; }

    public MenuModel(){
        IsCollapsed = false;
        SelectedEntry = "";
    }
}

... my hidden fields seem to not keep their value after the postback...

r3try
  • 647
  • 8
  • 18
  • 1
    so areyou trying to persist data between different contollers from a base page?? – Rahul Ranjan Nov 05 '12 at 16:52
  • no, i have got my _layout.cshtml (basically my master page) and there is a div with a navigation. this navigation is collapsable. My problem is, that i need to store the state of this navigation somehow. so i need to keep track of if the navigation is collapsed or if its expanded. – r3try Nov 05 '12 at 17:18

2 Answers2

1

There's a useful related question: ASP.NET MVC Razor pass model to layout

Community
  • 1
  • 1
lstern
  • 1,579
  • 14
  • 27
  • oh, thank you.. renderaction seems to be a good way to go. i will look into this tomorrow. thanks for your help so far! – r3try Nov 05 '12 at 17:19
0

There's usually a correlation between a value on the page and the navigation menu item pointing to that page. E.g a Title or something like that.

If there is, then you can use jQuery/Javascript to set the css class once the DOM is fully loaded by reading this value and finding the corresponding menu item.

This is definitely not something you would use cookies for.

John Mc
  • 2,761
  • 1
  • 20
  • 34