Here is simple Ajax with post. Assuming that you do have an html table with a name called
AjaxGrid
and a div with a name
bio
$(document).ready(function () {
$('#AjaxGrid tbody tr').click(function () {
var selectedraw = $(this).closest("tr");
var id = selectedraw.find("td:first").text();
var url = "FamousFolks/GetFamousFolk/" + id;
$.post(url,
null,
function (folk) {
$('#bio').html(folk.Bio);
}
);
});
<table id="AjaxGrid">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.ID)
</th>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
</tr>
</thead>
@foreach (var item in Model)
{
<tr>
<td style="visibility: hidden">
@Html.DisplayFor(modelItem => item.ID)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
</tr>
}
<td>
<div id="bio">
</div>
</td>
</table>
And here is the controller.
[HttpPost]
public ActionResult GetFamousFolk(int? id = null)
{
Folks folk = folksRepository.Load(id);
return Json(folk);
}
And register the routing like this
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"FamousFolks",
"{controller}/{action}/{id}",
new { controller = "FamousFolks", action = "Index", id = UrlParameter.Optional }
);
}