Windows подтвердить - действие по умолчанию не работает - PullRequest
Новая
       6

Windows подтвердить - действие по умолчанию не работает

0 голосов
/ 15 апреля 2020

У меня есть вид Razor с тегом привязки href. У меня событие 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>

1 Ответ

0 голосов
/ 16 апреля 2020

Я попытался решить вашу проблему, и ниже приведено одно из решений:

Поведение по умолчанию для свойств тега onclick и href состоит в том, чтобы выполнить onclick, а затем следовать href, пока onclick не верните false или событие не было предотвращено. В вашем случае событие не предотвращается, и вы не передали событие как параметр в свой метод 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>
...