MVC3 WebGrid 行选择复选框答案

【问题标题】：MVC3 WebGrid Row Select CheckboxMVC3 WebGrid 行选择复选框
【发布时间】：2012-04-30 13:08:19
【问题描述】：

我找遍了，似乎找不到答案。

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

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

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

我该怎么做？

【问题讨论】：

标签： asp.net-mvc-3 webgrid

【解决方案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++;
});

【讨论】：

糟糕，按回车键并保存。打算写更多......谢谢你的代码，但我实际上需要它来刷新页面。它甚至不必是一个复选框。它可能是一个按钮。我有一个特定的图形，看起来有点像我要使用的复选框。您是否有一些代码可以让我在此处放置一个 2 状态按钮...一种状态用于选择行时，另一种状态用于未选择行时，单击它时使用 SelectedRow= 刷新页面X 查询字符串？
@user856232 是的，我认为您也可以使用上述方法。只需将type='checkbox'替换为type='image'，然后像上面设置'checked'一样设置'src'（取决于gridlSelectedRow == item）。
太棒了。我会试一试。谢谢！
我似乎找不到运行您显示的 javascript 的好地方。我已经有一个 $(document).ready 脚本来设置我的一些 div。我试着把这段代码放在那里，但输入元素还没有。我想知道 WebGrid 的东西是否在 document.ready 之后运行？你有什么建议？
也许元素在那里，但它们还没有显示为可见。当脚本到达 $("input.select").each 时，即使列表中有一行，它也会跳过它。