Delete row in webgrid with checkboxes in MVC3 using Visual Studio 2012 - asp.net-mvc

Question

I am new to MVC3. I have coded an application in which I display data into a webgrid with checkboxes. I am trying to find out how to send a particular row id the controller action method when I click on a checkbox. Any help appreciated.

Answer 1

This all depends on what you are trying to do. Typically, in the view, I will add a data attribute like data-rowid="###" and then use jQuery to capture the .click event. Then in the .click event, retrieve the clicked elements value for data-rowid and call .ajax to post the data to the controller.

Answer 2

This is a complete example where I have a WebGrid with the last column containing a "Remove" link that uses Ajax to call an action on the server. On completion of the Ajax request, the corresponding row is removed from the table. The MvcHtmlString is used to inject a span tag into the column. It contains an id value that is subsequently used to identify the row to be removed from the table.
<div id="ssGrid">
#{
var grid = new WebGrid(canPage: false, canSort: false);
grid.Bind(
source: Model,
columnNames: new[] { "Location", "Number", "Protection", "Methodology" }
);
}
#grid.GetHtml(
tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("Location", "Location"),
grid.Column("Number", "Number"),
grid.Column("Protection", "Protection"),
grid.Column("Methodology", "Methodology"),
grid.Column(
format: (item) =>
new MvcHtmlString(string.Format("<span id='ssGrid{0}'>{1}</span>",
item.SecondarySystemId,
#Ajax.RouteLink("Remove",
"Detail", // route name
new { action = "RemoveSecondarySystem", actionId = item.SecondarySystemId },
new AjaxOptions {
OnComplete = "removeRow('ssGrid" + item.SecondarySystemId + "')"
}
)
)
)
)
)
)
</div>
<script>
function removeRow(rowId) {
$("#" + rowId).closest("tr").remove();
}
</script>