Partial View not loading data

Question

I am trying to load a partial view of inside a tab but its not showing data.

I am using the following code can I not just do a loop using razor code this is in a partial view which I wish to load in from another view

@model IEnumerable<solitude.models.ProductImages>


@{
    ViewData["Title"] = "ProductPicturesList";
    Layout = "~/Views/Shared/_LoginAdminLte.cshtml";
}

<h2>ProductPicturesList</h2>



<table class="table">
    <thead>
        <tr>
            <th>
               Picture Title
            </th>


            <th>
                Image
            </th>


    </thead>

    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Title)
                </td>
            </tr>


        <td>
            <a asp-action="Edit" asp-route-id="@item.ProductID">Edit</a> |
            <a asp-action="Details" asp-route-id="@item.ProductID">Details</a> |
            <a asp-action="Delete" asp-route-id="@item.ProductID">Delete</a>
        </td>

        }
        </tbody>
    </table>

Its cause in the main list I am using a view model but I want to show a list of pictures above the form upload what would my best way of doing this be as obv it is not returning anyresults I am using a controller for my main page.

@model solitude.models.Models.ViewModels.ProductImageVm 
@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@

@Html.PartialAsync("_ProductPicturesList.cshtml")

<div class="form-group">

 <form asp-controller="Products" asp-action="FileUpload" asp-route-returnurl="@ViewData["ReturnUrl"]" enctype="multipart/form-data" method="post" class="form-horizontal" role="form">



    <input asp-for="Title" />
    <input asp-for="ProductId" type="hidden" />
    <input asp-for="Image" />
    <input type="submit" />
</form>

Edit 2 My Product Images as a class should this be changed

public   class ProductImages
{


        [Key]
        public int ProductImageId { get; set; }

        public int ProductID { get; set; }


        public string ProductImageTitle { get; set; }
        public string ProductImageUploadUrl { get; set; }
        public string ProductImageRealPath { get; set; }

        public string ServerIpAddress { get; set; }
        public string ProductImageAltTag { get; set; }

        public int DisplayOrder { get; set; }

        public string Image { set; get; }

    }
}

Answer 1

Your partial view is strongly typed to a collection of ProductImages . But in your main view when you are calling this partial view, you are not passing the model (which is the collection of ProductImage objects) to this partial view. If you are not explcitily passing the model, it will try to use the model for the parent view. In your case your parent view is strongly ProductImageVm view model class. So it is not maching with what the partial view is expecting.

The solution is to pass a valid collection of ProductImages. If your view model has a collection property of that type you can do that

@await Html.PartialAsync("_ProductPicturesList.cshtml",Model.Images)

Assuming Images of type IEnumerable<solitude.models.ProductImages>

Ideally it is not a great idea to mix entity classes with view models. So i would create a view model class for the ProductImage partial view and use that as the property

public class ProductImg
{
  public string Title { set;get;}
  public string FileName  { set;get;}
  // or path as needed
}
public class EditProductImageVm
{
   public string Title { set;get;} //for the new item
   public IFormFile Image { set;get; }  //for the new item

   public IEnumerable<ProductImg> Images { set;get;}
}

Now make sure main view is not strongly typed to EditProductImageVm and your partial view is strongly typed to IEnumerable<ProductImg> . Also you need to await the call to PartialAsync method

@model YourNameSpaceGoesHere.EditProductImageVm 
<div>
   @await Html.PartialAsync("_ProductPicturesList.cshtml",Model.Images);
</div>
<form asp-controller="Products" asp-action="FileUpload" enctype="multipart/form-data"
                                 method="post" >
    <input asp-for="Title" />
    <input asp-for="Image" />
    <input type="submit" />
</form>

And your partial view will be

@model IEnumerable<YourNameSpaceGoesHere.ProductImg>
<h3>Images</h3>
<table class="table table-condensed table-bordered">
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
             <td>
                <!-- adjust the below img src path as needed -->
                <img src="@Url.Content("~/uploads/"+item.FileName)"/>
             </td>
        </tr>
    }
</table>