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