带有javascript函数参数的MVC ActionLink

我在下拉菜单中有一个按钮，如下所示：

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

        $('.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');
            });
        });

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

$('.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');
        });
    });

这称为模态窗口：

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

        $('.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');
            });
        });

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

$('.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');
        });
    });

它正确地调用函数，但不是调用模式窗口，而是调用地址为/InterimReviews/Delete的错误HTTP请求？dataid=1

如果能给我一些如何解决这个问题的提示，我将不胜感激

编辑：

---

我解决了错误请求的问题，在contoller和Actionlink中使用了不同的参数名。现在唯一的一个问题是，使用ActionLink javascript功能时，当您使用ActionLink时，不会启动模式窗口，您将创建以下内容：

因此，当您单击该链接时，浏览器将导航到Delete/InterimReviews。 您需要做的是防止浏览器将视为默认链接，您可以这样做：

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

        $('.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');
            });
        });

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

$('.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读取。

单击锚定标记通常会对url执行正常的GET请求。因此，您需要防止这种默认行为。您可以使用jquery preventDefault方法来执行此操作。另一个选项是在方法末尾返回false

假设Delete操作方法有一个名为dataid的参数，您可以使用Html.ActionLink方法，它将使用正确的路由值querystring Ex:\InterimReviews\Delete？dataid=101生成操作方法的正确相对url。如果您的参数名称不同，请更新razor代码以使用您正在使用的重载中的第四个参数，这样您所要做的就是读取单击的锚定标记的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类型的操作。任何更新/删除数据的操作方法都应该是POST类型。如果您显示的是确认对话框，那么GET就可以了。但是对于实际的删除，请使用HttpPost类型的操作方法，并使用来自客户端的$.post调用。

为什么要使用ActionLink而不是按钮？你的控制器方法是什么？我只想检查另一种方法…问题在下面的帖子中解决了请将按钮设置为链接这就是你想要的不要将行为与外观混淆