ASP.NET CORE Error when trying to add a List of Objects to an Object with a list in it

Question

I have a ASP.Net Core project that I'm working on. So I have a Linq call that gets the information from the database and sends it back to the Controller, no problem there. When I send this data to the View I get an error

The model item passed into the ViewDataDictionary is of type 'System.Collections.Generic.List`1[PhotoUploader.Models.UnitPictures]', but this ViewDataDictionary instance requires a model item of type 'PhotoUploader.Models.FileViewModel'.

Now I know why this is, Its because the model types don't match from the controller to the View. My question is, how do I assign the UnitPictures to the FileViewModel list I've created inside of it.

Model

public class UnitPictures
{
    public long ImageId { get; set; }
    public string FileName { get; set; }
    public string FileLocation { get; set; }
    public int SortOrder { get; set; }
}

View Model

public class FileViewModel 
{
    public FileViewModel()
    {
        UnitPicturesList = new List<UnitPictures>();
    }
    //Other Fields here
    public List<UnitPictures> UnitPicturesList { get; set; }
}

Method Call return data of type UnitPictures

    private List<UnitPictures> GetImages(long Id)
    {
        var images = (from a in _db.Images
                      join b in _db.AutoImage 
                        on  a.ImageId equals b.ImageId
                      where b.Id == Id
                      select new UnitPictures
                      {
                         FileLocation = "",
                         FileName = a.FileName,
                         SortOrder = 0, 
                         ImageId = a.ImageId

                      }).ToList();

        return images;
    }

Controller

    public IActionResult UnitImages(long Id, long unitId)
    {           
        var images = GetImages(Id);           

                  
        return View(images);
    }

View

 @model FileViewModel

 <div class="row">
  <div class="col-lg-4 col-md-12 mb-4 mb-lg-0">

 @for (var i = 0; i < Model.UnitPicturesList.Count; i++)
 {
    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Boat on Calm Water"
    />
 }
</div>

julealgon · Accepted Answer · 2023-01-12 20:39:24Z

2

If your viewmodel is of type FileViewModel, that's what you need to pass to View:

public IActionResult UnitImages(long Id, long unitId)
{           
    FileViewModel viewModel = new(){ UnitPicturesList = GetImages(Id) };           
              
    return View(viewModel);
}

Since you have a mutable UnitPicturesList property, just assigning it directly like this will work.

answered Jan 12, 2023 at 20:39

julealgon

8,2803 gold badges42 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

whisk Over a year ago

what is it called when you do it like this? = new(){ UnitPicturesList = GetImages(Id) }

julealgon Over a year ago

@whisk that's a combination of the "targed-typed new" functionality from C# 9 in conjunction with standard "object initializers".

Nkosi · Accepted Answer · 2023-01-12 20:39:24Z

1

You create an instance of the view model, populate the relevant members and return that to the view.

public IActionResult UnitImages(long Id, long unitId)  
    var images = GetImages(Id);           
    FileViewModel model = new FileViewModel() {
        UnitPicturesList = images
    };                   
    return View(model);
}

The will allow the view to now properly bind to the matching members in the ViewDataDictionary

answered Jan 12, 2023 at 20:39

Nkosi

249k38 gold badges472 silver badges506 bronze badges

Comments

Steve · Accepted Answer · 2023-01-12 20:49:26Z

1

You need to create an instance of FileViewModel and then assign the property UnitPictureList to the result of GetImages. Finally you return the View passing the instance of FileViewModel

public IActionResult UnitImages(long Id, long unitId)
{           
    var fileModel = new FileViewModel();
    fileModel.UnitPicturesList = GetImages(Id);           
    return View(fileModel);
}

Can be shortened even more with

var fileModel = new FileViewModel{UnitPicturesList=GetImages(Id)};

edited Jan 12, 2023 at 20:49

answered Jan 12, 2023 at 20:40

Steve

217k22 gold badges242 silver badges296 bronze badges

2 Comments

whisk Over a year ago

This is clean and short!

Steve Over a year ago

Can be shortened even more with var fileModel = new FileViewModel{UnitPicturesList=GetImages(Id)};

Collectives™ on Stack Overflow

ASP.NET CORE Error when trying to add a List of Objects to an Object with a list in it

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related