如何在MVC3 Grid中注入JavaScript？

Question

我已经获得

@grid.GetHtml(
   tableStyle: "grid",
   headerStyle: "head",
   alternatingRowStyle: "alt",
   rowStyle: "row",
   selectedRowStyle: "selected-row",
   columns: grid.Columns(
   grid.Column("StartDate", "Start Date", style: "column"),
   grid.Column("EndDate", "Endt Date", style: "column"),
   grid.Column("Title", "Title", style: "column"),
   grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.ID }), style: "column-action"),
   grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", new { id = item.ID }), style: "column-action"))

我想做的是将grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", new { id = item.ID }), style: "column-action")替换为：

<button onclick="$.prompt('Delete',{ buttons: { Ok: true, Cancel: false } })" title="Delete">Delete</button>

我该如何做到这一点？

P.S. 最终目标是在单击“删除”按钮时显示弹出窗口，让用户选择是或否。

- Terminador

Answer 1

如果您给按钮添加一个类，就可以像这样将事件附加到它上面：

C#

grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", new { id = item.ID }, new { @class = "delete-button" }), style: "column-action"))

jQuery 1.7+

$(".delete-button").on('click', function() {
    $.prompt('Delete',{ buttons: { Ok: true, Cancel: false } })
});

< jQuery 1.7

$(".delete-button").click(function() {
    $.prompt('Delete',{ buttons: { Ok: true, Cancel: false } })
});

- Rory McCrossan

---

你的方法看起来不错... 但是我遇到了以下问题：<a href="/Customer/Delete/e633fd53-00b5-4552-9040-1b0fac0d49bd?class=delete-button">删除</a> 你能否详细说明一下 @class 是什么？ - Terminador

抱歉，我的错误，我将样式属性放在路由值参数中。我已经编辑了答案。 - Rory McCrossan

嗯，你知道事件 $(".delete-button") 没有触发吗？你知道我需要在哪里实现它吗？ - Terminador

如果您没有使用jQuery 1.7+，则需要使用$(".delete-button").click(function() ...。 - Rory McCrossan