Question

首先感谢您抽出时间来研究我的问题。

我有一个ASP.net MVC3网站，我们正在使用Razor。

在这个网站中，我们有一个页面，在局部视图中显示网格。

<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，我不得不猜测如何解决您的问题，但我可以确定您的问题最有可能。

您有某种类型的点击处理程序可以处理更改页面（或更新网格，包括更改页面）。但是，您的网格/寻呼机/网格更新元素位于局部视图内。当您将内容重新加载到包含寻呼机的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(){});

您可以参考this answer来查看更多细节。

部分视图中的ASP.NET Razor网格寻呼机

1 个答案: