ASP.NET MVC3：提交前确认框

Question

我有以下代码，基本上是一个复选框，会导致提交操作。 由于从数据库中删除任务时需要一个弹出框来确认删除，因此需要显示某些消息，例如“您确定要删除吗”等。

<input type="checkbox" 
       onclick="location.href='@Url.Action("Complete", "Tasks", 
                                           new { TaskID = item.TaskID })'" />

这里使用的是 Razor 语法。

- IAmGroot

Answer 1

你可以使用confirm方法：confirm。

<input type="checkbox" onclick="if (confirm('Are you sure?')) { window.location.href = '@Url.Action("Complete", "Tasks", new { TaskID = item.TaskID })'; }" />

或者用jQuery以更加不显眼的方式：

<input type="checkbox" id="complete" name="complete" data-url="@Url.Action("Complete", "Tasks", new { TaskID = item.TaskID })" />

然后在单独的 JavaScript 文件中：

$(function() {
    $('#complete').click(function() {
        if (confirm('Are you sure?')) {
            window.location.href = $(this).data('url');
        }
    });
});

我也非常强烈建议您在控制器操作中使用另一个动词来修改服务器上的状态，例如将任务标记为已完成。PUT、POST和DELETE是不错的选择。在您的情况下，由于您正在修改现有项目，因此POST动词似乎是最自然的选择。

- Darin Dimitrov

---

@Doomsknight，不显眼意味着你正在将标记与脚本分离。由此产生的结果是你的标记大小更小，带宽消耗更少，你的网站加载速度更快。脚本是静态资源，会被客户端浏览器缓存，因此只需提供一次服务。 - Darin Dimitrov

@Doomsknight，你也可以测试一下这个代码：if ($(this).is(':checked') && confirm('确定吗？')) { ... }。 - Darin Dimitrov

不显眼意味着即使用户在浏览器中没有启用JavaScript，您的网站仍然可以正常工作。 - wassertim

@Doomsknight，然后将一个类应用于您的复选框class="complete"，然后使用类选择器而不是id选择器：$('.complete').click...。就检查/取消检查而言，请使用$(this).is(':checked')来确定复选框是否已被选中，并相应地调整if条件。 - Darin Dimitrov

@DarinDimitrov。您就像一位大师！感谢您极大地增强了我的JavaScript和语法实践知识。但我希望在单击“取消”时不要出现勾选标记。请问有什么建议吗？ - IAmGroot

Answer 2

您可以拦截表单提交事件并询问确认。根据确认结果返回true或false以允许提交。 akin

 $("#form").submit(function (event) {


   if ( confirm("Are you sure you want to delete"))
       return true;
 else{
     event.preventDefault();
     return false;
      }
   });

- hemant

---

我有多个按钮<button type="submit">，怎样只应用于一个按钮？ - Kiquenet

Answer 3

可以这样实现。

<input name="button"  type="submit" value="Delete" class="btn btn-danger cancel" onclick="return confirm('Are you sure?')" />

- Moumit

Answer 4

hemant的解决方案对我没有用。Moumit的解决方案确实有效，但当我将确认函数移动到页面JavaScript文件中的命名函数时，确认按钮显示出来，但是当我点击取消时它并没有被阻止（当我写这篇文章时，我想知道是否只需要传递一个事件参数，调用e.PreventDefault()，然后返回true）。

无论如何，这里有另一个例子，借助JQuery的一点帮助，在我的aspnetcore mvc razor页面中确实有效：

$(function () {
    $('#mySaveButton').click(function (e) {
        e.preventDefault();
        if (confirm('Are you sure?')) {
            $('#myForm').submit();
        }
    });
});

我从一个更完整的示例中进行了调整，该示例从头到尾使用一个示例项目进行了演示：如何使用jQuery显示确认对话框

- topsail