带有 javascript 函数参数的 MVC ActionLink

Question

我在下拉菜单中有一个这样的按钮：

<li><button class="btn btn-white btn-sm delete-group fa fa-trash" dataid="@item.InterimReviewId">Delete</button></li>

调用 javascript 函数如下：

        $('.delete-group').click(function () {
            var url = "/Fiscalizations/Delete";
            var id = $(this).attr('dataid');
            $.get(url + '/' + id, function (data) {
                $('#editor-content-container').html(data);
                $('#editor-container').modal('show');
            });
        });

调用模态 window:

<div class="modal fade" id="editor-container" tabindex="-1"
     role="dialog" aria-labelledby="editor-title">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content animated flipInY" id="editor-content-container"></div>
    </div>
</div>

一切如我所料。我的目标是将按钮与 ActionLink 交换，然后我的问题就开始了。

我写了这样的东西：

<li>@Html.ActionLink("Delete Interim Review", "Delete", "InterimReviews", new { dataid = item.InterimReviewId }, new { @class = "delete-group" })</li>

它正确地调用了函数，但它调用了地址为 /InterimReviews/Delete?dataid=1

的错误 HTTP 请求，而不是模态 window

如有任何解决问题的提示，我将不胜感激

编辑：我解决了错误请求的问题（contoller 和 Actionlink 中的参数名称不同）。所以现在唯一的问题是 ActionLink javascript 函数不会触发模态 window

Answer 1

当您使用 ActionLink 时，您将创建：

<a href="Delete/InterimReviews" class="delete-group" data-id="">Delete Interim Review</a>

因此，当您单击 link 时，浏览器将导航至 Delete/InterimReviews。您需要做的是防止浏览器将 <a> 视为 link (preventDefault())，您可以这样做：

$('.delete-group').click(function (e) {
        e.preventDefault(); //this will stop the link 
        var url = "/Fiscalizations/Delete";
        var id = $(this).attr('dataid');
        $.get(url + '/' + id, function (data) {
            $('#editor-content-container').html(data);
            $('#editor-container').modal('show');
        });
    });

顺便说一句，使用 dataid 作为 html 属性是无效的 - 你应该使用像 data-id 这样的东西，它可以在 razor 中使用 data_id 创建，并且可以使用 $.data('id').

读取

Answer 2

点击锚标签通常会向 url 发出正常的 GET 请求。所以你需要防止这种默认行为。您可以使用 jquery preventDefault 方法来执行此操作。另一个选项是方法末尾的 return false。

假设，Delete 操作方法有一个名为 dataid 的参数，您可以使用 Html.ActionLink 方法，它将生成正确的相对于操作的 url具有正确路由值（查询字符串）的方法（例如：\InterimReviews\Delete?dataid=101）。如果您的参数名称不同，请更新您的剃刀代码以使用它（您正在使用的重载中的第四个参数）所以您所要做的就是阅读点击的锚标签的url 并将其用于您的通话。无需自己进行任何字符串连接即可将 id 添加到 url!

$(function () {

    $('a.delete-group').click(function (e) {
        e.preventDefault();

        var url = $(this).attr("href");
        $.get(url, function (data) {
            $('#editor-content-container').html(data);
            $('#editor-container').modal('show');
        });
    });

});

我还强烈建议您将删除操作更改为 HttpPost 类型的操作。 updates/deletes 数据应为 POST 类型的任何操作方法。如果您正在显示确认对话框，GET 就可以了。但是对于实际的删除，使用 HttpPost 类型的操作方法并使用 $.post 从客户端调用。

带有 javascript 函数参数的 MVC ActionLink

MVC ActionLink with parameter for javascript function

javascript

asp.net

asp.net-mvc

jquery

actionlink