Windows 确认 - 默认操作不起作用答案

【问题标题】：Windows confirm - default action not workingWindows 确认 - 默认操作不起作用
【发布时间】：2020-04-15 20:21:12
【问题描述】：

我有一个带有 href 锚标记的 Razor 视图。我有一个 onclick 事件。

当我点击链接时，会出现确认提示。但是，如果我选择“取消”，它仍然会执行代码 - MVC 方法。

这是 Razor 视图：

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title></title>

<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Template/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="~/Template/dist/css/sb-admin-2.css" rel="stylesheet">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">

@Scripts.Render("~/bundles/modernizr")

<link href="~/Template/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>

<body>
@Html.Partial("_NavBar")

<div id="wrapper">
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#"><strong>Functions</strong></a>
        </div>

        @* Navigation left-handside (sidebar). *@
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                      <li>
                        <a href="/User/DeleteUser" onclick="ConfirmDelete()"><i class="fa fa-table fa-fw"></i> Delete Account</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div id="page-wrapper">
        <div class="row">
            <script src="~/Template/vendor/bootstrap/js/bootstrap.min.js"></script>
            <script src="~/Scripts/jquery.validate.min.js"></script>
            <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

            @RenderBody()
        </div>
    </div>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

@RenderSection("scripts", required: false)
</body>
</html>

<script type="text/javascript">
function ConfirmDelete(e) {
    if (confirm("Are you sure you want to delete your account?   Continue ?")) {
        window.location = $(this).attr('href');
    }

    // Stop the default action.
    e.preventDefault();
}
</script>

我尝试使用 jQuery（在链接中添加一个 deleteaccount 类），但它并没有全部提示。它只是直接执行代码。

这是 Razor 视图：

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title></title>

<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Template/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="~/Template/dist/css/sb-admin-2.css" rel="stylesheet">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">

@Scripts.Render("~/bundles/modernizr")

<link href="~/Template/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>

<body>
@Html.Partial("_NavBar")

<div id="wrapper">
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#"><strong>Functions</strong></a>
        </div>

        @* Navigation left-handside (sidebar). *@
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                      <li>
                        <a href="/User/DeleteUser"><i class="fa fa-table fa-fw deleteaccount"></i> Delete Account</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div id="page-wrapper">
        <div class="row">
            <script src="~/Template/vendor/bootstrap/js/bootstrap.min.js"></script>
            <script src="~/Scripts/jquery.validate.min.js"></script>
            <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

            @RenderBody()
        </div>
    </div>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

@RenderSection("scripts", required: false)
</body>
</html>


<script type="text/javascript">
    $('.deleteaccount').click(function (e) {
        if (confirm("Are you sure you want to delete your account?   Continue ?")) {
            // The button's href will be = to: ?????????????.
            window.location = $(this).attr('href');
        }

        e.preventDefault();
    });
</script>

【问题讨论】：

标签： javascript asp.net-mvc razor

【解决方案1】：

我尝试解决您的问题，以下是解决方案之一：

a 标签的 onclick 和 href 属性的默认行为是执行 onclick，然后只要 onclick 不返回 false 或事件未被阻止，就跟随 href。在您的情况下，事件不会被阻止，因为您没有将事件作为参数传递给您的 ConfirmDelete() 方法。因此 onClick 和 Href 都会被执行。

所以试试这个：

function ConfirmDelete(e) {
  if (confirm("Are you sure you want to delete your account?   Continue ?")) {
    return true;
  } else {
    return false;
  }

  // Stop the default action.
  // e.preventDefault();
}

&lt;a href="/controller/action" onclick="return ConfirmDelete()"&gt;&lt;i class="fa fa-table fa-fw"&gt;&lt;/i&gt; Delete Account&lt;/a&gt;

【讨论】：

那行得通。根据另一篇文章，我想用一个更好看的提示替换那个 windows 提示。有一个建议，但它有一个缺陷。有任何想法吗？见：stackoverflow.com/questions/60920573/…