How to get the first foreign table row with Entity framework core?

Question

I have a table of real estate and real estate photos, with the respective models:

Real estate

[Key]
public int ImovelId { get; set; }
public int? CategoriaId { get; set; }
public string Endereco { get; set; }
public string Numero { get; set; }

Immoveable

[Key]
public int Id { get; set; }
public int ImovelId { get; set; }
public string Foto { get; set; }

In Controller I have this code:

IList<Imoveis> imoveisLista = new List<Imoveis>();
var imoveis = _context.Imoveis
                        .Where(i => i.LocacaoVenda == "L")
                        .Where(i => i.Bairro == bairro)
                        .Where(i => i.VisivelAluguel == 1)
                        .ToList();

                foreach (var item in imoveis)
                {
                    imoveisLista.Add(item);
                    var foto = _context.ImoveisFotos
                        .Where(x => x.ImovelId == item.ImovelId)
                        .Select(x => x.Foto).Count();
                    if (foto == 0)
                    {
                        ViewBag.Foto = "img_padrao.jpg";
                    }
                    else if(foto >= 1)
                    {
                        ViewBag.Foto = _context.ImoveisFotos
                        .Where(x => x.ImovelId == item.ImovelId)
                        .Select(x => x.Foto).First();
                    }
                }
                ViewData["ListaImoveis"] = imoveisLista;

And in View

@foreach (var item in ViewData["ListaImoveis"] as IList<Imoveis>)
                    {
                        <div class="row">

                            <div class="col-md-12">
                                <div class="card p-1 mb-2 bg-light">
                                    <h5 class="card-header text-left text-dark font-weight-bold">
                                        <i class="fas fa-map-marker text-dark"></i>

                                        <span>@item.Bairro</span>
                                        -
                                        <span>@item.Endereco</span>,
                                        <span>@item.Numero</span>
                                        -
                                        <span>@item.Complemento</span>
                                    </h5>

                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-5 text-center">

                                                <a href="detalhes?id=57">

                                                        <img class="img-fluid cover" src="https://230.112.09.34/content/uploads/imoveis/fotos/@ViewBag.Foto" />

The list of properties comes straight, but the whole list repeats the same photo, instead of its primary table. My goal was to take the first photo of each property and display. Below how it looks:

How to solve this?

Answer 1

You are setting a single reference in Viewbag (Viewbag.Photo) at each iteration in the foreach loop, so all records get the same image, as it always replaces the photo at each step.

My suggestion is to create a Viewmodel that receives all the data you want to present in the view:

public class ImoveisViewModel
{
    public int ImovelId { get; set; }
    public int? CategoriaId { get; set; }
    public string Endereco { get; set; }
    public string Numero { get; set; }
    public string Foto { get; set; }
}

List<ImoveisViewModel> listaImoveis = new List<ImoveisViewModel>();

In foreach create a new Immovable object sviewmodel and instead of setting the Viewbag add in listImoveis:

foreach (var item in imoveis)
            {
                var imovel = new ImoveisViewModel() {
                   ImovelId = item.ImovelId,
                   CategoriaId = item.CategoriaId,
                   Endereco = item.Endereco,
                   Numero = item.Numero
                };
                var foto = _context.ImoveisFotos
                    .Where(x => x.ImovelId == item.ImovelId)
                    .Select(x => x.Foto).Count();
                if (foto == 0)
                {
                    imovel.Foto = "img_padrao.jpg";
                }
                else if(foto >= 1)
                {
                    imovel.Foto = _context.ImoveisFotos
                    .Where(x => x.ImovelId == item.ImovelId)
                    .Select(x => x.Foto).First();
                }
                listaImoveis.Add(imovel);
            }
ViewData["ListaImoveis"] = listaImoveis;

Then in View change the foreach:

@foreach (var item in ViewData["ListaImoveis"] as List<ImoveisViewModel>)

And then in the picture:

<img class="img-fluid cover" src="https://230.112.09.34/content/uploads/imoveis/fotos/@item.Foto" />

Well there are several ways to solve, but the main problem was to set the photo string in the same Viewbag inside the loop, instead of being in the list.

Hugs