Refresh MVCContrib Grid after performing a row action

Question

I am using MVCContrib mostly for the paging, sorting, and filtering aspects. My grid contains all of the addresses in our mailing list application (backend only). The user can delete, activate, and inactivate list members, so there are action links for these options on each row. Using jQuery, I am capturing that click and performing other things like display notification of the action is completed.

Because of this, the problem I have is how do I refresh the grid after I perform these actions so the user can see the results? On a delete, I can hide the row. What can I do for when a person activates/deactivates an email? Just use jQuery to update the value in the table that shows the status?

// Activate the email address
$(".ActivateLink").click(function() {
    var id = $(this).attr("href");
    var i = id.indexOf("#");
    id = id.substring(i + 1);
    $.ajaxSetup({ 'async': false });
    $.post("/List/Activate", { "id": id }, function(data) {
        $(".message").text(data.message).addClass("notice");
    }, "json");
    return false;
});

My Controller Action:

    //
    // POST: /List/Activate
    [HttpPost]
    public ActionResult Activate(int id)
    {
        string message = String.Empty;
        db.ActivateEventEmail(id, ref message);
        return Json(new { message = message });
    }

My View:

<%= Html.Grid(Model.EmailAddressList).Columns(column => {
    column.For("ImageActions").Named("").Sortable(false);
    column.For(a => (a.Email.Length > 30) ? String.Format("{0}...", a.Email.Substring(0, 30)) : a.Email).Encode(true).SortColumnName("Email").Named("Email Address");
    column.For(a => (a.ContactName.Length > 30) ? String.Format("{0}...", a.ContactName.Substring(0, 30)) : a.ContactName).Encode(true).SortColumnName("ContactName").Named("Contact Name");
    column.For(a => a.SignupDate).Named("Signup Date").Format("{0:d}").Attributes(@style => "text-align: right;");
    column.For(a => a.AccountStatus ? "Yes" : "No").SortColumnName("AccountStatus").Named("Active").Attributes(@style => "text-align: center;");
}).Sort(Model.GridSortOptions)
    .Attributes(@class => "table-list", style => "width: 100%;").RowAttributes(c => new MvcContrib.Hash(@class => "gridrow"))
%>

Answer 1

Okay, I figured this out.

First of all I just had to add a call to a function I'll have later down the code.

// Activate the email address
$(".ActivateLink").live('click', function() {
    var id = $(this).attr("href");
    var i = id.indexOf("#");
    id = id.substring(i + 1);
    $.ajaxSetup({ 'async': false });
    $.post("/List/Activate", { "id": id }, function(data) {
        refreshTable();
        $(".message").text(data.message).addClass("notice");
    }, "json");
    return false;
});

The above controller action, I don't touch and the view I had above, I don't touch. The new javascript function I create is as follows:

    function refreshTable() {
        $.ajaxSetup({
            async: false,
            cache: false
        });
        $.get('<%= Url.Action("Index", "List", new { filterText = Model.FilterText, filterActive = Model.FilterActive, filterGroup = Model.FilterGroup }) %>',
        function(response) {
            $(".table-list").replaceWith(response)
        });
    };

Make sure to have the cache: false in there. IE likes to pull data from cache and really make a mess of things.

On my Index action I changed from return View(emailListGrid); to

        if (Request.IsAjaxRequest())
            return PartialView("EmailMaint", emailListGrid);
        else
            return View(emailListGrid);