Как отправить идентификатор затронутого элемента в частичный просмотр внутри foreach l oop в MVC5

Question

У меня есть представление о том, какой список принадлежит ролям компании. Код такой, как показано ниже:

@{
    foreach (var companyRole in Model.ListOfCompanyRoles)
    {
        @Html.Partial("Roles/_DeleteRole", @companyRole)


        <div class="list-group-item jsPopulateDetails" data-role-id="@companyRole.Id" data-toggle="sidebar" data-sidebar="show">
            <a href="#" class="stretched-link"></a> <!-- .list-group-item-figure -->
            <div class="list-group-item-figure">
                <div class="tile tile-circle bg-blue">@companyRole.Name.Substring(0, 1) </div>
            </div><!-- /.list-group-item-figure -->
            <!-- .list-group-item-body -->
            <div class="list-group-item-body">
                <h4 class="list-group-item-title"> @companyRole.Name </h4>
            </div><!-- /.list-group-item-body -->
        </div><!-- /.list-group-item -->
        <!-- .list-group-item -->
    }
}

Это правильно загружает роли и отображает детали выбранной роли правильно. Я использовал ajax, чтобы показать детали, а код такой, как показано ниже,

 @section scripts
 {
    <script>
        $(document).ready(function () {
            //update Details pane
            $(".jsPopulateDetails").on("click",function() {
                var roleId = $(this).attr("data-role-id");
                console.log(roleId);
                $.ajax({
                    url: "http://localhost:1888/api/CompanyRoles/GetRole/" + roleId,
                    method: "GET",
                    success: function(data) {
                        console.log(data);
                        $('#RoleName').text(data.name);
                        $('#RoleStatus').text(data.enabled);
                        $('#RoleDescription').text(data.description);
                    }
                });
            });
        });
    </script>
}

Я включил кнопку удаления и хочу удалить элемент, к которому прикоснулись, когда пользователь нажимает эту кнопку удаления. Для этого я использовал частичный вид внутри форча l oop @Html.Partial("Roles/_DeleteRole", @companyRole). Это удаляет роль при нажатии, но не затрагиваемую роль. Это удаляет роль с наибольшим номером (например: - 1, 2, 3 и т. Д. c). Я хочу удалить затронутый элемент и понятия не имею, как это сделать.