局部視圖中的ASP.NET Razor Grid Pager

Question

首先，感謝您抽出寶貴的時間來研究我的問題。

我有一個正在使用Razor的ASP.net MVC3網站。

在該網站內，我們有一個頁面，該頁面以局部視圖顯示網格。

<div id="tradeList">
    @{ @Html.Partial("~/Views/Trade/TradeGrid.cshtml", Model.TradeList); }
</div>

在主頁上，我添加了一些javaScript來檢查網格是否需要更新，然后在必要時進行更新，並且運行良好。

但是，當您在更新后移至網格的第2頁時，部分頁面將全屏顯示，而不是在其父視圖中顯示。 我注意到刷新后頁面鏈接的URL會更新，有關如何避免這種情況的任何想法。

下面的局部視圖

@model HRM.Models.Trades

@{
    var grid = new WebGrid(Model.RecapTradeModelList, canPage: true, rowsPerPage: Model.PageSize);        
}
@grid.Table(columns: columns, tableStyle: "standardtable", htmlAttributes: new { id="tradeGridID" })
@{
    string sRowCount;
    if (grid.TotalRowCount == 0)
    {
        sRowCount = "No trades found";
    }
    else if (grid.TotalRowCount == 1)
    {
        sRowCount = "1 trade found";
    }
    else
    {
        sRowCount = Convert.ToString(@grid.TotalRowCount) + " trades found.";
    }

    if (grid.TotalRowCount > 1)
    {
        int iStart;
        int iEnd;
        iStart = (grid.RowsPerPage * grid.PageIndex) + 1;
        iEnd = (grid.RowsPerPage * (grid.PageIndex + 1));

        sRowCount += " Showing " + Convert.ToString(iStart) + " to " + Convert.ToString(iEnd) + ".";
    }
}

<div id="pager">@grid.Pager(mode: WebGridPagerModes.All, numericLinksCount: 7)</div>
<div id="rowcount">
    @sRowCount Display
<select name="pageSize" onchange="this.form.submit();">
    <option value="5" @(Model.PageSize == 5 ? "Selected" : "")>5</option>
    <option value="10" @(Model.PageSize == 10 ? "Selected" : "")>10</option>
    <option value="20" @(Model.PageSize == 20 ? "Selected" : "")>20</option>
    <option value="25" @(Model.PageSize == 25 ? "Selected" : "")>25</option>
    <option value="50" @(Model.PageSize == 50 ? "Selected" : "")>50</option>
</select>
    rows per page.
</div>

部分視圖控制器

public PartialViewResult TradeGrid(int pageSize = 0, string filterPeriod = "")
    {            
        Response.Cache.SetCacheability(HttpCacheability.NoCache);
        Response.Cache.SetNoStore();            

        string userRole = _UserRepository.GetUserRoleByUserName(User.Identity.Name);

        Trades model = new Trades();
        model.PageSize = pageSize;

        model.RecapTradeModelList = _TradeRepository.GetRecapTrades(User.Identity.Name, userRole, filterPeriod);

        model.WebGridColumns = GenerateGridColumns();

        return PartialView(model);            
    }

JavaScript刷新部分視圖。

if (updateRequired == "True")
{
    //$('#tradeList').load('/Trade/TradeGrid?filterPeriod='+fp+'&pageSize='+@(Model.TradeList.PageSize));
    jQuery.ajax({
       url: "/Trade/TradeGrid",
       data: { filterPeriod: fp, pageSize: @(Model.TradeList.PageSize)},
       contentType: "application/html; charset=utf-8",
       type: "GET",
       dataType: "html",
       success : function(data){
                        $('#tradeList').html(data);
                    }
       })                   
 }

我將如何改變這種行為的任何建議將不勝感激。 提前致謝。

Answer 1

在沒有看到生成的HTML的情況下，我不得不猜測如何解決您的問題，但是我可以確定您最有可能遇到的問題。

您可以使用某種類型的單擊處理程序來處理更改頁面（或更新網格（其中可能包括更改頁面））。 但是，您的grid / pager / grid更新元素位於部分視圖的內部。 當您將內容重新加載到包含分頁器的div中時，jQuery會丟失對分頁器/網格的引用，因此不會發生AJAX。

例如，假設我有以下HTML：

<div id="myDiv"><span id="mySpan">Some Text</span></div>

然后，我會動態更新div內部的信息，然后更新跨度的所有點擊處理程序，例如：

$("#mySpan").on("click", function(){});

將不再起作用。 為了防止這種情況，您必須將處理程序附加到未由動態調用替換的HTML項上。 在這種情況下，我可以創建點擊處理程序：

$("#myDiv").on("click", "#mySpan", function(){});

這表示在myDiv元素內部的名為mySpan的元素上附加單擊處理程序。 如果我在div內刷新內容，則單擊處理程序仍將起作用。 這是您替換jQuery中已貶值的.live()調用的方式。 此外，您實際上可以將處理程序附加到HTML中的body標簽。

$("body").on("click", "#myElement#, function(){});

您可以參考此答案以查看更多詳細信息。