简体   繁体   中英

how to call javascript confirm dialog function in html.actionlink in asp.net mvc?

I want to show a confirm dialog menu, when user clicks DELETE button.

But button doesn't trigger my script. After triggering JavaScript, if user chose OK, script must go to the action. Else, if user clicks the CANCEL, nothing should happen.

Here is the JavaScript code;

<script type="text/javascript">
    $(document).ready(function () {
        $(".confirmDialog").on("click", function (e) {
            // e.preventDefault(); use this or return false
            var url = $(this).attr('href');
            $("#dialog-confirm").dialog({
                autoOpen: false,
                resizable: false,
                height: 170,
                width: 350,
                show: { effect: 'drop', direction: "up" },
                modal: true,
                draggable: true,
                buttons: {
                    "OK": function () {
                        $(this).dialog("close");
                        window.location = url;
                    }, "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });
            $("#dialog-confirm").dialog('open');
            return false;
        });
    });
</script>

Here is MVC codes;

<div style="text-align: right; font-weight: bold; font-size: larger; color: red;">
    <tr>
        <td>@Html.ActionLink("Delete", "Your-Action", new { @class = "confirmDialog" })</td>
    </tr>
</div>
<div id="dialog-confirm" style="display: none">
    <p>
        <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
        Are you sure ?
    </p>
</div>

The Overload of Actionlink which you are using expects 3rd parameter as objectroutes not htmlattributes .

Correct actionlink as shown:

@Html.ActionLink("Delete", "Your-Action", new{} ,new { @class = "confirmDialog" })

OR

@Html.ActionLink("Delete", "Your-Action", null ,new { @class = "confirmDialog" })

The rest of your code is just fine..!!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM