从actionlink获取属性到jquery

时间:2016-09-11 22:07:43

标签: jquery asp.net-mvc razor

如何从actionlink获取属性到jquery?

@Html.ActionLink("Edit contact", "Edit", "Contact", new { Area = "Customers", contactId = -1 }, new { @id="EditContact", @class = "btn btn-info" })

我希望在按联系人时动态更新contactId

$(document).on('click', '#contacts .list-group-item', function(e) {
        var id = (this.id);
        var elem = $('#EditContact');
        var newUrl = elem.prop('href').replace('-1', id);
        elem.prop('href', newUrl);
    });

此代码有效,但只有一次,因为-1更改。所以我需要收集contactId并将其保存为变量。

$(document).on('click', '#contacts .list-group-item', function(e) {
                var id = (this.id);
                var elem = $('#EditContact');
                var oldId = elem.attr('contactId');
                var newUrl = elem.prop('href').replace('oldId', id);
                elem.prop('href', newUrl);
    });

我试过这个,但oldId未定义。如何收集contactId

1 个答案:

答案 0 :(得分:1)

您可以做的是,不要将-1保持为路线值,而只是生成没有路线值的链接。所以它只是基本URL(没有用于contactId的查询字符串)。单击链接后,您可以使用此基本URL并附加ID并生成新URL并导航到该URL。

@Html.ActionLink("Edit contact", "Edit", "Contact", new { Area = "Customers" }, 
                                        new { @id="EditContact", @class = "btn btn-info" })

在点击事件中,请确保阻止默认点击事件行为。

$(function () {

    $(document).on('click', '.list-group-item', function (e) {
        e.preventDefault();
        var id = (this.id);
        var newUrl = $('#EditContact').attr("href") + '?contactId=' + id;
        window.location.href = newUrl;
    });    

});

另一个更好的解决方案是,当您在循环中使用类“list-group-item”构建项目时,您可以为该URL添加数据属性。

例如

@foreach(var item in SomeCollection)
{
  <div class="list-group-item" data-url="@Url.Action("Edit", "Contact",
                                            new { Area = "Customers" ,contactId=item .Id})">
       Some Name of the Item in the loop
  </div>
}

现在,单击此按钮时,请阅读url data属性并将其用于导航。

$(function () {

    $(document).on('click', '.list-group-item', function (e) {
        e.preventDefault();           
        window.location.href = $(this).data("url");
    });    

});