我有一个带有嵌套母版页的 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.RegisterClientScriptIninclude 注册此脚本 - 使用页面加载() - 使用Sys.WebForms.PageRequestManager.getInstance().add_endRequest
我确信脚本运行正常，因为我添加了警报(“请工作!”)；并显示警报。所以有其他东西干扰了渲染。
有人有什么想法吗？
最佳答案
我突然想到的一个快速建议:
如果您的布局被更新面板呈现的附加 div 标签破坏了 - 您能否使其仅替换布局中的顶级 div，而不是围绕它？
<asp:UpdatePanel ID="updPanel" runat="server"
UpdateMode="Conditional" CssClass=""ui-layout-north banner">
<ContentTemplate>
etc etc
'
'
</ContentTemplate>
</asp:UpdatePanel>
关于asp.net - 在 ASP.NET UpdatePanel 中使用 jquery 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2114470/