在 ASP.NET UpdatePanel 中使用 jquery 布局答案

【问题标题】：Using the jquery layout within an ASP.NET UpdatePanel在 ASP.NET UpdatePanel 中使用 jquery 布局
【发布时间】：2011-01-08 00:56:45
【问题描述】：

我有一个 ASP.NET 站点，其中包含使用 jquery.layout.js 中的 .layout() 函数的嵌套母版页。

所有页面都显示精美的动态调整大小、呈现调整大小栏和垂直滚动区域。即所有布局功能都在工作。

但是我想消除我在 PostBack 上遇到的“闪烁”，所以想引入一个 ASP:UpdatePanel。

我试图用 ASP:UpdatePanel 将根母版页上的表单内的所有内容都包围起来，此时我所有漂亮的格式都消失了，我的页面看起来一团糟。我似乎完全失去了我的调整器栏，我的 ui-layout-center 现在出现了在屏幕底部。

我的母版页如下所示：

<body id="body">
    <form id="BaseForm" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="updPanel" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <div class="ui-layout-north banner">
              etc etc
               '
               '
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>

我正在使用以下脚本来格式化我的页面：

            $(document).ready(function() {
            var myLayout;

            // myLayout = $('body').layout(); -- syntax with No Options
            myLayout = $('#body').layout({

                // enable showOverflow on north-pane so popups will overlap other panes
                north__showOverflowOnHover: false
                // some resizing/toggling settings
      , north__spacing_open: 0
  // no resizer-bar when open (zero height)
      , north__spacing_closed: 0  
// big resizer-bar when open (zero height)
      , south__spacing_open: 0
      , south__spacing_closed: 0
      , east__spacing_open: 0
      , east__spacing_closed: 0
      , south__minSize: 40
      , east__maxSize: 10
      , north__minSize: 80
      , west__minSize: 300
      , west__maxSize: 600
            });
        });

样式如下：

    .ui-layout-pane { /* all 'panes' */
    background: #FFF;
    border: 0px solid #fff;
    padding: 10px;
    overflow: auto;
}
.ui-layout-north {*overflow:hidden;}
.ui-layout-south {padding:0px;}
.ui-layout-east {padding:0px;}
.ui-layout-west {
    margin-bottom:10px !important;
    margin-left:10px !important; 
    border-right: solid 10px transparent;
    padding-top:0px;
    padding-right:0px;
    padding-bottom:0px;
    background:#f2f2f3;
    border-left:1px solid red;
    border-bottom:1px solid red;
}
.ui-layout-center {
    padding: 0px !important; 
    margin-right:10px !important; 
    margin-bottom:10px !important;
    background:#f2f2f3;
    border-right:1px solid red;
    border-bottom:1px solid red;
}
.ui-layout-resizer { /* all 'resizer-bars' */
    background: #fff;
}
.ui-layout-resizer-west {
    background:#efefef;
    border-bottom:1px solid red;
}

.ui-layout-toggler { /* all 'toggler-buttons' */
    background: #111;
}

我尝试了各种注册脚本的方法 - 使用 ClientScript.RegisterClientScriptInclude 注册此脚本 - 使用页面加载（） - 使用 Sys.WebForms.PageRequestManager.getInstance().add_endRequest

我确定脚本运行正常，因为我添加了 alert("Please work!");并显示警报。所以其他东西正在干扰渲染。

有人有什么想法吗？

【问题讨论】：

标签： asp.net jquery ajax layout updatepanel

【解决方案1】：

我脑海中的一个快速建议：

如果您的布局被更新面板呈现的附加 div 标签破坏 - 您可以让它替换布局中的顶级 div，而不是包围它吗？

<asp:UpdatePanel ID="updPanel" runat="server" 
      UpdateMode="Conditional" CssClass=""ui-layout-north banner">
        <ContentTemplate>
              etc etc
               '
               '
        </ContentTemplate>
    </asp:UpdatePanel>

【讨论】：

【解决方案2】：

尝试在脚本管理器中注册您的 javascript 文件。

例如：

<asp:ScriptManager ID="SMgr" runat="server">
  <Scripts>
    <asp:ScriptReference path="MyScript.js" />
  </Scripts>
</asp:ScriptManager>

【讨论】：

【解决方案3】：

修复很简单，您只需更新“jquery.layout.js”默认值以允许嵌套内容。

首先添加一个父容器，它可以位于更新面板内，参见：

<asp:UpdatePanel ID="UpdatePanel" runat="server">
  <ContentTemplate>
    <div id="ui-wrapper">

记住更近的：

    </div>
  </ContentTemplate>
</asp:UpdatePanel>

然后更新脚本参数（您可以在“myLayout”位中执行此操作）：

, north__paneSelector: "#ui-wrapper .ui-layout-north" 
, south__paneSelector: "#ui-wrapper .ui-layout-south"
, east__paneSelector: "#ui-wrapper .ui-layout-east"
, west__paneSelector: "#ui-wrapper .ui-layout-west"
, center__paneSelector: "#ui-wrapper .ui-layout-center"

希望对你有帮助

克里斯

【讨论】：