web-dev-qa-db-ja.com

部分ビューでページングを使用する、asp.net mvc

私は誰かが次のことについて助言していただければ幸いです。

@model PagedList.IPagedList<Items>
@using PagedList.Mvc; 
 @foreach (var item in Model)
          {//displaying data}

私のポケットベルは次のようになります：

@Html.PagedListPager(Model, page => Url.Action("Index", new { humanID = ViewBag.HumanID, page = page }),
                                                             new PagedListRenderOptions
                                                             {
                                                                        LinkToFirstPageFormat = "<<",
                                                                        LinkToPreviousPageFormat = "prev",
                                                                        LinkToNextPageFormat = "next",
                                                                        LinkToLastPageFormat = ">>",

                                                              })

問題は、次のページをクリックすると、_Layoutなしで空白が返されることです。 _Layoutを常に再読み込みしたくありません。ページャにAjax.ActionLinkを使用する方法はありますか？部分ビュー内でUpdateTargedIdできるようにするには？

c#asp.net-mvcasp.net-mvc-partialviewpagedlist
12
Gyuzal R

Ajax.ActionLinkは使用できませんが、リンクをAJAX化することはできます。ポケットベルを_<div>_に配置します。

_<div id="myPager">
    @Html.PagedListPager(
        Model, 
        page => Url.Action(
            "Index", 
            new { 
                humanID = ViewBag.HumanID, 
                page = page 
            }
        ),
        new PagedListRenderOptions
        {
            LinkToFirstPageFormat = "<<",
            LinkToPreviousPageFormat = "prev",
            LinkToNextPageFormat = "next",
            LinkToLastPageFormat = ">>",
        }
    )
</div>
_

リンクをAJAXifyします。

_$(function() {
    $('#myPager').on('click', 'a', function() {
        $.ajax({
            url: this.href,
            type: 'GET',
            cache: false,
            success: function(result) {
                $('#some_grid_container').html(result);
            }
        });
        return false;
    });
});
_

successコールバックで$('#some_grid_container')を使用したことに注意してください。これはテーブル全体をラップするdivである必要があります。

28
Darin Dimitrov

PagedListでAjaxを実装する方法はまだあります。

@Html.PagedListPager((IPagedList)Model,
 page => Url.Action("Index", new { humanID= ViewBag.HumanID, page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(PagedListRenderOptions.PageNumbersOnly,
        new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "Get",
            UpdateTargetId = "targetContainer"
        }))

この部分はajaxリクエストを作成し、「targetContainer」のコンテンツを置き換えます。これにより、Ajax呼び出しに関する多くのオプションと、これを表示する方法が提供されます。

8
Utkarsh

私のプロジェクトのセットアップ：MVC4、MvcPaging（PagedList）、Areas。この答えは、そのセットアップを対象としています。

短い答え：
ポケットベルのAjaxOptionsを構成するときに、エリアを設定していることを確認してください（適切に）

new AjaxOptions { UpdateTargetId = "grid-list" , OnBegin = "beginPaging", 
                  OnSuccess = "successPaging", OnFailure = "failurePaging"}
        , new { area = "Admin", controller = "MyController", action = "Index"}

長い答え：
PagedListサンプルは、エリアに渡してエリア内でページングを行う方法を示していますが、パーシャルビューでページングを使用する方法のサンプルは示していません。

サンプルプロジェクトには、次のコード（_AjaxEmployeeList.cshtmlから取得）があります。

}, new AjaxOptions
            {
                UpdateTargetId = "grid-list",
                OnBegin = "beginPaging",
                OnSuccess = "successPaging",
                OnFailure = "failurePaging"
            }, 
    new { controller = "Home", action = "Index", 
        employee_name = ViewData["employee_name"] }))

PagedListサンプルはforeach内のインラインテーブルを使用するため、この設定で問題や競合は発生しません。

@using MvcPaging
@model IPagedList<MvcPagingDemo.Models.Employee>
<table class="table table-bordered table-hover">
        @foreach (var item in Model)
        { 
            <tr>
               <td>@item.ID</td>
            </tr>
        }    
</table>

このテーブルを部分ビューにリファクタリングしている間（ロジックをカプセル化するため（およびページングを処理するため）、私はを取得し始めました。検索された場所 "

@using MvcPaging
@using MyProject.Models
@model IPagedList<MyProject.Models.MyModel>
  foreach (var item in Model)
        {
        <div data-task-id="@item.MyModel_ID.ToString()">
            @Html.Partial("_Detail", item)
        </div>
        }

エリアをHtml.Partial（）呼び出しに強制しようとする変更の配給を行いました。
ルーティングの処理方法の変更これは機能しませんでした。
MVCでデフォルトルート（エリアへ）を設定する方法
部分ビューへのパスを完全に修飾しますこれは機能しましたが醜い。
mvc3-別の領域での部分ビューの使用
部分ビューをロードするための調査により、MVCエンジンがリクエストを処理する方法がわかりました。これにより、Ajaxページャーの変更に戻り、リクエストごとにエリアを送信しました。 Html.ActionLinkと同様の構文を使用しようとしました。 （これは機能しなかった/機能しなかった）

@Html.ActionLink("Admin", "Index", "Admin", new { area = "Admin" }, null)

それはうまくいかなかったので、他のすべてが失敗したので、コントローラーを設定するためのパターンをミラーリングしました。

new AjaxOptions { UpdateTargetId = "grid-list" ,  OnBegin = "beginPaging", 
                  OnSuccess = "successPaging", OnFailure = "failurePaging"}
           , new { area = "Admin", controller = "MyController", action = "Index"}

これからの私の個人的なレッスン：C＃！= Razor！= JavaScript。それぞれの動作は少し異なりますが、自分の文章がどの言語であるかを確実に理解する必要があります。

3
Lodlaiden