jqueryへのactionlinkの属性の取得

Question

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が変更されるため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を入手するにはどうすればよいですか？

Answer 1

あなたができることは、ルート値として-1を保持する代わりに、ルート値なしでリンクを生成することだけです。だからそれはちょうどベースURL（contactIのためのクエストリングなし）になります。リンクをクリックすると、このベース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; 
    });  

}); 

別よりよい解決策はあなたがループの中で、クラス「リスト・グループ項目」を持つアイテムを作成するとき、あなたは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データプロパティを読み込み、ナビゲーションのためにそれを使用します。

$(function() { 

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

});