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

调用模态窗口：

<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请求

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

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

Answer 1

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

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

因此，当您点击该链接时，浏览器将导航到Delete/InterimReviews。您需要做的是阻止浏览器将<a>视为链接（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创建，并且可以使用{ {1}}。

Answer 2

单击锚标记通常会对网址执行正常的GET请求。所以你需要防止这种默认行为。您可以使用jquery preventDefault方法来执行此操作。另一种选择是在方法结束时return false。

假设Delete操作方法有一个名为dataid的参数，您可以使用Html.ActionLink方法，它将使用正确的路由值为action方法生成正确的相对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类型操作。任何更新/删除数据的操作方法都应该是POST类型。如果您正在显示确认对话框，GET就可以了。但对于实际的删除，请使用HttpPost类型的操作方法并使用来自客户端的$.post调用。

带有javascript函数参数的MVC ActionLink

2 个答案: