asp.net - 在 ASP.NET UpdatePanel 中使用 jquery 布局-6ren

asp.net - 在 ASP.NET UpdatePanel 中使用 jquery 布局

转载作者：行者123 更新时间：2023-12-01 05:10:33

26

4

我有一个带有嵌套母版页的 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/

26

4

0

文章推荐： python - 将直方图放入 tkinter 框架中

文章推荐： java - 使用 hibernate 过滤非原始类型

文章推荐： java - Ant 嵌套更新

文章推荐： python - 将参数从 Python 传递到 makefile

asp.net - 当其他 updatepanel 刷新 updatepanel 时，通过触发器刷新 updatepanel，因为第一个必须具有 UpdateMode=Conditional
我在 asp.net 页面中有一些更新面板。我希望 updatepanel 2 在 updatepanel 1 刷新时刷新，但 UpdatePanel 2 的 UpdateMode 属性设置为 Con
c# - 为什么 updatepanel 会触发另一个 updatepanel？
我的 ajax 页面上有两个更新面板。这是我第一次使用 updatepanel，我不知道出了什么问题。我认为只有 btnFilter 的 Click 事件必须触发第二个更新面板的内容，但更改组合值(也
asp.net - 仅刷新另一个 UpdatePanel 内的 UpdatePanel
如果有 UpdatePanel在另一个 UpdatePanel ，并且在内部的UpdatePanel 中有一个按钮，我想点击这个按钮时，只刷新内部UpdatePanel .如何？最佳答案在inn
updatepanel - ASP.NET 4 UpdatePanel 重大更改
我正在将 ASP.NET 应用程序从 3.5SP1 移植到 4.0。该应用程序在 3.5SP1 中完美运行。在 4.0 中，我发现 UpdatePanel 行为有所不同。我们有一个简单的用户控件，其
c# - 为什么这在 UpdatePanel 之外有效，但在 UpdatePanel 内部无效？
我已经复制并粘贴了这个警报类: http://madskristensen.net/post/JavaScript-AlertShow%28e2809dmessagee2809d%29-from-AS
updatepanel - ASP .NET 在 UpdatePanel 内使用带有 UpdateProgress 的中继器
我正在使用 C# 的 ASP .NET 4.0。我有一个 Web 表单，其中所有布局都存在于 UpdatePanel 中。里面有以下内容: 用于通过文本框和搜索按钮输入搜索条件的面板使用动画 .gi
c# - 使用第二个 UpdatePanel 的 gridview 中的 LinkButton 从第一个 UpdatePanel 更新文本框。找不到控件
我需要在 UpdatePanel upSectionB 中添加 LinkButton btnAddRow 但问题是我在加载期间遇到此错误: A control with ID 'btnAddRow
asp.net - 找不到 ID 为 'xxx' 的 UpdatePanel 。如果它是动态更新的，那么它必须位于另一个 UpdatePanel 内
我有一个带有 Ajax 选项卡控件的页面，其中一个选项卡中有一个 Web 控件，它是 Telerik RadGrid，其中编辑表单指向另一个 Web 控件。该编辑表单还包含 Ajax 选项卡，并且在其
c# - 您如何正确使用 UpdatePanel？
我有一个带有一些复选框的 UpdatePanel。我检查它们，然后点击我的保存按钮，但这会导致 UpdatePanel 回发(刷新)并将它们全部设置回空白。重绘方法在按钮代码之前运行。拥有可以操作的
javascript - UpdatePanel 忽略内联脚本标记
我有很多地方......构造就在它所作用的元素之后进行(以确保在显示 HTML 之前立即对其进行处理)。一切正常。现在我开始使用asp:UpdatePanel和一些标签在里面。我设置Visible=
javascript - updatepanel 触发后功能不起作用
我在使用 UpdatePanels 的同一个 asp.net 页面上有这个函数 $(function() { $("#listTimeInput").change(function() {
jQuery .on() 和 UpdatePanels
我有一个 UpdatePanel，用于替换页面内的内容。在 UpdatePanel 之外，我有一些 jQuery 使用 on() 函数来分配一些按钮点击。据我了解the new jQuery.on()
Jquery 和 UpdatePanel
我已经将 Jquery 用于圆角(DIV)，并且我有一个更新面板，其中包含一个数据列表，其中包含一些图像和一个删除链接。当我单击删除链接时，它会触发删除命令并删除图像。(异步回发)。问题是当我单击删除
jquery - UpdatePanel 动画仅在超时后运行
考虑以下场景: MasterpageFile1: 嵌套母版页文件:
jQuery UpdatePanel 初始化
我目前正在尝试对位于 AJAX UpdatePanel 内的 GridView 使用“colResizable”。第一次加载时，它运行良好，但每当 UpdatePanel 更新时，它就会停止。我知道
c# - UpdatePanel 不会阻止按钮重新加载页面
我只是想做空 this question's example通过制作一个简短的原型(prototype)来测试 UpdatePanel 功能，以禁用单击链接按钮时重新加载 ASP.NET 页面。我在像
c# - updatepanel 更新整个页面而不仅仅是内容模板
c# - UpdatePanels - 重新呈现外部控件？
我有一个相当复杂的 UI 页面，其中嵌套了多个 UpdatePanel。所有这些都设置为 UpdateMode = "Conditional" 我在所有更新面板之外都有一个列表框。奇怪的是，当单击 U
c# - 手动实现 UpdatePanel
我正在阅读一篇显示 how bad CodePlex uses UpdatePanels 的文章以及 StackOverflow 在这个问题上有多好，例如，当用户赞成一个答案/问题时。我想知道是否有
javascript - updatepanel 不活动后更新缓慢
闲置 2 分钟后，在页面上呈现更新面板所需的时间大约是之前的 3 倍。我知道这可能是应用程序池设置的问题，但是有没有办法通过定期从页面与服务器联系来避免该问题？最佳答案你想做的是这样的 -> fu

首页

博学

6Ren·AI

商城

asp.net - 在 ASP.NET UpdatePanel 中使用 jquery 布局