Лучшие практики для модального окна в приложении Web Forms

Question

На странице списка, щелкнув по одному из элементов, вы увидите подробности в модальном всплывающем окне, которое будет иметь свои собственные функции (например, проверка, обновление и т. Д.). Какова лучшая практика для реализации этого (не искать взлома). Я вижу здесь два варианта:

1. Скрывайте разметку сведений до тех пор, пока не будет нажат элемент списка, выполните запрос ajax, чтобы получить сведения, заполнить и показать раздел сведений.

2. Создайте раздел с подробностями как отдельную страницу. При нажатии на элемент списка, показать эту страницу в модальном окне (это вообще возможно?) Это похоже на подход IFrame и звучит как подход старой школы.

Каковы плюсы минусов этих подходов или есть другие способы сделать это? При нажатии элемента списка не должно быть обратной передачи.

Редактировать: Любые другие мнения приветствуются.

Answer 1

В настоящее время я делаю вариант 1, он очень легкий и все, что вам нужно, это пост ajax (jQuery или UpdatePanel) и какой-то модальный (я использую jQery UI). Это проще, чем публикация на всю страницу, плюс у вас есть дополнительное преимущество - возможность манипулировать страницей, на которой вы находитесь, как часть результата.

Например, у меня есть сетки на странице, редактор модальный, обычно с большим количеством деталей, когда вы нажимаете сохранить, сетка обновляется. Я поместил это в универсальное шаблонное решение, и с ним очень легко работать, и он настолько легок, насколько могут быть веб-формы в такой ситуации, поэтому я полностью поддерживаю вариант 1.

Вот пример подхода, в котором ваш модальный элемент управления наследуется от UpdatePanel (код для краткости) :

public class Modal : UpdatePanel
{
  private bool? _show;
  public string Title
  {
    get { return ViewState.Get("Title", string.Empty); }
    set { ViewState.Set("Title", value); }
  }

  public string SaveButtonText
  {
    get { return ViewState.Get("SaveButtonText", "Save"); }
    set { ViewState.Set("SaveButtonText", value); }
  }

  protected override void OnPreRender(EventArgs e)
  {
    if (_show.HasValue) RegScript(_show.Value);
    base.OnPreRender(e);
  }

  public new Modal Update() { base.Update();return this;}      
  public Modal Show() { _show = true; return this; }
  public Modal Hide() { _show = false; return this; }

  private void RegScript(bool show)
  {
    const string scriptShow = "$(function() {{ modal('{0}','{1}','{2}'); }});";
    ScriptManager.RegisterStartupScript(this, typeof (Modal), 
           ClientID + (show ? "s" : "h"), 
           string.Format(scriptShow, ClientID, Title, SaveButtonText), true);
  }
}

В JavaScript:

function modal(id, mTitle, saveText) {
  var btns = {};
        btns[saveText || "Save"] = function() {
            $(this).find("input[id$=MySaveButton]").click();
        };
        btns.Close = function() {
            $(this).dialog("close");
        };
        return $("#" + id).dialog('destroy').dialog({
            title: mTitle,
            modal: true,
            width: (width || '650') + 'px',
            resizable: false,
            buttons: btns
        }).parent().appendTo($("form:first"));
    }

Тогда в вашей разметке (Не могу придумать лучшего имени, чем MyControls, извините!) :

<MyControls:Modal ID="MyPanel" runat="server" UpdateMode="Conditional" Title="Details">
  //Any Controls here, ListView, whatever
   <asp:Button ID="MySaveButton" runat="server" OnClick="DoSomething" />
</MyControls:Modal>

В ваших страницах кода позади вы можете сделать:

MyPanel.Update().Show();

Для вашего подхода у меня было бы действие jQuery, которое устанавливает поле ввода и щелкает кнопку в модальном режиме, запускает панель обновления для обратной передачи и в этом коде, который загружает детали в любой элемент управления в модальном режиме, просто позвоните по номеру MyPanel.Update.Show();, и он появится на экране, когда запрос ajax панели обновлений вернется.

В приведенном выше примере с использованием пользовательского интерфейса jQuery на модале будет 2 кнопки: одна для закрытия и ничего не делать, одна для сохранения, нажав на MySaveButton внутри модальной области, и вы сможете делать все, что захотите, на сервере, вызывая MyPanel.Hide() в случае успеха или при появлении сообщения об ошибке на панели, если проверка не удалась, просто не вызывайте MyModal.Hide(), и он останется для пользователя после обратной передачи.