CODEWITHSUNDEEP
c#asp.net-mvc
kalle1
kalle1

Reputation: 11

@Html.Partial causes type errors

I have a .cshtml file that needs to render another .cshtml file (menu). This menu uses a model in order to decide what options to show. When I call from the main .cshtml file to the render the menu, it fails saying that there are invalid types. This is the error message: 

System.InvalidOperationException: 'The model item passed into the dictionary is of type 'System.Collections.Generic.List`1[XXXXX.ScheduleItem]', but this dictionary requires a model item of type 'XXXXXX.Models.MenuItemsViewModel'.'

I've tried some of the solutions here: The model item passed into the dictionary is of type .. but this dictionary requires a model item of type

I've tried using 

@Html.Partial("Menu", new MenuItemsViewModel())

Which does work but it is creating a new ViewModel, not calling my method for reading it from my database. I have a Index.cshtml file where I am setting the value though, but here all I wanna do is read it from my database. I also tried defining a "GetViewModel" method in the MenuItemsController, create a new instance and calling that method. It works but feels kinda haxy: @Html.Partial("Menu", new MenuItemsBackofficeController().GetViewModel())

@using System.Web.Mvc.Html
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="~/Styles/fonts.css" />
    <link rel="stylesheet" type="text/css" href="~/Styles/style.css" />

    <title>@ViewBag.Title -</title>
</head>
<body>
    @Html.Partial("Menu", new MenuItemsViewModel())
    <header>
        <div class="logo text-center">
            <img src="~/Content/logo.png" />
        </div>
    </header>
    <div>
        @RenderBody()
    </div>
</body>




@model XXXX.Models.MenuItemsViewModel

@if (User.Identity.IsAuthenticated)
{
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark custom-menu">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span> Meny
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">

                @if (Model.Schedule)
                {
                    <li class="nav-item"><a class="nav-link" href="@Url.Action("Schedule", "Home")">Schema</a></li>
                }
            </ul>
        </div>
    </nav>
    }

To read the model from the database and populate the model. Do I need to create a new Controller for the Menu to achive this?

Upvotes: 1

Views: 360

Answers (3)

scgough
scgough

Reputation: 5252

You want to call the controller from your view to (a) get the values from the database and (b) render them in your menu partial view so...

Controller: 

public ActionResult Menu() {
    //get stuff from the db 

    return PartialView(menuModel);  //this would be the partial view for your menu
}

The 'main' View:

<head>
...
</head>
<body>
    @{ Html.RenderAction("Menu", "YourController"); }
    <header>
        <div class="logo text-center">
            <img src="~/Content/logo.png" />
        </div>
    </header>
    <div>
        @RenderBody()
    </div>
</body>

EDIT: Adjusted to show within your original code snippet...

Upvotes: 1

Phteven
Phteven

Reputation: 122

I would use the @Html.Action for that (I'm updating Priyank Panchal's code) : 

public ActionResult GetMenu()
{
    //Populate your MenuItemsViewModel from database here
    MenuItemsViewModel menuItems = DB.GetMenuItems(); //Assuming GetMenuItems() is method which returns an object of type MenuItemsViewModel from database
    return PartialView("Menu", menuItems);
}

And in the view, instead of :

@Html.Partial("Menu", menuItems)

Use the following :

@Html.Action("GetMenu", "YourController")

Hope it helps !

Upvotes: 1

prinkpan
prinkpan

Reputation: 2247

You will need to pass the value of MenuItemsViewModel from controller to this view.

public ActionResult Index()
{
    //Populate your MenuItemsViewModel from database here
    MenuItemsViewModel menuItems = DB.GetMenuItems(); //Assuming GetMenuItems() is method which returns an object of type MenuItemsViewModel from database
    ViewBag.MenuItems = menuItems;
    return View();
}

and then in your view

@using System.Web.Mvc.Html
@{
    var menuItems = (MenuItemsViewModel)ViewBag.MenuItems;
}
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="~/Styles/fonts.css" />
    <link rel="stylesheet" type="text/css" href="~/Styles/style.css" />

    <title>@ViewBag.Title -</title>
</head>
<body>
    @Html.Partial("Menu", menuItems)
    <header>
        <div class="logo text-center">
            <img src="~/Content/logo.png" />
        </div>
    </header>
    <div>
        @RenderBody()
    </div>
</body>

Upvotes: 1

Related Questions