asp.net-mvc-3 - MVC3 WebGrid 行选择复选框

Question

我到处搜索，似乎找不到答案。

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

我希望这是一个复选框，而不是测试“选择”。当用户点击复选框时，我希望选择网格中的该行并将该框变为“选中”。

我希望选中和未选中状态是我提供的图像。

我该怎么做呢？

Answer 1

除非您使用 Ajax 做一些花哨的事情，否则“选择”链接会刷新页面，并将“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++;
});