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

我目前正在做选项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(),并且在回发后它将保持用户.