Webgrid refresh with ajax in MVC3

Question

I have a Webgrid that I need to refresh when pressing a button 'Refresh'. I also have a search input.

Everything is working fine, except that everytime that I hit refresh, the pageNumber is being set back to one...

Here is my code...

controller

public ActionResult ListImporting(string searchText = "", int page = 1)
        {
            ViewBag.RowsPerPage = 2;

            searchText = searchText.Trim();
            ViewBag.searchText = searchText;
            ViewBag.page = page;

            DtoPaginatedResult<ListImportingDTO> model = listService.GetListsInProgress(page, ViewBag.RowsPerPage, searchText);

            if (Request.IsAjaxRequest())
                return PartialView("ListImportingGrid", model);
            else
                return View(model);

        }

Then I have a view List Importing that calls the partial...

<input id="refreshButton" type="button" value="Refresh" style="float:right"/>

<div id="resultList" style="margin-top:20px">
    @Html.Partial("ListImportingGrid", Model)
</div>

......

   $("#refreshButton").live("click",updateGrid);

And inside the partial I have the grid, and the current function

function updateGrid() {     
    var pageNumber = @ViewBag.page;
    console.log(pageNumber);
    $.ajax(
     { type: "GET" ,
         url: '/Admin/ListImporting/',
         data: { searchText: $("#searchBox").val(),  
         page: pageNumber
             } ,
             dataType: "html" ,
             success: function  (data){             
                 $("#resultList").html(data);
                  } 
         })
    }

Rob Carroll · Accepted Answer · 2013-07-12 14:31:00Z

1

When the page is loaded you are hard coding the pagenumber to ViewBag.page which is always going to be equal to one on page load.

Instead what you need to do is create a hidden input in the partialview and place the javascript code in the main view.

Then when the updateGrid function is triggered look in the patial view, via javascript, and find the value that is in the hidden field for the page number.

Switch to PagedList, it's a lot easier to work with ajax, pagination, and webgrids. https://github.com/TroyGoode/PagedList

answered Jul 12, 2013 at 14:31

Rob Carroll

3871 gold badge7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gaston Claret Over a year ago

I have no idea why this worked, and putting it in the script didnt.. This is the code <input type="hidden" id="pageNumeber" value="@ViewBag.page" /> And in the updateGrid, I just got the value via JQuery

Rob Carroll Over a year ago

It could be a caching issue, I always try to do my javascript in an external js file or in the main view instead of inside of partials. Glad that worked for you though. If you need more webgrid examples let me know, I'm doing some cool searching, paging, page size, and ajax webgrid driven views.

bbedward · Accepted Answer · 2013-07-12 14:17:47Z

0

Your pageNumber is being reset back to 1 because every time you call updateGrid you're resetting it to the ViewBag.page

in other words, the compiled razor code looks like

function updateGrid() {
    var pageNumber = 1;
    ....

So you should create pageNumber somewhere else, if you don't want it to be reset when you call updateGrid, like this

var pageNumber = ViewBag.page;
function updateGrid() {
     ....

answered Jul 12, 2013 at 14:17

bbedward

6,4887 gold badges39 silver badges62 bronze badges

1 Comment

Gaston Claret Over a year ago

But when i click on page 2.... in the controller it's doing ViewBag.page = 2... and returning the partial... After, when I click on update... why isnt ViewBag.page = 2???

Collectives™ on Stack Overflow

Webgrid refresh with ajax in MVC3

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related