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

Question

我有一个带有 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 （将删除帐户 class 添加到链接中），它没有提示全部。 它只是执行代码。

这是 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>

Answer 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(); }

 <a href="/controller/action" onclick="return ConfirmDelete()"><i class="fa fa-table fa-fw"></i> Delete Account</a>

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-04-16 10:48:29

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-04-16 10:48:29

解决方案1
0 已采纳 2020-04-16 10:48:29