MVC: JQuery перейти к действию только с идентификатором первой строки

Question

здесь таблица содержит больше строк, каждая строка имеет URL: / Unit / Dept / Id, когда ckick для любой кнопки строки edit_dept перейти к действию с первым параметром строки, каждая строка будет выглядеть как / Unit / Dept / 1

<table id="tbUnits" class="table table-bordered table-hover">
<thead>
    <tr>
        <td> Name</td>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                <button id="edit_dept" class="btn-bootstrap-dialog edit_dept"> Edit</button>
                <div class="modal fade" id="Dept2" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true" data-url='@Url.Action("Dept", "Unit", new { Id = item.Id }, null)'></div>
            </td>

        </tr>
    }
</tbody>

вот JQuery, мне нужно отправить конкретный параметр строки (Id) в действие

@section scripts
{
<script>
    $(document).ready(
        function () {
            $("#tbUnits").DataTable();



            $('.edit_dept').click(function () {
                var url = $('#Dept2').data('url');
                alert(url);
                $.get(url, function (data) {
                    $('#Dept2').html(data);

                    $('#Dept2').modal('show');
                });
            });
        });
</script>

спасибо

Answer 1

Когда вы используете селектор идентификатора, такой как $('#Dept2'), он всегда будет выбирать первый элемент, который он найдет в DOM, с идентификатором Dept2.

Но вы можете выбрать ожидаемый элемент, выбрав parent и затем используя find для выбораэлемент внутри этого конкретного элемента.Вы должны использовать $(this).closest('td').find('#Dept2') для этого.

Попробуйте с.

var url = $(this).closest('td').find('#Dept2').data('url');