ASP.NET Razor Grid Pager in Partial View

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> 

Частичный View Controller

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(){}); 

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

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

Вы можете указать this answer, чтобы увидеть, возможно, более подробную информацию.