ASP.NET Razor Grid Pager in Partial View

Question

Firstly thanks for taking the time to look at my problem.

I have a ASP.net MVC3 website in which we are using Razor.

Within this website we have a page which display a grid in a partial view.

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

on the main page I've added some javaScript to check if the grid requires updating and then update it if neccessary and this is working nicely.

However when you then move to page 2 of the grid after the update, the partial page is being displayed full screen rather than within it's parent view. I've noticed the url's for the page links update after the refresh, any ideas on how this can be avoided.

Partial View below

@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>

Partial 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 refreshing the partial view.

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

Any suggestions on how I can change this behaviour would be most appreciated. Thanks in advance.

Answer 1

Without seeing generated HTML, I am having to guess on how to fix your issue, but I can determine what your issue is most likely.

You have some type of click handler that handles changing the page (or updating the grid which could include changing the page). However, your grid/pager/grid updating element is inside of your partial view. When you reload content into the div that contains the pager, jQuery is losing the reference to the pager/grid and thus the AJAX is not occurring.

For instance, let's say I have the following HTML:

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

And I update the information inside of the div dynamically, then any click handlers for the span such as:

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

will no longer function. In order to prevent this, you have to attach the handler to an HTML item that is not being replaced by a dynamic call. In this instance, I could make the click handler:

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

This says to attach a click handler on an element called mySpan inside of the myDiv element. If I refresh the content inside of the div, the click handler will still function. This is how you replace the depreciated .live() calls in jQuery. Additionally, you can actually attach your handler to the body tag in your HTML.

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

You can reference this answer to see perhaps some more detail.