无法在 mvc4 actionlink 中点击和发送参数

Question

我正在创建链接一个按钮，当用户单击链接按钮时，我正在调用部分视图。我希望有 Actionlink 按钮的单击事件并在 actionlink 中发送参数，但我遇到了问题。我无法发送参数和点击事件。我正在使用类选择器进行点击，如下所示。 这是我的操作链接按钮。

@foreach (var group in Model.records)
 {
  <tr>
  <td>@Html.ActionLink(@group.clientId.ToString(),"",new { @clientId =@group.clientId.ToString(),@class ="delete" },null)</td>
  </tr>
 }

这是我的 jquery 代码。

  $('.delete').click(function (id) {
                alert(1);
                $.ajax({
                    type: 'POST',
                    dataType: 'html',
                    data: { clientId: id },
                    url: '/DocumentVerification/detailsbyClientId',
                    success: function (data) {
                        $('#detailsbyclientId').html("");
                        $('#detailsbyclientId').html(data);
                    }
                });
            });

目前，当我点击下面的操作链接时，浏览器中会出现 URL。 谁能建议我哪里出错了？提前致谢。

http://localhost:62777/DocumentVerification?clientId=1006&class=delete

Answer 1

您的ActionLink() 错误，您将类名添加为路由值。但是没有必要使用ActionLink()（如果你这样做了，那么你需要取消默认重定向）。另外，你方法中的id参数是事件对象（不是值）

把你的html改成

<a href="#" data-id="@group.clientId" class="delete">@group.clientId</a>

和脚本

$('.delete').click(function (id) {
    var id = $(this).data('id');
    $.ajax({
        type: 'POST',
        dataType: 'html',
        data: { clientId: id },
        url: '@Url.Action("detailsbyClientId", "DocumentVerification")', // don't hard code url's
        success: function (data) {
            // $('#detailsbyclientId').html(""); not required
            $('#detailsbyclientId').html(data);
        }
    });
});

或者更简单

var url = '@Url.Action("detailsbyClientId", "DocumentVerification")';
$('.delete').click(function (id) {
    var id = $(this).data('id');
    $('#detailsbyclientId').load(url, { clientId: id });
});

Answer 2

因为您将 路由值对象 和 html 属性对象 混合到一个对象中，并将其作为单个参数传递给方法。您当前的通话与以下重载匹配

public static MvcHtmlString ActionLink(
    this HtmlHelper htmlHelper,
    string linkText,
    string actionName,
    object routeValues,
    object htmlAttributes
)

因此，您的单个对象将转到 routeValues 参数，并且您将 null 传递给第四个参数（htmlAttributes）

将 html 属性作为单独的参数传递。您还可以将要为 ajax 调用调用的 url 指定为链接 href。这里我使用另一个重载，我指定操作名称和控制器名称以及路由值。

@Html.ActionLink(group.clientId,"detailsByClientId","DocumentVerification"
                       ,new { clientId =group.clientId}, new {@class ="delete" })

这将生成带有类似"/DocumentVerification/DetailsByClientId?clientId=25"和css类delete的href值的链接

现在由于 clientId 在查询字符串中，您可以简单地使用单击项目的 url（href 值）进行 ajax 调用。

$('.delete').click(function (e) {
     e.preventDefault();
     $.post($(this).attr("href"),function(data){
        $('#detailsbyclientId').html(data);                   
    });
});