Geek Answers Handbook

Create ViewModel for navigation

I have an MVC 4 application with multiple views. That is, Products, Recipes, Challengers and Shops.

Each view is based on a model.

Let it simplify and say that all my controllers transmit a similar presentation model, which looks something like the effect of my product:

public ActionResult Index() { return View(db.Ingredients.ToList()); }

Well, that's fine, no problem. But now that all my pages are working, I want to change my navigation (which has drop-down lists for each view) to load elements in this model.

So, I would have 4-button navigation (Products, Recipes, Challengers and Shops).

When you flip each button (say, flip the product button), the listed products will be listed in the drop-down list.

To do this, I need to create some type of ViewModel that combines all 4 of these models. Obviously, I can’t just cut out the PartialView for each navigation item and use

 @model IEnumerable<GranSabanaUS.Models.Products>

And repeat the output of the products for this drop-down list, because then this navigation will only work in the product view and nowhere else.

(After the solution) AND YES ROWAN You are correct in what type I create, see here: Navigation I am creating

+2
source share
2 answers
 public class MenuContents { public IEnumerable<Products> AllProducts { get; set; } public IEnumerable<Recepies> AllRecepies { get; set; } public IEnumerable<Distributors> AllDistributors { get; set; } public IEnumerable<Stores> AllStores { get; set; } private XXXDb db = new XXXUSDb(); public void PopulateModel() { AllProducts = db.Products.ToList(); AllRecepies = db.Recepies.ToList(); AllDistributors = db.Distributors.ToList(); AllStores = db.Stores.ToList(); } }

Then in your controller

 public ActionResult PartialWhatever() { MenuContents model = new MenuContents(); model.PopulateModel(); return PartialView("PartialViewName", model); }

Then in your partial view

 @Model MenuContents ... do whatever here
+1
source

Introduction

I am going to make a few assumptions because I do not have all the information.

I suspect you want to create something like this:

Dropdown menu

Separation views

When you encounter the problem of “How can I put everything in one controller / view mode”, it is possible that it does too much and needs to be split.

Do not view your last page as one big idea - divide the submission into smaller ones so that they do the “one thing”.

For example, navigation is just one part of your layout. You could go even further to say that each drop-down menu is one view that is part of the navigation, and so on.

Navigation Overview

Suppose you have _Layout.cshtml that looks like this:

 <body> <div class="navbar"> <ul class="nav"> <li><a href="#">Products</a></li> <li><a href="#">Recipes</a></li> </ul> </div> @RenderBody() </body>

As you can see, we have a simple navigation system, and then the main building is created. The problem we are facing is this: how do we extract this navigation and provide it with the models needed for rendering?

Retrieving Navigation

Let the navigation be extracted in your own view. Take the HTML navigation code and paste it into a new view named __Navigation.cshtml_ and place it under ~/Views/Partials .

_Navigation.cshtml

 <div class="navbar"> <ul class="nav"> <li><a href="#">Products</a></li> <li><a href="#">Recipes</a></li> </ul> </div>

Create a new controller named PartialsController . Create a new action to invoke our navigation.

PartialsController.cs

 [ChildActionOnly] public class PartialsController : Controller { public ActionResult Navigation() { return PartialView("_Navigation"); } }

Refresh our layout to trigger navigation.

_Layout.cshtml

 <body> @Html.Action("Navigation", "Partials") @RenderBody() </body>

Now our navigation is divided into a partial view. It is more independent and modular, and now it is much easier to give it model data for work.

Input Model Data

Suppose we have several models, such as the ones you mentioned.

 public class Product { //... } public class Recipe { //... }

Create a view model:

NavigationViewModel.cs

 public class NavigationViewModel { public IEnumerable<Product> Products { get; set; } public IEnumerable<Recipe> Recipes { get; set; } }

Fix our action:

PartialsController.cs

 public ActionResult Navigation() { NavigationViewModel viewModel; viewModel = new NavigationViewModel(); viewModel.Products = db.Products; viewModel.Recipes = db.Recipes; return PartialView("_Navigation", viewModel); }

Finally, refresh our view:

_Navigation.cshtml

 @model NavigationViewModel <div class="navbar"> <ul class="nav"> @foreach (Product product in Model.Products) { @<li>product.Name</li> } @foreach (Recipe recipe in Model.Recipes) { @<li>recipe.Name</li> } </ul> </div>
+11
source

More articles:


All Articles