Question

I have a view that contains a partial view containing a WebGrid that pages via ajax.
However, I am having trouble getting the parent view to be aware of what page the WebGrid is on. What I’m trying to accomplish is this: I have a “create” button on the containing View that navigates to a new page, but I’d like it to pass the current page # as a query string parameter to the new page, so that if they cancel the creation, the original view will load with the previous page rather than loading the first page by default.

The problem I am seeing is, the Model of the parent view doesn’t change when the partial view’s grid updates. And, though I can create a method for the ajaxUpdateCallback, I haven’t figured out how to tell this method what the current page is.

My the pertinent sections of my code looks like this:
On the parent view:

<div id="divList">
    @Html.Partial("_MatterList", Model) //This is where the grid is defined
</div>
<br/>
<div id="newSection">

<input type="button" value="New Matter" onclick="newMatter();"></input>
</div>
<script type="text/javascript">

    var _Page; //I tried creating a javascript variable to hold the page, but can't get it to populate with anything but the default 1.

    function newMatter() 
    {
        var urlAction = "@Url.Action("Create", "Matter", new { area = "Admin" })";
        var subclientid = $("#SubClientID > option:selected").attr("value"); //defined in a form not displayed here
        var clientid = $("#ClientID > option:selected").attr("value");//defined in a form not displayed here
        redirect(urlAction, clientid, subclientid);

    }
    function redirect(urlAction, clientid, subclientid) {
        if(clientid > 0 || subclientid > 0 ) {
            urlAction += "?";
        }
        if(clientid > 0) {
            urlAction += "clientid=" + clientid;
            if(subclientid > 0) {
                urlAction += "&subclientid=" +subclientid;
            }
        }
        //I want to be able to add page in here as well. a la &page=_Page
        window.location = urlAction;
    }

In the _MatterList partial view:

 <div id="matterListing">

    @{

        var grid = new WebGrid<Matter>(null, rowsPerPage: 10, canSort: false, defaultSort: "Name", ajaxUpdateContainerId: "matterListing",ajaxUpdateCallback:"afterUpdate");
        grid.Bind(Model.Matters, rowCount: Model.TotalRows, autoSortAndPage: false);
        @grid.GetHtml(
            tableStyle: "table90",
            alternatingRowStyle: "tableAltRows",
            headerStyle: "tableHeaders",
            columns: grid.Columns(

                grid.Column(...  //there are a lot of columns, removed them because not important to the problem.


                )
                   )
    }
    <script type="text/javascript">
        function afterUpdate() {
            _Page = @Model.PageNumber; //I tried this but it only ever shows 1 because it evaluates when the page first loads.  What I need is for it to dynamically get the correct page at execution time.
        }
    </script>
</div>

I am thinking that what would be needed is for the afterUpdate method to take a parameter with the current page (i.e. call afterUpdate(2) instead of using @Model.PageNumber), but I don’t know how to force the WebGrid to pass that along on the callback. Does anyone have a solution to this issue?

Answer 1

The solution ended up being incredibly simple, I’m kind of embarrassed how long it took for me to come up with it.

On the _MatterList partial view, I created form and placed a HiddenField with the page number:

<form id="frmPage">
    @HiddenFor(model => model.PageNumber)
</form>

Then in the main page I modified newMatter() to extract that page, and redirect() to add it as a query string parameter:

function newMatter() 
{
    var urlAction = "@Url.Action("Create", "Matter", new { area = "Admin" })";
    var subclientid = $("#SubClientID > option:selected").attr("value"); //defined in a form not displayed here
    var clientid = $("#ClientID > option:selected").attr("value");//defined in a form not displayed here
    var page = $("#frmPage").find("#PageNumber").val();
    redirect(urlAction, clientid, subclientid, page);
}

function redirect(urlAction, clientid, subclientid, page)
{
        if(clientid > 0 || subclientid > 0  || page > 1) {
            urlAction += "?";
        }
        if(clientid > 0) {
            urlAction += "clientid=" + clientid;
            if(subclientid > 0) {
                urlAction += "&subclientid=" +subclientid;
            }
            if(page > 1) {
                urlAction += "&page=" + page;
            }
        }
        else if(page > 0){
            urlAction += "page=" + page;
        }
        window.location = urlAction;
}