Add dynamic menu item in asp.net MVC using the database

Question

I want to dynamically bind the menu item list in the master page depending upon the user login id. I'm new to MVC pattern where I get more confused by referring many sites. It will be helpful for me if u guide me to create dynamic menu. Here are the code which I have tried my best,

<script type="text/javascript">
    $(document).ready(function () {
        $("#accordian h3").click(function () {
            $("#accordian ul ul").slideUp();
            if (!$(this).next().is(":visible")) {
                $(this).next().slideDown();
            }
        });
    });
</script>

<nav class="navbar-default navbar-static-side" role="navigation">
<div id="accordian">
    <ul class="nav" id="side-menu">
        <li class ="nav-header">
                      @{
                foreach (var MenuItem in Model.MainMenuModel)
                {

                    var SubMenuItem = Model.SubMenuModel.Where(m => m.MainMenuID == MenuItem.ID);

                    <h3><a href="@MenuItem.MainMenuURL"> @MenuItem.MainMenuItem </a></h3>

                    if (SubMenuItem.Count() > 0)
                    {
                        <ul>
                            @foreach (var SubItem in SubMenuItem)
                            {
                                <li><a href='@SubItem.SubMenuURL'>@SubItem.SubMenuItem</a></li>
                            }
                        </ul>
                    }

                }
            }

I have business, data and services component in my project. From where I have to start to declare the menu items. Thanks in advance.

I don't see where you making menu choices based upon the user ID. — Dean.DePue
– Dean.DePue, Commented May 19, 2015 at 10:44
I missed that.. I'm passing it through session in javascript and receive it in the controllers. My doubt is that how will I receive the menu from the database to the view page? — Aarthi Ravendiran
– Aarthi Ravendiran, Commented May 19, 2015 at 11:22

kamil-mrzyglod · Accepted Answer · 2015-05-19 11:40:28Z

1

I think it would be easiest to use @Html.Action() to render your menu passing your user id(or reading it in your action - for example from session - depending where you store such information).

With this approach you have one file where you place your HTML and JS, it is easy to pass a model to it from anywhere(since you just render your action you don't have to attach anything specific to other models or ViewBag/ViewData.

Possible functionality could be like:

Master

@Html.Action("Render", "Menu")

Your action

[ChildActionOnly]
public PartialViewResult Render() {
var userId = Session["some_key"];
var model = _userMenuService.GetModelForUserId(userId);
return PartialView(model);
}

You should get the point :)

EDIT:

To map your data to view you have to provide some view model, which can accept some IEnumerable<MenuItem> collection in constructor, which will be reflected to specific view model properties or you can just pass collection of all menu items to view and use them as your model.

edited May 19, 2015 at 11:40

answered May 19, 2015 at 10:47

kamil-mrzyglod

5,0081 gold badge22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Aarthi Ravendiran Over a year ago

As you mentioned I will pass the user id as the session value. how do i return the menu values from the data repository to the view page?

kamil-mrzyglod Over a year ago

You have to map your data to some view model, I edited my answer to reflect this.

Ruslan_K Over a year ago

Menu loads every time when Master(Layout.cshtml) refresh. How to make that menu to load only once?

Collectives™ on Stack Overflow

Add dynamic menu item in asp.net MVC using the database

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related