Question

在列表页面上，单击其中一个项目会在模式弹出窗口中显示详细信息，该窗口将具有自己的功能（如验证，更新等）。实现这一目标的最佳实践是什么（不是寻找黑客）。我在这里看到两个选项：

隐藏详细信息标记，直到单击列表项为止，执行ajax请求以获取详细信息并填充并显示详细信息部分。
将详细信息部分单独作为单独的页面。在列表项目上单击，在模态窗口中显示此页面（这是否可能？）这类似于IFrame方法，听起来像是一个老式的方法。

这些方法的缺点有哪些优点，还是有其他方法可以做到这一点？单击列表项不应该回发。

编辑：感谢更多意见。

Answer 1

我目前正在做选项1，它非常轻量级，你需要的只是一个ajax帖子（jQuery或UpdatePanel）和一些模态（我正在使用jQery UI）。它比整篇文章更容易，而且你还可以操作你所在的页面作为结果的一部分。

例如我在页面中有网格，编辑器是模态的，通常有更多细节，当你点击保存时，网格会更新。我把它放在一个通用的模板解决方案中，它很容易使用，并且在这种情况下就像webforms一样轻，所以我全都赞成选项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();

Fr你的方法，我有一个jQuery动作设置输入字段并单击模态中的按钮，触发更新面板回发，并在该代码中将细节加载到模态中的任何控件，只需调用MyPanel.Update.Show();，当更新面板ajax请求返回时，它将出现在屏幕上。

上面的例子，使用jQuery UI将在模态上有2个按钮，一个用于关闭并且什么也不做，一个用于保存，单击模态内的MySaveButton，然后你可以在服务器上执行任何操作，如果验证失败，则调用MyPanel.Hide()，或者如果验证失败，则在面板中输入错误消息，只是不要调用MyModal.Hide()，并且在回发后它将保留给用户。

Web窗体应用程序中模式窗口的最佳实践

1 个答案: