MVC 5 - Adding a Nav Dropdown to all Pages

Question

I've just started learning MVC a few days ago and I'm starting to learn the concepts but I'm struggling a bit trying to get a drop down menu on another page. I have a list of categories and I am able to create a drop down box on my Categories\Index.cshtml page. I have the following:

Model:

public class Category
{
    public int Id { get; set; }

    [Required]
    [StringLength(100, MinimumLength = 3)]
    public string Name { get; set; }

    [Required]
    public Boolean Visible { get; set; }

    public Category()
    {
        this.Visible = true;
    }
}

Controller:

private DefaultConnection db = new DefaultConnection();

    // GET: Categories
    public ActionResult Index()
    {          
        var CategoryLst = new List<string>();
        var CategoryQry = from c in db.Categories
                          orderby c.Name
                          where c.Visible == true
                          select c.Name;

        CategoryLst.AddRange(CategoryQry.Distinct());
        ViewBag.Categories1 = new SelectList(CategoryLst);

        return View(db.Categories.ToList());
    }

Index.cshtml:

Category: @Html.DropDownList("Categories1", "All")

This works as expected - I get a nice drop down box with my visible only Categories. I understand that this works because the user navigated to the "Index" page which is routed to the controller to "Index()" which gets the model and data and then passes that to the page to build the HTML.

What I am having a hard time understanding is how do I get data from the controller/model from a different part of my app? First question, is the controller more tied to the model or the view?

For example, how would I put the above drop down box on my Home\About.cshtml page? I can put the same code above from my Controller into "public ActionResult About()" in my HomeController and then simply put this on the About.cshtml page:

Category: @Html.DropDownList("Categories1", "All")

That works, but I'm guessing it isn't the correct way to do it due to duplicating code.

I'm ultimately trying to add a drop down menu to my nav bar that contains that Category list but I don't understand where to put the code. I'm good with the formatting once I can get the Category name/id list to the page.

Thanks,

Create a `[ChildActionOnly]` method, (say) `public ActionResult Menu()` that returns a partial view of your dropdown (and any other common menu items) and in the view or layout use `@Html.Action()` to render the html. — , Dec 06 '15 at 04:55

score 1 · Answer 1 · edited May 23 '17 at 10:27

1

My suggestion is to add your Navigation into your _Layout.cshtml page found in the Shared folder under a project, then it is universal throughout your app.

Here is a good tutorial on the subject ~> https://stackoverflow.com/a/3832771/5590934

Here is also a nice MVC4 example: http://mvc4ajaxdropdownlist.codeplex.com/

edited May 23 '17 at 10:27

Community

1
1

answered Dec 06 '15 at 04:39

Adam Reed

123
6

score 0 · Accepted Answer · answered Dec 10 '15 at 06:43

Thanks guys, I think I'm getting the hang of MVC. Your posts led me to this solution so posting it for others.

I added this to my Categories Controller:

[ChildActionOnly]
[AllowAnonymous]
public ActionResult Menu(string dropdownMenuTitle)
{
    ViewBag.DropdownMenuTitle = dropdownMenuTitle;

    var categoriesQuery = from d in db.Categories
                          orderby d.Name
                          where d.Visible == true
                          select d;
    return PartialView(categoriesQuery);
}

Then I created Menu.cshtml in my Categories View with this:

@model IEnumerable<App.Models.Category>

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">@ViewBag.DropdownMenuTitle <span class="caret"></span></a>
    <ul class="dropdown-menu">
        @foreach (var item in Model)
        {
            <li>@Html.ActionLink(item.Name, item.Name, "Items")</li>
        }
        <li role="separator" class="divider"></li>
        <li>@Html.ActionLink("All", "Feed", "Items")</li>
    </ul>
</li>

And finally, I added this to "_Layout.cshtml" so the new menu shows up on all pages:

<ul class="nav navbar-nav">
    @Html.Action("Menu", "Categories", new { DropdownMenuTitle = "Categories" })
    ...

MVC 5 - Adding a Nav Dropdown to all Pages

2 Answers2