jquery - 如何在按钮点击后弹出确认对话框

Question

我想做的是当我按下在 View 中创建项目时弹出一个确认对话框。据我从阅读其他帖子(如果我错了请纠正我)中了解到的是使用jquery。我对 jquery/javascript 不太熟悉，所以我正在尽力理解我在做什么。我在网上找到的代码是这样的。

<form method="post">
    <input id="Create" name="Common" type="submit" value="Create" />

<script type="text/javascript">
    $(document).ready(function () {
        $("#Create").click(function (e) {
            // use whatever confirm box you want here
            if (!window.confirm("Are you sure?")) {
                e.preventDefault();
            }
        });
    });

现在每次我按下按钮时，它都会立即在 Controller 中触发我的 POST 创建方法，而不显示对话框。有人可以解释一下为什么会发生这种情况以及如何解决它。我尝试添加代码，其中写有 //use another verify box you Want Here ，但我真的不知道我在寻找什么或需要在那里写什么。

我读过的帖子

Where i got the above code from

Delete ActionLink with confirm dialog

ASP.NET MVC ActionLink and post method

Answer 1

一种方法是使用<input type="button" /> 。然后调用submit()对于表格。

<form method="post" id="sampleform">

    <input id="Create" name="Common" type="button" value="Create" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>    
    <script type="text/javascript">
        $(function () {
            $("#Create").click(function (e) {
                if (confirm("Are you sure?")) {
                    console.log('Form is submitting');
                    $("#sampleform").submit();
                } else {
                    console.log('User clicked no.');
                }
            });
        });
    </script>
</form>

如果您使用 ASP.NET MVC，您可能需要考虑使用 Html.BeginForm Html 助手。

@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { Id = "sampleform"}))
{
    <input id="Create" name="Common" type="button" value="Create" />
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>        
<script type="text/javascript">
    ... Same as above
</script>