ASP.NET Razor Grid Pager в частичном представлении

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 динамически, затем любые обработчики кликов для span, такие как:

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

больше не будет функционировать. Чтобы предотвратить это, вы должны прикрепить обработчик к элементу HTML, который не заменяется динамическим вызовом. В этом случае я мог бы сделать обработчик кликов:

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

Это говорит о том, чтобы прикрепить обработчик клика к элементу mySpan внутри элемента myDiv. Если я обновлю содержимое внутри div, обработчик кликов все равно будет работать. Вот как вы заменили амортизированный .live() звонки в jQuery. Кроме того, вы можете прикрепить ваш обработчик к тегу body в вашем HTML.

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

Вы можете сослаться на этот ответ, чтобы увидеть, возможно, более подробно.