Показать представление другого контроллера в Modal с соответствующим идентификатором asp.net mvc

Question

У меня есть таблица, которая содержит некоторые поля для отображения обобщенных данных в действии «Индекс» контроллера «Жалоба».Нажав на идентификатор данных таблицы, я показываю детали жалобы в действии другого контроллера.(Подробности / Индекс)

В таблице, которую я перечислил, обобщенные данные приведены ниже.

 @foreach (var item in Model)
            {
                <tr>
                    <td>
                        <a href="@Url.Action("Index", "Detail", new { id = item.Id })">
                            #
                        </a>
                    </td>

                        <td>@item.Employee.Name</td>

                        <td>@item.Dealer.Name</td>

                        <td>@item.Customer.Name</td>

Когда я нажимаю на метку, она корректно направляет меня на страницу индекса контроллера деталей с идентификатором.То, что я хочу, это вместо того, чтобы показывать это на новой странице, я хочу показать это внутри модального.

Подробности / страница указателя ниже.

  @foreach (var item in Model)
                {
                    <div class="card-body">
                        <h5 class="card-title text-black-50 font-weight-bold text-center">Complaint Number : @item.ComplaintId</h5>
                        <hr />
                        <br />

                        <hr />

                            <p class="card-text">Employee Name : @item.Complaint.Employee.Name</p>
                            <p class="card-text">Phone Number : @item.Complaint.Employee.Phone</p>
                            <p class="card-text">City: @item.Complaint.Employee.City </p>
                            <p class="card-text">E-mail: @item.Complaint.Employee.Email </p>
                        }                          
                            <p class="card-text">Dealer Name : @item.Complaint.Dealer.Name</p>
                            <p class="card-text">Phone Number : @item.Complaint.Dealer.Phone</p>
                            <p class="card-text">City: @item.Complaint.Dealer.City </p>
                            <p class="card-text">E-mail: @item.Complaint.Dealer.Email </p>
                        }

Я нашел эту тему, у которой почти такая же проблема, как и я, но я не мог ее понять.

Получение модального содержимого Bootstrap с другой страницы

Я использую bootstrap 4, кстати, так как я видел некоторые комментарии, что bootstrap 4 удалил что-то об удаленном модале или что-то в этом роде.

Спасибо за вашу помощь и время.

Answer 1

Решение # 1 - iframe внутри модала

Одним из решений является то, что на страницу можно загрузить только один модал с iframe внутри.Каждый раз, когда вы нажимаете на тег, вы используете javascript, чтобы изменить источник iframe на правильный URL-адрес и вручную открыть модал.

HTML

Вместо того, чтобы создавать URL-адрес для каждой жалобы,Вы можете заполнить идентификатор детали с помощью data-, который может быть использован позже методом javascript / jQuery.

<table class="table table-hover">
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    <a class="complaint-detail" data-complaint-detail-id="@item.Id">
                        #
                    </a>
                </td>
                <td>@item.Employee.Name</td>
                <td>@item.Dealer.Name</td>
                <td>@item.Customer.Name</td>
            </tr>
         }
    </tbody>
</table>

<!-- Modal template -->
<div id="complaint-detail-modal" class="modal fade">
    <div class="modal-content">
        <div class="modal-header">...</div>
        <div class="modal-body">
            <iframe frameborder="0" />
        </div>
        <div class="modal-footer">...</div>
    </div>
</div>

JavaScript

$(function() {
    // Bind the click event of each anchor
    $('a.complaint-detail').click(function(){
        let detailId = $(this).data('complaint-detail-id'),
            url = '@Url.Action("index", "detail", new { area = "" })/' + detailId,
            $modal = $('#complaint-detail-modal'),
            $iframe = $modal.find('iframe');

        // Change the source of the iframe to the url
        $iframe.prop('src', url);    // Or you can use $iframe.attr('src', url);

        // Manually trigger the modal
        $modal.modal('show');

        return false;
    });
});

Решение № 2 - с помощью сторонней библиотеки

Другим решением является создание URL-адреса детали жалобы, как вы это сделали, иподключите стороннюю библиотеку, которая обрабатывает содержимое iframe лучше, чем обычный модал начальной загрузки.Я покажу вам, как это сделать, используя fancybox (http://fancyapps.com/fancybox/3/).

HTML

. На этот раз вам не нужно загружать модальный шаблон начальной загрузки на страницу. Вместо этого вам нужнодополнительный класс как дескриптор fancybox. Я назвал его popup-fancy.

<table class="table table-hover">
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    <a class="popup-fancy" 
                        href="@Url.Action("index", "detail", new { area = "", id = item.Id })">
                        #
                    </a>
                </td>
                <td>@item.Employee.Name</td>
                <td>@item.Dealer.Name</td>
                <td>@item.Customer.Name</td>
            </tr>
         }
    </tbody>
</table>

JavaScript

Я предполагаю, что вы следуете документации fancybox, чтобы успешно загрузить библиотекуЗатем вам нужно определить его инициализацию глобально. Теперь здесь я определяю 4 селектора, потому что я хочу иметь 4 разных размера всплывающих окон, основанных на имени селектора. Вам не нужно делать это, если вы планируете иметь только 1size.

$(function() {
    $().fancybox({
        selector: 'a.popup-fancy',
        type: 'iframe',
        baseClass: 'fancybox-md',
        iframe: {
            preload: false
        }
    });

    $().fancybox({
        selector: 'a.popup-fancy-lg',
        type: 'iframe',
        baseClass: 'fancybox-lg',
        iframe: {
            preload: false
        }
    });

    $().fancybox({
        selector: 'a.popup-fancy-xl',
        type: 'iframe',
        baseClass: 'fancybox-xl',
        iframe: {
            preload: false
        }
    });

    $().fancybox({
        selector: 'a.popup-fancy-xxl',
        type: 'iframe',
        baseClass: 'fancybox-xxl',
        iframe: {
            preload: false
        }
    });
});

Смотрите здесь, я продублировал код только для того, чтобы я мог иметь другой базовый класс css, соответствующий другому селектору. В документации fancybox он также поддерживает атрибут data-, но мне нравится мой методлучше - не хотите загрязнять HTML.

CSS (SASS)

Теперь вы можете определить эти пользовательские классы CSS, определенные в разделе javascript, чтобы настроить ширину необычного всплывающего окна.

.fancybox-md {
    .fancybox-content {
        max-width: 36.75rem;
    }
}

.fancybox-lg {
    .fancybox-content {
        max-width: 65.625rem;
    }
}

.fancybox-xl {
    .fancybox-content {
        max-width: 78.75rem;
    }
}

.fancybox-xxl {
    .fancybox-content {
        max-width: calc(100% - 3rem);
    }
}

Отказ от ответственности

Я написал все от руки, чтобы они не тестировались.