局部视图中的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(){});

您可以参考此答案以查看更多详细信息。