2017-10-21 12 views
0

タブ内の部分ビューを読み込みしようとしていますが、データが表示されません。パーシャルビューでデータがロードされない

私は、私はちょうどこれは私が別のビューからロードしたい部分図であるかみそりのコードを使用してループを行うことができない次のコードを使用してい

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

私はメインのリストでその原因ビューモデルを使用していますが、フォームのアップロードの上に写真のリストを表示したいのですが、これを行う最善の方法は、私がメインページにコントローラを使用しているanyresultsを返さないobvです。

@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 クラスとしての私の商品画像は、このあなたの部分図が強くProductImagesのコレクションにタイプされ

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

    } 
} 
+0

さて、あなたに '' IEnumerableをでモデルを渡していないだろう@ Html.PartialAsync( "_ ProductPicturesList.cshtml"、(部分表示に送るモデル)) '。 – nbokmans

答えて

1

を変更する必要があります。しかし、この部分ビューを呼び出すときのメインビューでは、この部分ビューにモデル(ProductImageオブジェクトのコレクション)を渡すことはありません。モデルを明示的に渡していない場合は、モデルを親ビューに使用しようとします。あなたの場合、親ビューは強くProductImageVmビューモデルクラスです。それで部分的な見方が期待しているところでは機械加工されていません。

解決策は、有効なProductImageのコレクションを渡すことです。あなたのビューモデルは、その型のコレクションプロパティを持っている場合は、

タイプIEnumerable<solitude.models.ProductImages>

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

と仮定Imagesは、理想的には、ビューモデルとエンティティクラスを混在させる素晴らしいアイデアではないことを行うことができます。だから私は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> 
+0

私は何を私の製品イメージが再び上記の編集であることを見せている多くのありがとうこれはエンティティですので、アドバイスをしてください私はこれを行う必要があります – rogue39nin

+0

ありがとうあなたはmvcに組み込まれている良い進歩のバーですかそれはまだSEPものです – rogue39nin

+0

これを行うクライアント側のライブラリがいくつかあるかもしれません。ちょうどgoogleとあなたはトンを見つけるでしょう – Shyju

関連する問題