How to pass model to partial view

Question

I have two view models:

public class ParentViewModel
    {
        public Id { get; set; }
        .....
        public ChildViewModel Child{ get; set; }
    }

public class ChildViewModel
    {
        public ChildId { get; set; }
        .....
    }

Controllers:

    public ActionResult Index()
        {
            .... <some code>
            return View("NewIndex", ParentViewModel);
        }

    [HttpPost]
    public ActionResult PartialAction(ChildViewModel childView)
    {
        return RedirectToAction("Index");
    }

And views: Index

@model ParentViewModel
....
@Html.Partial("_Partial", Model.Child)

and _Partial

@model ChildViewModel
... do some stuff with child model

When I'm trying to open Index page I've got an error:

The model item passed into the dictionary is of type 'ParentViewModel', but this dictionary requires a model item of type 'ChildViewModel'.

Why it tries to pass ParentViewModel instead of ChildViewModel. What I'm doing wrong?

When calling is `Model.Child` null? Because the second parater of the `Html.Partial` should not be `null`... So make you that your `Child` property has some value! — nemesv, Jan 16 '14 at 20:58
actually my Partial view is only for AddObject functionality, so ChildViewModel needs only for sending data to controller from PartialView. So do noot need to pass data in Child from Index to Partial view — DarkNik, Jan 16 '14 at 21:31
Still you need to pass in a ChildViewModel to the `@Html.Partial` call. However it can be an empty object : `@Html.Partial("_Partial", new ChildViewModel ())`... — nemesv, Jan 16 '14 at 21:35

score 55 · Accepted Answer · answered Jul 31 '15 at 19:57

55

I had the same issue as the OP. From one of the comments, I realized that the second parameter shouldn't be null, i.e from

@model ParentViewModel
@Html.Partial("_Partial", Model.Child)

If Model.Child is null, then Model is passed instead of Model.Child. If there will be cases when the second parameter is null, then you will have to check first in your code and maybe pass an initialized Child as the second parameter. Something like this

@Html.Partial("_Partial", new Child())

answered Jul 31 '15 at 19:57

Dev

1,146
2
19
30

1

Struggled with this forever not realizing a null child would result in the same error. Thanks! – Chris V. Aug 21 '17 at 10:10
6

How about `@Html.Partial("_Partial", Model.Child ?? new Child())` ? – wensveen Sep 06 '19 at 13:12

score 14 · Answer 2 · answered Jan 17 '14 at 08:10

14

The answer is that needs to pass an empty object to Partial, like

@Html.Partial("_Partial", new ChildViewModel ())

answered Jan 17 '14 at 08:10

DarkNik

803
2
8
17

score 2 · Answer 3 · answered Jan 09 '18 at 16:56

You could return PartialView("...") from a Controller instead, and call the action from the Index view.

Controllers:

public ActionResult Index()
{
    .... <some code>
    return View("NewIndex", ParentViewModel);
}

public ActionResult Partial(ChildViewModel cvm)
{
    var vm = cvm ?? new ChildViewModel(); //if cvm from the parent view is null, return new cvm
    return PartialView("_Partial", vm) //return partial view
}

[HttpPost]
public ActionResult PartialAction(ChildViewModel childView)
{
    return RedirectToAction("Index");
}

And Index

@model ParentViewModel
....
@Html.Action("Partial", Model.Child)

Alternatively, you could initialize ParentViewModel in the Index() public ActionResult Index()

{
    .... <some code>
    return View("NewIndex", new ParentViewModel{Child = new ChildViewModel});
}

How to pass model to partial view

3 Answers3

Linked

Related