MVC3 Razor и модальное всплывающее окно

Question

Мне нужно получить модальное всплывающее окно, которое отображает форму, которая будет сохранять данные обратно в БД. Есть хороший пример этого? Ajax более гибкий или использует диалог jquery?

Answer 1

Я использовал плагин JQuery UI Dialog и использую JQuery для загрузки модального диалога через ajax, и мне это очень нравится.

Мне пришлось взломать мой код, чтобы дать вам что-то полезное, поэтому извиняюсь за любые синтаксические ошибки, но я использую этот jquery,

$('#MyAtag').click(function () {
    // Add a container for the modal dialog, or get the existing one
    var dialog = ($('#ModalDialog').length > 0) ? $('#ModalDialog') : $('<div id="ModalDialog" style="display:hidden"></div>').appendTo('body');
    // load the data via ajax
    $.get( 'mycontroller/myaction', {},
        function (responseText, textStatus, XMLHttpRequest) {
            dialog.html(responseText);
            dialog.dialog({
                bgiframe: true,
                modal: true,
                width: 940,
                title: 'My Title'
            }); 
        }
    );
});

, который связывает вызов ajax 'get' с событием 'click' ссылки. Запрос get ajax возвращает частичное представление соответствующего действия в моем проекте MVC, которое затем отображается в модальном диалоговом окне.

Вот примерный пример того, как может выглядеть контроллер

    public ActionResult MyAction()
    {
        // Do Some stuff
        //...

        // If the request is an ajax one, return the partial view
        if (Request.IsAjaxRequest())
            return PartialView("PartialViewName");

        // Else return the normal view
        return View();
    }

Представление для диалога будет просто нормальным частичным представлением.

Я использую следующий файл .css, который «затеняет» страницу за модальным диалогом

.ui-widget-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #AAA url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
    opacity: .8;
    filter: Alpha(Opacity=30);
}

Вам может понадобиться обойти css для #ModalDialog, чтобы он выглядел правильно,

Answer 2

вы можете использовать JQuery диалог. есть также инструменты Jquery, которые вы можете использовать.

http://flowplayer.org/tools/demos/overlay/modal-dialog.html

Он также имеет очень маленькую площадь.

Answer 3

Это простой, но это не плагин: http://deseloper.org/read/2009/10/jquery-simple-modal-window/

Модальные JQuery плагин: http://www.ericmmartin.com/projects/simplemodal/

Надеюсь, это поможет.