CODEWITHSUNDEEP
javascriptjqueryasp.netasp.net-mvcasp.net-mvc-4
hislam
hislam

Reputation: 3

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>

Upvotes: 0

Views: 3245

Answers (1)

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18873

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

Upvotes: 3

Related Questions