How can I use ajax actionlink in WebGrid's header

Question

I'd like to sort the data in WebGrid by clicking the header of the column with some other parameters post to the controller, but the WebGrid's autosorting supply a fixed link on the column header with only two parameters.

I found some way to change the link address on the WebGrid's column header, but it works only on common links and not a ajax ActionLink, so that I can't use partial view to reflash only part of the webpage.

Can anyone help me to solve the question ?

var grid = new WebGrid(Model, canPage: true, rowsPerPage: 2);
@grid.GetHtml(tableStyle: "Contact``TB",headerStyle: "ContactHD",columns: grid.Columns( 
              grid.Column("ID", 
                          @Ajax.ActionLink("ID","Index","Home",new { pid = Model.PageIndex, sort=true},
                                           new AjaxOptions { UpdateTargetId = "grid", 
                                                             HttpMethod = "POST",
                                                             InsertionMode = InsertionMode.Replace 
                                                           }
                                           ),
                           model.id,
                           ))

             );

The code up is the example effect I want to have, it's a wrong code.

score 0 · Answer 1 · answered Aug 22 '12 at 06:49

Here is something you can start with,

As you are able to generate common link, you can bind these links to a jquery ajax call to an action.

Jquery Code

function MyMethod() {
var url = '@Url.Action("GetData")';
$.ajax({
url: url,
type: 'GET',
cache: false,
data: { value: strId},

success: function (result) {
$('#result).html(result);
}
});
}

Action

public ActionResult GetData(string id)
{
return Json(new {foo="bar", ball="dragon"});
}

code taken from here

How can I use ajax actionlink in WebGrid's header

1 Answers1