Ajax ModalPopupExtender 回发滚动条答案

【问题标题】：Ajax ModalPopupExtender Postback ScrollbarAjax ModalPopupExtender 回发滚动条
【发布时间】：2012-07-25 10:57:16
【问题描述】：

我有一个使用 ajax 作为模态弹出窗口打开的 asp 面板。此面板中有一些可以回发的用户控件，例如允许自定义编辑和添加的 gridview。

但是由于面板的大小，我不得不引入滚动条，以便用户可以滚动 asp 面板并编辑相应的网格视图。在回发时，尽管面板内的滚动条被重复放置在顶部，并且不保持滚动位置。

我的问题是；有没有办法在这个Modal Popup Extender Panel 中保持滚动位置？

【问题讨论】：

您是否在模态弹出面板中使用更新面板？
是的，更新面板在 asp:Panel 中，它控制着 GridView 编辑控件等。
那么你有没有提到那些编辑控件作为更新面板的触发器？
编辑后是否重新绑定gridview？
它可以是可滚动面板中的任何回发，例如 gridview 上的编辑控件或启用 AutoPostBack 时选中的复选框。他们正在正确发回aysnc。但是，在每次异步之后，滚动条不会保持其滚动位置。

标签： asp.net ajax modalpopupextender

【解决方案1】：

使用的代码（供参考）是：

var iST;
$(document).ready(function() {
getScrollPosition();
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(getScrollPosition);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(setScrollPosition);
});

function pageLoad() {
    var popup = $find('<%=MODALPOPUPNAME.ClientID%>');
    popup.add_shown(setScrollPosition);
}

function getScrollPosition() {
    iST = $("#<%=PANELNAME.ClientID %>").scrollTop();
}
function setScrollPosition() {
    $("#<%=PANELNAME.ClientID %>").scrollTop(iST + 20);
}

谢谢。

【讨论】：

嗨FirstCape，您使用上面的代码解决了回滚问题吗？我有完全相同的场景，我使用了上面的脚本。它不保持回滚。我需要对此脚本进行任何调整吗？
我确实使用了上面的代码并且它可以工作，不应该对脚本进行任何真正的更改以使其工作。

【解决方案2】：

花了几个小时后，我能够做到这一点。假设我们有一个名为 myDiv 的 div，它位于一个名为 pnlPopup 的弹出面板中。每当 myDiv 上有一个 scoll 时，我们需要 javascript 来标记滚动位置。我们在一个名为 hfScrollP 的隐藏元素中标记这个滚动位置。

<script type="text/javascript">
    function markScrollPosition() {
        var div = document.getElementById("myDiv").scrollTop;
        document.getElementById('<%=hfScrollP.ClientID %>').value = div;
    }
</script>

<asp:HiddenField ID = "hfScrollP" runat = "server" />
<asp:Panel ID="pnlPopup" runat="server"  Width="750px" style="display:none;">

    <div id="myDiv" style="height: 350px; width: 700px;overflow: auto;" 
          onscroll="markScrollPosition();">

    </div>

</asp:Panel>

然后我们有一个按钮，它会在点击时打开弹出窗口和我们的模态弹出扩展器。

<asp:Button ID="btnShowModalPopup" runat="server" Text="Show" />
<ajaxToolkit:ModalPopupExtender ID="mpePopup" runat="server" 
   TargetControlID="btnShowModalPopup" 
   PopupControlID="pnlPopup" DropShadow="True" BackgroundCssClass="modalBackground"  
   Enabled ="true">
</ajaxToolkit:ModalPopupExtender>

每次我们有回发并显示弹出窗口时，我们都需要这个 javascript 来设置弹出窗口上的滚动位置。

<script type="text/javascript" language="javascript">
                function pageLoad() {
                    var modal = $find('<%=mpePopup.ClientID %>');
                    $find('<%=mpePopup.ClientID %>').add_shown(
                        function () {                       
                     $('#myDiv').scrollTop(document.getElementById('<%=hfScrollP.ClientID %>').value);
                    }
                       );
                }
 </script>

在你的代码后面。

  Private Sub btnShowModalPopup_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnShowModalPopup.Click
            //Do your necessary processing
            mpePopup.show();
        End Sub

就是这样。当弹出窗口显示时，它将滚动回最后标记的向下滚动位置。希望对你有帮助:)

【讨论】：

【解决方案3】：

您可以更改特定 Div 的 javascript 代码。

<script type="text/javascript">
    function pageLoad() {
        $('#DataDiv').scrollTop(document.getElementById('<%=hfScrollT.ClientID %>').value).scrollLeft(document.getElementById('<%=hfScrollL.ClientID %>').value);
    }
</script>

希望能提供帮助！

【讨论】：

这个答案对 6 年前回答的问题没有任何新意。