局部視圖未加載數據

Question

我正在嘗試加載選項卡內部的部分視圖，但未顯示數據。

我正在使用以下代碼，我不能只使用剃刀代碼進行循環，這是在局部視圖中，我希望從另一個視圖中加載

@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>

其原因在主列表中，我正在使用視圖模型，但我想在表單上傳上方顯示一張圖片列表，這是我最好的方法，因為它不返回任何結果，我正在為主頁使用控制器。

@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>

如果要更改此類別，請編輯2個我的產品圖片

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

您的部分視圖被嚴格鍵入到ProductImages的集合中。 但是在主視圖中，當您調用此局部視圖時，沒有將模型（ProductImage對象的集合）傳遞給該局部視圖。 如果沒有明確傳遞模型，它將嘗試將模型用於父視圖。 在您的情況下，您的父視圖強烈是ProductImageVm視圖模型類。 因此，它並不能滿足部分視圖的期望。

解決方案是傳遞一個有效的ProductImages集合。 如果您的視圖模型具有該類型的集合屬性，則可以執行此操作

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

假設Images類型為IEnumerable<solitude.models.ProductImages>

理想情況下，將實體類與視圖模型混合並不是一個好主意。 所以我會為ProductImage部分視圖創建一個視圖模型類，並將其用作屬性

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;}
}

現在，請確保主視圖的類型不強於EditProductImageVm，而部分視圖的類型也強於IEnumerable<ProductImg> 。 另外，您還需要等待PartialAsync方法的調用

@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>

您的部分觀點是

@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>