CODEWITHSUNDEEP
c#jqueryajaxasp.net-mvc-3webgrid
Ben Pretorius
Ben Pretorius

Reputation: 4329

Refreshing a MVC3 / MVC4 WebGrid without losing current page / filter

I have a WebGrid bound to a Plain Class Object. Nothing Fancy. The Grid features some paging and is used to display a list of users. The Last column of the Grid is an Ajax Action Link which fires a Pop Up DIV with some Edit Controls. On completion of this Edit the OnSuccess Event fires and closes the DIV. This is where I would like to now refresh the grid without losing the current page/search/filter applied. One way that comes to mind is to somehow grab the WebGrids Url and then refreshing it with JQuery, however.. I cant find a way to retrieve the current url and parameters? Anyone tried this before?

UPDATE: Thanks to the answers this is what I have resorted to now:)

The ActionResult called by the ajax edit

[HttpPost]
public ActionResult EditUserDetails(User model)
{
    if (ModelState.IsValid)
    {
        // for the sake of brevity.

        // do your edit logic here and then on success you return:

        return Json(new { state = "success", id = "1", name = "John", surname = "Doe", etc = "blah" });
    }
    else
    {
        return Json(new { state = "failed", message="some error text here maybe?" });
    }
}

Then on the edit click I set the class of the row to be .editRowSelected. (i will be changing this to an id rather)

Then onSuccess of the Ajax Update Call:

function onSuccess(ajaxContext) {
    var result = eval(ajaxContext);
    if (result.state == "Success") {

        var row = $('.busyEditRow');
        row.html(content);

        $('.busyEditRow').removeClass('busyEditRow');
    }
    else {
        // Display some error stuffs here with the message - result.message
    }
}

This updates the grid row with the new data:)

Upvotes: 3

Views: 3905

Answers (1)

Cambridge Developer
Cambridge Developer

Reputation: 161

Having just edited one record, rather than refreshing the entire grid and having to then post back the filters applied, current page, etc, I would have a function in my controller that returns a partial view containing data for a single user.

You could call this via AJAX after the DIV closes, and use jQuery to replace the row in the grid with the HTML returned from the function.

As long as each row in the grid is identifiable by id, it should be simple enough to find the relevant row and replace it.

Upvotes: 1

Related Questions