在ASP.NET UpdatePanel中使用jQuery佈局

我有一個嵌套Masterpages的ASP.NET站點，它利用jquery.layout.js中的.layout（）函數。在ASP.NET UpdatePanel中使用jQuery佈局

所有頁面動態顯示美妙的大小，呈現調整欄和垂直滾動區域。即所有的佈局功能都在工作。

但是我想消除我在PostBack上得到的「閃爍」，所以想要介紹一個ASP：UpdatePanel。

我試圖用ASP：UpdatePanel在根Master頁面上的表單中包圍所有內容，此時我所有美麗的格式都消失了，而且我的頁面看起來很亂。我似乎完全失去了我的調整大小欄，我的UI佈局中心現在出現在屏幕底部。

我的母版頁類似於以下內容：

<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; 
}

我嘗試了各種註冊我的腳本的方法 - 使用Clie註冊此腳本ntScript.RegisterClientScriptInclude - 使用頁面加載（） - 使用Sys.WebForms.PageRequestManager.getInstance（）add_endRequest

我相信，在腳本運行正常，因爲我已經添加警報（「請工作！」）。並顯示警報。所以其他的東西是干擾渲染。

有沒有人有任何想法？

來源

2010-01-22 Jackie

快速暗示過我的頭頂：

如果你的佈局正在通過更新面板呈現額外的div標籤破 - 你可以把它只需更換頂層格在你的佈局，而不是周圍的呢？

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

來源

2010-01-22 02:21:40 womp

嘗試在腳本管理器中註冊您的JavaScript文件。

例如：

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

來源

2010-01-22 02:27:13 JAKEtheJAB

修復很簡單，你只需要更新「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"

希望這有助於

Chris

來源

2010-01-25 11:27:28 Chris

在ASP.NET UpdatePanel中使用jQuery佈局

回答

相關問題