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이 변경되기 때문에 한 번만 작동합니다. 그래서 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"); 
    });  

});