如何在asp.net mvc中的html.actionlink中调用javascript确认对话框功能？

Question

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>

Answer 1

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..!!