JQuery Modal - Hidden Div против частичных представлений (MVC3) - PullRequest
3 голосов
/ 20 октября 2011

Я создаю веб-сайт с использованием MVC3 / C # / ASP.NET, который содержит страницу просмотра, на которой будет отображаться всплывающее окно модального типа JQuery (реализация немного отличается от традиционного модального окна, но функциональность довольно похожа). В настоящее время у меня есть разметка, которая войдет в модальное окно, сохраненное как частичное представление (с отдельной связанной моделью).

Я провел небольшое исследование модальных окон JQuery, и кажется, что многие примеры, которые я вижу в Интернете, используют одно представление со скрытым div, а модальное окно просто заполняется разметкой из скрытого дела. В этих примерах есть только одно представление (основное представление для страницы), и данные модели за полями ввода скрытого элемента (и т. Д.) Просто сохраняются в модели, связанной с основным представлением (в отличие от наличия отдельного представления и модель для разметки, которую я хочу отобразить, как в случае, если бы я использовал схему реализации частичного представления).

Мне было интересно, кто-нибудь может дать некоторое представление о том, какой метод является предпочтительным или какова стандартная практика (если таковая имеется) по этому вопросу. Это просто вопрос личных предпочтений? Один способ эффективнее другого?

Каким образом я должен это делать:

  • Частичное представление для разметки модального окна с отдельным видом / моделью
  • Скрытое деление в существующем виде / модели

Примечание: я работаю в команде разработчиков, поэтому очень важно поддерживать соответствие между стандартными практиками.

Любые мысли по этому вопросу будут с благодарностью, Спасибо

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

TL; DR: сейчас я использую частичные представления, нравится мне это или нет. Я все же хотел бы услышать еще несколько мнений по этому поводу.

Ответы [ 3 ]

3 голосов
/ 09 октября 2012

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

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

Спросите себя, зачем мне заполнять скрытый div набором данных, которые конечный пользователь может даже никогда не использовать?Если они не открывают диалоговое окно каждый раз, когда переходят на эту страницу (если это так, то с этой страницей что-то принципиально не так), «эффективнее» не выводить все эти данные в DOM.Самое эффективное, что можно сделать, это загрузить диалоговое окно с частичным представлением и извлекать данные только тогда, когда пользователь запрашивает их просмотр.

1 голос
/ 20 октября 2011

Если вы используете частичное представление для модального диалога, частичное представление останется внутри страницы HMTL DOM, даже если модальное окно закрыто.Я предлагаю использовать отдельные представления для модального всплывающего окна и вызывать его с помощью методов ajax.

Метод частичного просмотра:

<div id="popup_window" title="Pop up title" >

<% Html.RenderPartial("_partialviewname", Model); %>

</div>

Следующий метод с использованием ajax

HTML:

<div id="popup_window" title="Pop up title" > <!-- div to render the popup -->
</div>



<a onclick="javascript:ShowPopUp();" >Click here</a> <!--pop up is given by this link-->

Функциональная часть Ajax

function ShowPopup(

$("#popup_window").dialog({
                autoOpen: false,
                modal: true,
                resizable: false,
               // height: 'auto',

                //width: 565
            });

     $.ajax({

                    type: 'GET',
                    url: '/controller/action', //action to return view 
                    cache: false,
                    success: function (data) {
                        $("#popup_window").empty();
                        $("#popup_window").append(data);





                    }
                });

                $(""#popup_window").dialog("open");
}
0 голосов
/ 20 октября 2011

РЕДАКТИРОВАТЬ: Ну, извините за мое неправильное понимание.Если вы можете использовать повторно, если вы в конечном итоге переключитесь на обновление на основе AJAX или просто захотите получить чистый / простой основной вид, тогда переходите к частичным.

В MVC 3 есть еще один способ - использовать EditorTemplates / DisplayTemplates.Они действительно мощные, но требуют полного изучения, чтобы использовать их полностью.Оба подхода имеют свои плюсы и минусы, это действительно зависит от того, что вы конкретно делаете.

До тех пор, пока я нашел два способа отображения частичных представлений в диалогах jqUI.

Первый загружаетсяпредставление через AJAX или @Html.RenderAction В последнем случае, когда сценарий довольно статичен, используется @Html.RenderPartial непосредственно внутри div, используемого для построения диалога.

Вот метод Ajax, который я использую:

function MyDlg(options,bottoni) {
    var name = options.name;
    $(name).load(options.url, function () {
        var $jQval = $.validator;
        $jQval.unobtrusive.parse($(this));
        $(name).dialog({
            autoOpen: true,
            width: options.width,
            heigth: options.height,
            resizable: false,
            draggable: true,
            title: options.title,
            modal: true,
            buttons: bottoni
        });
        $(name).dialog("open");
    });
}

Как видите, он получает что-то вроде:

var bottoni = {
    "Cancel": function () {
        // cancel pressed
    },
    "Ok": function () {
        // Ok pressed
    }
}
MyDlg({ name: "Edit", width: "auto", height: "auto", title: 'Edit Stuff', url: mvcUrl }, bottoni);

Важными частями являются:

Ненавязчивая активация:

var $jQval = $.validator;
$jQval.unobtrusive.parse($(this));

Итот факт, что диалог открывается в событии load.

В контроллере вы просто возвращаете PartialView("_viewName", model).

Остерегайтесь при использовании диалога, чтобы очистить их.Я предпочитаю программно создать div с помощью document.createElement (), а затем удалить его из DOM при закрытии, но есть сценарии, в которых я должен оставить div в dom.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...