Отображать представление «Подробности» как модальное всплывающее окно - PullRequest
Новая
       39

Отображать представление «Подробности» как модальное всплывающее окно

0 голосов
/ 11 сентября 2018

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

Кнопка, которая вызывает мои данные. Контроллер: 

@Html.ActionLink("Details", "Details", new { id = prod.ID }, new { @class = "btn btn-danger" }) |

Код контроллера 

public ActionResult Details(int? id)
    {
        PRODUCTS pRODUCTS = db.PRODUCTS.Find(id);
        if (pRODUCTS == null)
        {
            return HttpNotFound();
        }
        return View(pRODUCTOS);
    }

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

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

я думаю, что вы должны использовать jquery ajax для вызова действия, нажав на кнопку или ссылку действия, и получите свою модель в виде результата json и верните ее, затем сначала очистите ваши модальные данные и заполните их новым результатом, а в конце покажите свой модал......

0 голосов
/ 11 сентября 2018

Чтобы показать данные внутри модального всплывающего окна, вам нужен метод действия, который возвращает HTML-разметку, необходимую для модального всплывающего окна. Поэтому первым шагом является создание метода действия, который возвращает результат частичного просмотра. 

public ActionResult Details(int id)
{
    var product = db.PRODUCTS.Find(id);
    if (product== null)
    {
        return HttpNotFound();
    }
    return View(product);
}

В приведенном выше простом примере я запрашиваю сущность и передаю объект сущности непосредственно в мое представление, используя метод PartialView. Если у вас есть модель для просмотра, используйте ее.

Теперь в представлении Details.cshtml мы напишем код для возврата разметки HTML , необходимой для модального всплывающего окна . Поскольку мы передаем объект PRODUCTS в представление, мы позаботимся о том, чтобы наше представление также строго типизировалось для этого типа. 

@model YourNamespaceHere.PRODUCTS 

<div id="modal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"> Details</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h2>Hello from @Model.Name</h2>    
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

В приведенном выше примере я просто печатаю значение свойства Name объекта PRODUCTS в модальном теле. Вы можете обновить его, чтобы при необходимости отобразить другие свойства.

Теперь мы внесем некоторые изменения в нашу HTML-разметку, отображаемую для продукта. Нам нужно событие click в ссылке детали, чтобы открыть модальное диалоговое окно. Итак, давайте сначала дадим некоторые атрибуты элементу ссылки, которые мы позже сможем использовать для подключения события click. Здесь я собираюсь добавить дополнительный CSS-класс к ссылкам, modal-link. 

@Html.ActionLink("Details", "Details", new { id = prod.ID }, 
                                       new { @class = "btn modal-link" })

Теперь давайте напишем некоторый код JavaScript для прослушивания события click в элементе ссылки с классом CSS modal-link, прочитаем значение атрибута href элемента и сделаем Ajax-вызов этого URL и отрендерим ответ на этот вызов для построения модального диалога. 

$(function () {

    $('body').on('click', 'a.modal-link', function (e) {

        e.preventDefault();

        $("#modal").remove();

        // Get the Details action URL
        var url = $(this).attr("href");

        //Make the Ajax call and render modal when response is available
        $.get(url, function (data) {
            $(data).modal();
        });
    }); 

});

Я использую CSS-класс в качестве селектора, вы можете использовать любой другой селектор, как пожелаете

...