'Iterate through a list in C# MVC and access properties

I have created a view that accepts a ProjectsCreatorsVM class. This class has been structured this way:

public class ProjectsCreatorsVM
{
    public List<ProjectVM> ProjectsCreators { get; set; }
    public ProjectsCreatorsVM(List<ProjectVM> projectsCreators)
    {
        ProjectsCreators = projectsCreators;
    }
}

In addition, the ProjectVM follow this structure:

public class ProjectVM
{
    public Project Project { get; set; }
    public ApplicationUser ApplicationUser { get; set; }

    public  ProjectVM(Project pro, ApplicationUser applUser)
    {
        Project = pro;
        ApplicationUser = applUser;
    }
}

Lastly, my view tries to go through the ProjectsCreators.Project but it does not seem to be possible.

<div class="card-content-container" >
        @foreach (Project obj in @Model.ProjectsCreators.)
        {
            <div class="card">
                <img class="card-img-top" src="@obj.ImgURL"  alt ="project image" >
                <div class="card-body d-flex flex-column">
                    <h5 class="card-title">@obj.Title</h5>
                    <h6 class="card-title">@obj.Title</h6>
                    <p class="card-text">
                        @obj.TruncatedDescription
                    </p>
                    <div class="mt-auto" style="display: flex; justify-content: space-between; align-items: center;">
                        <a href="/Customer/ProjectVisitor/[email protected]" class="btn btn-primary">View Details</a>
                    </div>
                </div>
            </div>

I would appreciate any help. Thanks in advance.



Solution 1:[1]

ProjectCreators is a List and when you iterate ProjectCreators you get a ProjectVM object not a Project or ApplicaionUser instance. If you want to access Project instance add Project after @obj like @obj.Project.Title

<div class="card-content-container" >
    @foreach (ProjectVM obj in @Model.ProjectsCreators.)
    {
        <div class="card">
            <img class="card-img-top" src="@obj.Project.ImgURL"  alt ="project image" >
            <div class="card-body d-flex flex-column">
                <h5 class="card-title">@obj.Project.Title</h5>
                <h6 class="card-title">@obj.Project.Title</h6>
                <p class="card-text">
                        @obj.Project.TruncatedDescription
                </p>
                <div class="mt-auto" style="display: flex; justify-content: space-between; align-items: center;">
                    <a href="/Customer/ProjectVisitor/[email protected]" class="btn btn-primary">View Details</a>
                </div>
            </div>
        </div>
    }
</div>

Solution 2:[2]

To achieve what I wanted, I created another class. That looks like this:

 public class ProjectAndUserVM
{
    public string ProjectTitle { get; set; }
    public string ProjectId { get; set; }
    public string ProjectImageUrl { get; set; }
    public string ProjectDescription { get; set; }
    public string ProjectCreatorName { get; set; }
    public string ProjectCreatorId { get; set; }
    public string ProjectCreatorEmail { get; set; }
    public ProjectAndUserVM(string projectTitle, string projectId, string projectImageUrl, string projectDescription, string projectCreatorName, string projectCreatorId, string projectCreatorEmail)
    {
        ProjectTitle = projectTitle;
        ProjectId = projectId;
        ProjectImageUrl = projectImageUrl;
        ProjectDescription = projectDescription;
        ProjectCreatorName = projectCreatorName;
        ProjectCreatorId = projectCreatorId;
        ProjectCreatorEmail = projectCreatorEmail;
    }
}

So, basically my controller is returning that as a list which I convert to an IEnumerable. and I use that list on my view instead.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Barış Can Yılmaz
Solution 2 Pedro Henrique Ferreira