2017-02-02 16 views
3

私はこれで今はあまりにも長く苦労しています。Asp.net core Sakura.AspNetCore.PagedListと部分的なビュー

私はAsp.Net Core Webアプリケーションでレビューセクションを作成しています。製品ごとにレビューをフィルタする2つのドロップダウンを追加し、1ページあたりのレビュー数を設定しました。

ページリストの場合、私はSakura.AspNetCore.PagedListを使用しています。

フィルタリングされソートされたレビューを含む部分ビューを返すためにajaxを使用しようとしていますが、モデルが返されるまではすべてうまく行きます。最初は、私はそれを把握することができませんでした、そして、クロムを使用して、私は500エラーを発見し、そこからresonseに次のエラーが見つかりました

と、InvalidOperationException:モデルアイテムViewDataDictionaryに渡されるが、マイクロソフトのです。 AspNetCore.Mvc.PartialViewResultこれViewDataDictionaryインスタンスがpagedlistがpartialViewですが、私は私の人生のために、この問題を解決する方法のモデルを把握することはできませんタイプSakura.AspNetCore.IPagedList

のモデルアイテムが必要です...ここに私のモデルのコードの違反部分があります:

 public async Task<ActionResult> ShowReviewDetails(string searchProduct, int? page, string perPage) 
    { 
     // get product via id 
     var prodId = Convert.ToInt32(searchProduct); 
     var prod = await _context.Product.FindAsync(prodId); 
     searchProduct = prod.ProductName; 
     if (perPage == "0") 
     { 
      perPage = _context.Product.Count().ToString(); 
     } 
     var perPageGet = Convert.ToInt32(perPage); 
     if (perPageGet <= 0) 
     { 
      perPageGet = _context.Product.Count(); 
     } 
     int pageSize = Convert.ToInt32(perPageGet); 
     int pageNumber = (page ?? 1); 

     IEnumerable<Review> reviews = await _context.Review.Where(r => r.ReviewApproved == true).ToListAsync(); 
     if (!string.IsNullOrWhiteSpace(searchProduct) || !string.IsNullOrEmpty(searchProduct)) 
     { 

      searchProduct = StringExtensions.UppercaseFirst(searchProduct); 
     }   
     if (!string.IsNullOrEmpty(searchProduct) || !string.IsNullOrWhiteSpace(searchProduct) || searchProduct == "0") 
     { 
      page = 1; 
      reviews = await _context.Review.Where(r => r.Product == searchProduct && r.ReviewApproved == true).ToListAsync(); 
     } 
     if (searchProduct == "All" || string.IsNullOrEmpty(searchProduct)) 
     { 
      reviews = await _context.Review.Where(r => r.ReviewApproved == true).ToListAsync(); 
     } 

     reviews = reviews.ToPagedList(pageSize, pageNumber); 

     return PartialView(reviews); 

asp.netのコアとC#については、私はまだかなり緑色なので、どんな助けや提案も歓迎されるでしょう。ページングのためのより良いオプションがありますか?

ありがとうございました!

EDIT:追加ビューとスクリプト

私の部分図の親:

@{ 
ViewBag.Title = "Review Dashboard"; 
@using YaCu_2017.Controllers; 
} 
<p class="green-text">@ViewBag.StatusMessage</p> 
<p class="red-text">@ViewBag.ErrorMessage</p> 

<h2>Our Product Reviews</h2> 

<div class="reviewView" id="filter"> 
@await Html.PartialAsync("ShowReviewDetails") 
</div> 

実際partialview:

@model IPagedList<YaCu_2017.Models.Review> 
@using System.Globalization 
@using Sakura.AspNetCore 
@using YaCu_2017.Controllers 
@using YaCu_2017.Models 
@{ 
ViewData["Title"] = "Digital Jeeves - Reviews"; 

} 

<div class="row"> 
<div class="col s2"> 

    <h5>Filter by Product:</h5> 

    <form method="get" > 
     @{ 
      var product = ReviewController.GetProductListIncId(); 
      var productCount = ReviewController.GetProductCountList(); 
      ViewBag.ProductList = product; 
      ViewBag.ProductCount = productCount; 
     } 
     <select asp-items="@ViewBag.ProductList" id="searchProduct" class="dropdown-button btn"></select> 
     <h5>Reviews per page</h5> 
     <select asp-items="@ViewBag.ProductCount" id="perPage" class="dropdown-button btn"></select> 
    </form> 

</div> 
</div> 

<div class="row"> 
    <div class="col s12 center center-align center-block"> 
     <p>Page @(Model.TotalPage < Model.PageIndex ? 1 : Model.PageIndex) of @Model.TotalPage<pager class="pagination" setting-link-attr-data-ajax="true" /></></p> 
    </div> 
</div> 
<hr /> 
<div> 
@foreach (var item in Model) 
{ 
    var stars = Convert.ToDouble(item.Stars); 
    <div class="container opaque-parent z-depth-5"> 
     <div class="row"> 
      <div class="col s6"><h6 style="border-bottom:thin">Title : @Html.DisplayFor(model => item.Title)</h6></div> 
      <div class="col s3"><h6 style="border-bottom:thin">Product : @Html.DisplayFor(model => item.Product)</h6></div> 
      <div class="col s3"><h6 style="border-bottom:thin">Rated: <ej-rating value="@stars" id="@item.Id" read-only="true" /></h6></div> 
     </div> 
     <div class="row" style=""> 
      <div class="col s12" style="border-bottom:inset"> 
       <h6>Comment:</h6> 
      </div> 
     </div> 
     <div class="row" style="border-bottom:inset"> 
      <div class="col s6 offset-s3"> 
       <p class="flow-text">"@Html.DisplayFor(model => item.ReviewText)"</p> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col s3"> 
       <p>Date Created : @Html.DisplayFor(modelItem => item.CreatedDate)</p> 
      </div> 
      <div class="col s3"> 
       <p>Chosen Display Name: @Html.DisplayFor(modelItem => item.DisplayName)</p> 
      </div> 
     </div> 
    </div> 
    <hr /> 
} 
</div> 
<div class="row"> 
<div class="col s12 center center-align center-block"> 
    <p>Page @(Model.TotalPage < Model.PageIndex ? 1 : Model.PageIndex) of @Model.TotalPage<pager class="pagination" setting-link-attr-data-ajax="true" /></></p> 
</div> 
</div> 

と私の文書レディ機能:

 $("#searchProduct").change(function() { 
     var product = $("#searchProduct").val(); 
     var perPage = $("#perPage").val(); 
      $("#filter").load('http://LocalHost:50426/Review/GetProducts?searchProduct=' + product + '&perPage=' + perPage); 
    }); 
$("#perPage").change(function() { 
     var product = $("#searchProduct").val(); 
     var perPage = $("#perPage").val(); 
      $("#filter").load('http://LocalHost:50426/Review/GetProducts?searchProduct=' + product + '&perPage=' + perPage); 
    }); 
+0

がどのようにクライアント側でかつShowReviewDetails部分図でこれを処理していますか? – dime2lo

+0

@ dime2lo他の関連コードを含めるように質問を更新しました –

+0

最初のレンダリング中に、またはページを変更しようとした直後にエラーが発生していますか?つまり、メインページ(部分表示の親)にエラーなくアクセスできますか? – dime2lo

答えて

2

答えrは愚かに単純だった、私は私の自己をとても激しく蹴った私は一週間座っていない!

私は、partialView(GetReviewDetails)をIPagedListとして返すだけでした。

完全性のために(ここでも言葉ですか?)ここが終わったすべてです! 再生回数: 修正指数(親)私は、ページ全体を複製されたよう笑:今

@model IPagedList<YaCu_2017.Models.Review> 
@using System.Globalization 
@using Sakura.AspNetCore 
@using YaCu_2017.Controllers 
@using YaCu_2017.Models 
@{ 
ViewData["Title"] = "Digital Jeeves - Reviews"; 

} 


@foreach (var item in Model) 
{ 
    var stars = Convert.ToDouble(item.Stars); 
    <div class="container opaque-parent z-depth-5"> 
     <div class="row"> 
      <div class="col s6"><h6 style="border-bottom:thin">Title : @Html.DisplayFor(model => item.Title)</h6></div> 
      <div class="col s3"><h6 style="border-bottom:thin">Product : @Html.DisplayFor(model => item.Product)</h6></div> 
      <div class="col s3"><h6 style="border-bottom:thin">Rated: <ej-rating value="@stars" id="@item.Id" read-only="true" /></h6></div> 
     </div> 
     <div class="row" style=""> 
      <div class="col s12" style="border-bottom:inset"> 
       <h6>Comment:</h6> 
      </div> 
     </div> 
     <div class="row" style="border-bottom:inset"> 
      <div class="col s6 offset-s3"> 
       <p class="flow-text">"@Html.DisplayFor(model => item.ReviewText)"</p> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col s3"> 
       <p>Date Created : @Html.DisplayFor(modelItem => item.CreatedDate)</p> 
      </div> 
      <div class="col s3"> 
       <p>Chosen Display Name: @Html.DisplayFor(modelItem => item.DisplayName)</p> 
      </div> 
     </div> 
    </div> 
    <hr /> 
} 

コントローラ:

@model Sakura.AspNetCore.IPagedList<YaCu_2017.Models.Review> 
@{ 
ViewBag.Title = "Review Dashboard"; 
@using YaCu_2017.Controllers; 
} 
<p class="green-text">@ViewBag.StatusMessage</p> 
<p class="red-text">@ViewBag.ErrorMessage</p> 

<h2>Our Product Reviews</h2> 
<div class="row"> 
<div class="col s2"> 

    <h5>Filter by Product:</h5> 

    <form method="get"> 
     @{ 
      var product = ReviewController.GetProductListIncId(); 
      var productCount = ReviewController.GetProductCountList(); 
      ViewBag.ProductList = product; 
      ViewBag.ProductCount = productCount; 
     } 
     <select asp-items="@ViewBag.ProductList" id="searchProduct" class="dropdown-button btn"></select> 
     <h5>Reviews per page</h5> 
     <select asp-items="@ViewBag.ProductCount" id="perPage" class="dropdown-button btn"></select> 
    </form> 

</div> 
</div> 

<div class="row"> 
<div class="col s12 center center-align center-block"> 
    <p>Page @(Model.TotalPage < Model.PageIndex ? 1 : Model.PageIndex) of @Model.TotalPage<pager class="pagination" setting-link-attr-data-ajax="true" /></></p> 
</div> 
</div> 
<hr /> 
<div> 
<div class="reviewView" id="filter"> 
    @await Html.PartialAsync("ShowReviewDetails", Model) 
</div> 
</div> 
<div class="row"> 
<div class="col s12 center center-align center-block"> 
    <p>Page @(Model.TotalPage < Model.PageIndex ? 1 : Model.PageIndex) of @Model.TotalPage<pager class="pagination" setting-link-attr-data-ajax="true" /></></p> 
</div> 
</div> 

修正ShowReviewDetails(チャイルド/部分)がループのみを持っている

私はGetProducts()コントローラを持っています。これはajax経由で部分ロードをロードするためのもので、をIPagedListとして追加する必要があります

 [HttpGet] 
    [AllowAnonymous] 
    public async Task<ActionResult> GetProducts(string searchProduct, int? page, string perPage) 
    { 
     var product = int.Parse(searchProduct); 

     var obj = await this.ShowReviewDetails(searchProduct, page, perPage) as IPagedList; 
     return PartialView("ShowReviewDetails", obj); 
    } 

率制御:

 public async Task<ActionResult> Index(Review model, string sortOrder, string searchString, string searchProduct, int? page, string perPage) 
    { 

     await ShowReviewDetails(model, sortOrder, searchString, searchProduct, page, perPage); 
     return View(); 
    } 

そして最後にShowReviewDetails:

 public async Task<ActionResult> ShowReviewDetails(string searchProduct, int? page, string perPage) 
    { 
     // get product via id 
     var prodId = Convert.ToInt32(searchProduct); 

     if (prodId > 0) 
     { 
      var dbProd = await _context.Product.FindAsync(prodId); 
      var prod = new Product() 
      { 
       Id = dbProd.Id, 
       ProductName = dbProd.ProductName, 
       Cost = dbProd.Cost, 
       ProductCategory = dbProd.ProductCategory, 
       ProductDescription = dbProd.ProductDescription, 
      }; 
      searchProduct = prod.ProductName; 
     } 
     else 
     { 
      searchProduct = "All"; 
     }   
     if (perPage == "0") 
     { 
      perPage = _context.Product.Count().ToString(); 
     } 
     var perPageGet = Convert.ToInt32(perPage); 
     if (perPageGet <= 0) 
     { 
      perPageGet = _context.Product.Count(); 
     } 
     int pageSize = Convert.ToInt32(perPageGet); 
     int pageNumber = (page ?? 1); 

     IEnumerable<Review> reviews = await _context.Review.Where(r => r.ReviewApproved == true).ToListAsync(); 
     if (!string.IsNullOrWhiteSpace(searchProduct) || !string.IsNullOrEmpty(searchProduct)) 
     { 

      searchProduct = StringExtensions.UppercaseFirst(searchProduct); 
     }   
     if (!string.IsNullOrEmpty(searchProduct) || !string.IsNullOrWhiteSpace(searchProduct) || searchProduct == "0") 
     { 
      page = 1; 
      reviews = await _context.Review.Where(r => r.Product == searchProduct && r.ReviewApproved == true).ToListAsync(); 
     } 
     if (searchProduct == "All" || string.IsNullOrEmpty(searchProduct)) 
     { 
      reviews = await _context.Review.Where(r => r.ReviewApproved == true).ToListAsync(); 
     } 

     reviews = reviews.ToPagedList(pageSize, pageNumber); 

     return PartialView(reviews); 
    } 
関連する問題