Данные пользователя не отображаются в модальном режиме, но при нажатии кнопки открывается новая вкладка, кроме первой записи - PullRequest
Новая
       36

Данные пользователя не отображаются в модальном режиме, но при нажатии кнопки открывается новая вкладка, кроме первой записи

0 голосов
/ 07 февраля 2019

У меня есть таблица с различными пользователями и кнопка «Подробности», которая должна отображать сведения о пользователе в модальном всплывающем окне.Это работает для первого в списке, но во всех остальных он открывает новую вкладку для информации, я уверен, что упускаю что-то очевидное, но это сбивает меня с толку.

Контроллер; 

    [HttpGet]
    public ActionResult DetailsPopup(int id)
    {
        var user = UIDal.GetToolUser(id);
        return PartialView(user);
    }

Код кнопки: 

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.DomainAccount)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.DisplayLogonId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.UnlimitedAccess)
                </td>
                <td id="toolUserIdValue" style="display:none;">
                    @Html.DisplayFor(modelItem => item.ToolUserId)
                </td>
                <td class="float-left">

                    <a href="@Url.Action("DetailsPopup", "ToolUser" , new { id = item.ToolUserId })" class="btn btn-warning" id="btnDetailsModal" data-target="#detailsModal" data-toggle="tooltip" data-placement="top" title="User Details">
                        <i class="fas fa-info-circle"></i>
                    </a>

                </td>
            </tr>
        }

Подробности Модальный: 

        <div id="detailsModal" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">User Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div id="detailsBody" class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="modalClose" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

jQuery: 

    $(document).ready(function () {
    $("#btnDetailsModal").on("click", function (e) {
        e.preventDefault();
        var uid = document.getElementById("toolUserIdValue").innerHTML;
        var trimString = uid;
        trimString = trimString.trim();
        uinfo = trimString;

            $.ajax({
                type: "GET",
                url: "@Url.Action("DetailsPopup")" + '/' + uinfo,
                async: true,
                cache: false,
                data: JSON.stringify(uinfo),
                contentType: "application/json; charset=utf-8",
                //dataType: "json",
                success: function (data) {
                    //$("#responsedata").html("");
                    $("#detailsBody").html(data);
                    $("#detailsModal").modal('show');
                },
                error: function(errmsg) {
                    alert(JSON.stringify(errmsg));
                    $('#loadingDiv').hide();
                }
            });
    });
});


$('#modalClose').on("click", function () {
    $(this).removeData('detailsBody');
})

1 Ответ

0 голосов
/ 07 февраля 2019

Измените ваш код следующим образом 

<td class="float-left">

                    <a href="#" onClick="getDetails(@item.id)" class="btn btn-warning"  data-target="#detailsModal" data-toggle="tooltip" data-placement="top" title="User Details">
                        <i class="fas fa-info-circle"></i>
                    </a> 
                </td>

, а затем просто создайте функцию вне готовой функции, например: 

function getDetails(var id)
{
 $.ajax({
                type: "GET",
                url: "ToolUser/DetailsPopup/"+id,
                async: true,
                cache: false,
                data: JSON.stringify(uinfo),
                contentType: "application/json; charset=utf-8",
                //dataType: "json",
                success: function (data) {
                    //$("#responsedata").html("");
                    $("#detailsBody").html(data);
                    $("#detailsModal").modal('show');
                },
                error: function(errmsg) {
                    alert(JSON.stringify(errmsg));
                    $('#loadingDiv').hide();
                }
            }); 
}

Это должно работать, я думаю, не в среде, чтобы проверить этокод, так что опечатки и синтаксическая ошибка могут быть там в любом случае дать ему шанс

...