PartialView causing error

Question

I have created a partial view which returns a list of items where the ItemsId matches the one passed to it.

//
// GET: /ItemOptions/Item/5
public ActionResult Item(int id = 0)
{
    var itemoptions = db.ItemOptions.Where(o => o.ItemsId == id);
    return PartialView(itemoptions.ToList());
}

I am trying to display this on the details page of the parent item using the following code:

@Html.Partial("../ItemOptions/Item", Model.ItemsId)

If I visit {URL}/ItemOptions/Item/1 it returns the table I am expecting to see. But if I navigate to the parent item where I am trying to include the partial view I get the following error:

The model item passed into the dictionary is of type 'System.Int32', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[shopServer.Models.ItemOptions]'.

I have read other posts but can't work out where I am going wrong. I also read that I may need to use @Html.Action instead of Partial views, but I am unsure which is appropriate in which situation.

Can you elaborate on what you mean when you say you "navigate to the parent", i.e. do you enter another URL, click a link, etc.? What does the code or URL look like for that navigation? — asymptoticFault, Sep 01 '13 at 13:38
I have another controller which is what I mean by parent - ItemController, which is where I am trying to include the partial view from the ItemOptionsController — Joseph, Sep 01 '13 at 13:40

score 2 · Accepted Answer · edited May 23 '17 at 12:05

The method Html.Partial is directly rendering the partial view (without executing the controller logic), using the object passed in the second parameter as the model instance. So as the error says, the code line @Html.Partial("../ItemOptions/Item", Model.ItemsId) is trying to render your partial view using an integer (Model.ItemsId) as the model, but your partial view expects IEnumerable[shopServer.Models.ItemOptions].

You have 2 options for resolving your issue, depending if the data for the partial view is already loaded in the model for the parent view or not.

If in the parent view the model already contains the collection of item options, then you can just pass them to the partial view using the Html.Partial method. So assuming you could have a property like ItemOptions in the model of your parent view, then you could render the partial as:

@Html.Partial("../ItemOptions/Item", Model.ItemOptions)

If that is not possible, and the data you need for the partial view is unknown to the parent model, then you need to execute the controller logic (so you can populate the model for the partial view retrieving the extra data from the databaes.) In that case what you need is a child action, achived using the method Html.Action. You will need to pass the controller name, action name and parameters for the action method as in:

@Html.Action("Item", "ItemOptions", new {id = Model.ItemsId})

With the second option, the logic in the controller action method is executed, retrieving the ItemOptions from the database, rendering the partial view and including the resulting html into your main view.

You can find a quick rule of thumb for Html.Partial and Html.Action usage `here.

Hope that helps!

PartialView causing error

1 Answers1