Multiple Models in a single View

Question

I'm new to MVC C# and still learning the basics.

I think I'm close to getting the result but the compiler doesn't like it.

I am trying to pass 2 models into a main view. I thought that I would be able to use a partial view to store one model, and the main view to use another. For example ...

// GET: /Pictures/
public ActionResult Index()
{
    //Retrieve all pictures from database
    var pictures = db.Pictures.ToList();
    return View(pictures);
}

Pictures/Index would receive the model of pictures and _Login would recieve the model of Users

@model Project1.Models.User

<div id="login">
    @if (this.Context.User.Identity.IsAuthenticated)
    {
        //Select username from email address cookie


        @Html.ActionLink("My Account", "Index", "Users", new { id = this.Context.User.Identity.Name }, false) @: | @Html.ActionLink("Logout", "Logout", "Users") 
        //
    }
else
{
    using (Html.BeginForm("Login", "Users"))
    {
        <span>
            @Html.LabelFor(u => u.Email)
            @Html.TextBoxFor(u => u.Email)
        </span>

And pictures/index.cshtml is the following

@model IEnumerable<Project1.Models.Picture>
@{
    ViewBag.Title = "Animal Pictures";
}

@Html.Partial("_PictureUpload") //I thought the model would be local to _PictureUpload and then be passed?

<div id="gallery">
    @foreach (var picture in Model)
    {
        @picture.File
    }
</div>
@Html.Partial("_PictureUpload")

But there seems to be a clash with the Picture.cs in Html.Partial("_PictureUpload") and Users.cs in Html.Partial("_Login")

How is it possible to have Picture and User model in the same view? Hopefully I have explained my problem enough to understand.

Please keep it as simple as possible, I'm just trying to get the concept of how it works for now.

Answer 1

You cannot pass two models to the same view. If you want to do what you are trying to do you need to include one of your models as a property on your parent model. Then in the parent view reference the parent model. And when you get to the part of the view that you want to include your child model then you can call @Html.Partial("YourPartialViewName", Model.ChildModal) .

The child modal should be passed as the model for the partial view named "YourPartialViewName". This will allow for correct model binding as well when you are submitting to your controller action.

Answer 2

Did you tried to make a new model with two properties one of each of those models you want?

However if you want to have the model in your Partial view you need to pass it, please refer to this http://msdn.microsoft.com/en-us/library/system.web.mvc.controller.partialview(v=vs.118).aspx

Answer 3

You have to either pass the model to the Partial, by having it as part of the main view's model:

@model AMoreComplexModelThatHasAListOfPictureAndAPictureUploadViewModel
@{
ViewBag.Title = "Animal Pictures";
}

@Html.Partial("_PictureUpload", Model.PictureUploadViewModel)

<div id="gallery">
@foreach (var picture in Model.Pictures)
{

Or, you can render the partial as an action, and have the action retrieve/build the model for it:

@model IEnumerable<Project1.Models.Picture>
@{
ViewBag.Title = "Animal Pictures";
}

@Html.RenderAction("PictureUpload");



public ActionResult PictureUpload()
{
    var model = GetMyPictureUploadViewModel();
    return PartialView("_PictureUpload", model);
}

Answer 4

You'll notice that in your login partial, you never reference:

@Model...

You actually aren't even using your User Model for anything in your login partial. And you shouldn't be - you'd have to pass the model in for every single page, which would be awful. So just remove the using statement and you're actually all set. But as far as two models go, the other answers are correct.