Аккордеон, получение всегда первый Id. ASP.NET Core and Ajax

18 августа 2019, 23:20

При нажатии на любое сообщения из списка, получает всегда id того элемента который стоит первый. Почему?

Вот код:

Html

@foreach (var item in Model)
{
    if (item.Status == "New")
    {
        <div class="panel panel-default" data-id="@item.Id"  onclick="GetMessageId()" id="clickId">
            <div class="panel-heading">
                <a class="btn btn-success" data-toggle="collapse"  href="#imageGallery-@item.Id" style="width: 100%">
                    <h4 style="color: white; text-align: left; width: auto; z-index: 3">
                        От: @Html.DisplayFor(modelItem => item.EmployeeTo.Name) -
                        <strong> @Html.DisplayFor(modelItem => item.Title)</strong>
                    </h4>
                </a>
            </div>
            <div class="panel-body collapse" id="imageGallery-@item.Id">
                <strong style="color: dimgrey">Заголовок:</strong><h5> @Html.DisplayFor(modelItem => item.Title)</h5><br />
                <div style="width: 100%">
                    <strong style="color: dimgrey">Содержимое</strong> <h4>@Html.DisplayFor(modelItem => item.Content)</h4>
                </div> <br /><hr />
                <p style="color: dimgrey">Дата отправки: @Html.DisplayFor(modelItem => item.DateFrom) </p>
                <a class="btn btn-primary" onclick="showModalSendOrderAdmin()">Переслать</a>
            </div>
        </div>
    }
}

Ajax запрос

var idMessage;
    function GetMessageId() {
        var messageId = document.getElementById('clickId');
        idMessage = messageId.getAttribute('data-id');
        $.ajax({
            type: 'POST',
            url: '@Url.Action("OrderStatus", "OrderEmployees")',
            data: {
                idMessage: idMessage
            },
            success: function (data) {
                console.log('success!');
            }
        });
    }

Метод

public ActionResult OrderStatus(string idMessage)
        {
            var messageId = _context.OrderEmployees.SingleOrDefault(m => m.Id == idMessage);
            if (messageId != null && messageId.Status == "New")
            {
                messageId.Status = "Open";
                _context.Update(messageId);
                _context.SaveChanges();
            }
            return RedirectToAction(nameof(Index));
        }

Answer 1

Суть вашей проблемы была в том, что вы доставали неправильные данные.

Давайте разберемся, вы вешаете onclick на div, и по идее, когда мы на него нажимаем, мы переходим в функцию GetMessageId, там мы получим с помощью event.target, наш div, а с помощью метода getAttribute достанем нужный нам id и запишем его в messageId.

Вот и все.

onclick="GetMessageId(this)"

function GetMessageId(event) { 
    var messageId = event.getAttribute('data-id'); 
 
    $.ajax({ 
        type: 'POST', 
        url: '@Url.Action("OrderStatus", "OrderEmployees")', 
        data: { 
            idMessage: messageId 
        }, 
        success: function (data) { 
            console.log('success!'); 
        } 
    }); 
}