MVC3 WebGrid行选择复选框

Question

我全身都搜索过，似乎无法找到答案。

我有一个带有WebGrid的MVC3项目。第一列是当前使用普通item.GetSelectLink的Select，用于创建选择该行的链接。

我希望这是一个复选框而不是测试“选择”。当用户点击复选框时，我希望选择网格中的那一行，然后选中“检查”框。

我希望已检查和未检查的状态是我提供的图像。

我该怎么做？

Answer 1

除非您使用Ajax做一些奇特的事情，否则“select”链接会刷新页面，并在查询字符串中添加“Selected = index”。这将是一次不寻常的体验，因为人们不习惯触发页面重新加载的复选框。

你可以做这样的事情，完全模仿“选择”链接功能。首先将复选框添加到行：

grid.Column(
    format: (item) => @Html.Raw("<input class='select' type='checkbox'" +  ((grid.SelectedRow == item) ? "checked" : "") + " />")
)

然后添加一些Javascript来处理复选框点击：

var index = 1;
$("input.select").each(function () {
    $(this).data('row', index);
    $(this).click(function () { window.location = "?Selected=" + $(this).data('row'); });
    index++;
});