Hi Ainguahj,
Check this example. Now please take its reference and correct your code.
Here i have used HTMl table to show you the example. Same you can do for WebGrid as the WebGrid is rendered as HTML Table in browser.
Refering the below example i have created the example.
Controller
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
NorthwindEntities entities = new NorthwindEntities();
return View(from customer in entities.Customers.Take(10)
select customer);
}
[HttpPost]
public ActionResult GetSelected(string[] selectedCustomers)
{
if (selectedCustomers != null)
{
TempData["Message"] = string.Join(",", selectedCustomers);
}
NorthwindEntities entities = new NorthwindEntities();
DataTable dt = new DataTable("Grid");
dt.Columns.AddRange(new DataColumn[4] { new DataColumn("CustomerId"),
new DataColumn("ContactName"),
new DataColumn("City"),
new DataColumn("Country") });
var customers = from customer in entities.Customers.Take(10)
select customer;
foreach (var customer in customers)
{
if (selectedCustomers.Contains(customer.CustomerID))
{
dt.Rows.Add(customer.CustomerID, customer.ContactName, customer.City, customer.Country);
}
}
return RedirectToAction("Index");
}
View
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<_322105_Checked_WebGrid_Row.Customer>>" %>
<%@ Import Namespace="_322105_Checked_WebGrid_Row" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
</head>
<body>
<%using (Html.BeginForm("GetSelected", "Home", FormMethod.Post))
{%>
<table id="WebGrid" cellpadding="0" cellspacing="0">
<tr>
<th>
</th>
<th>
CustomerID
</th>
<th>
ContactName
</th>
<th>
City
</th>
<th>
Country
</th>
</tr>
<% foreach (Customer item in Model)
{ %>
<tr>
<td>
<input type="checkbox" name="selectedCustomers" value="<%: item.CustomerID %>" />
</td>
<td>
<%: item.CustomerID %>
</td>
<td>
<%: item.ContactName %>
</td>
<td>
<%: item.City %>
</td>
<td>
<%: item.Country %>
</td>
</tr>
<% } %>
</table>
<br />
<br />
<input type="submit" value="Get Selected" />
<% } %>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chkHeader = $("<input type = 'checkbox' id = 'chkHeader' />");
$("#WebGrid th:first-child").append(chkHeader);
chkHeader.click(function () {
if ($(this).is(":checked")) {
$("#WebGrid td input[type=checkBox]").attr("checked", "checked");
} else {
$("#WebGrid td input[type=checkBox]").removeAttr("checked");
}
});
$("#WebGrid input[name=selectedCustomers]").click(function () {
UpdateHeaderRowCheckBox(chkHeader);
});
var selected = '<%: TempData["Message"]%>'.split(",");
for (var i in selected) {
$("#WebGrid input[value='" + selected[i] + "']").attr("checked", "checked");
}
UpdateHeaderRowCheckBox(chkHeader);
});
function UpdateHeaderRowCheckBox(chkHeader) {
if ($("#WebGrid td input[type=checkBox]:checked").length == $("#WebGrid td input[type=checkBox]").length) {
chkHeader.attr("checked", "checked");
} else {
chkHeader.removeAttr("checked");
}
}
</script>
</body>
</html>
Screenshot
