c# - 更新パネル内のポストバックでスクロール可能なグリッドビューの位置を維持する

Question

オーバーフロー y:auto を使用したグリッドビューがあります。グリッドビューは、ユーザー コントロールにラップされた更新パネル内にあります。このユーザー コントロールは、ajax モーダル ポップアップ エクステンダーを使用して表示されます。現在、このグリッドビューには何百ものアイテムが含まれる可能性があり、ユーザーがアイテムを選択する必要がある場合、非同期ポストバックによってポップアップが再度リロードされ、スクロール位置が失われます。リンクhttp://weblogs.asp.net/andrewfrederick/archive/2008/03/04/maintain-scroll-position-after-asynchronous-postback.aspxに投稿されたソリューションも試しましたが、うまくいきませんでした。JavaScriptコードを置き忘れているかどうかはわかりません。

これは、モーダル ポップアップ エクステンダーがある場所です。

<asp:Panel ID="pnlShowDirectMailMedium" runat="server" Visible="false" HorizontalAlign="Center">
        <uc2:DirectMailMedium ID="ucDirectMailMedium" runat="server" OnCloseEvent="ucDirectMailMedium_CloseEvent" />
        <asp:HiddenField ID="hfCloseDMMedium" runat="server" />
    </asp:Panel>
    <cc1:ModalPopupExtender ID="mpeDirectMailMedium" runat="server" BackgroundCssClass="Modal"
        TargetControlID="hfCloseDMMedium" PopupControlID="pnlShowDirectMailMedium" OkControlID="hfCloseDMMedium"
        CancelControlID="hfCloseDMMedium" Drag="true" RepositionMode="None" />

これは、グリッドビューがある実際のユーザー コントロールです。

<asp:Panel ID="pnlDirectMail" runat="server">
<asp:UpdatePanel ID="upDirectMail" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
<div class="ZipCodeGrid" id="divGrid">
                            <asp:GridView ID="gvZips" runat="server" AutoGenerateColumns="false" OnRowDataBound="gvZips_RowDataBound"
                                GridLines="None" Width="870px">
                                <Columns>
                                    <asp:TemplateField HeaderText="Zip">
                                        <ItemStyle HorizontalAlign="Center" />
                                        <ItemTemplate>
                                            <asp:HiddenField ID="hfSelectedId" runat="server" Value='<%# Bind("SelectedId") %>' />
                                            <asp:HiddenField ID="hfID" runat="server" Value='<%# Bind("ID") %>' />
                                            <asp:Label ID="lblZip" runat="server" Text='<%# Bind("Zip") %>' />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                        <HeaderTemplate>
                                            <asp:Label ID="lblDescription" runat="server" Text="City" />
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="txtDescription" runat="server" Text='<%# Bind("Description") %>' />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                        <HeaderTemplate>
                                            <asp:Label ID="lblSegmentDescHeader" runat="server" Text="Segment" Visible="false" />
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="lblSegment" runat="server" Text='<%# Bind("SegmentDesc") %>' Visible="false" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                        <HeaderTemplate>
                                            <asp:Label ID="lbl1Acre50KHeader" runat="server" Text="1 Acre (50K)" Visible="false" />
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="lbl1Acre50KQty" runat="server" Text='<%# Bind("One50K") %>' Width="50px"
                                                Visible="false" />
                                            <asp:CheckBox ID="chk1Acre50K" runat="server" Checked='<%# Bind("One50KSelected") %>'
                                                OnCheckedChanged="chk1Acre50K_CheckChanged" AutoPostBack="true" Visible="false" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                        <HeaderTemplate>
                                            <asp:Label ID="lbl1Acre50KPriceHeader" runat="server" Text="Cost" />
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="lbl1Acre50KCost" runat="server" Text='<%# Bind("One50KCost", "{0:$###,###,##0.00}") %>' />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                        <HeaderTemplate>
                                            <asp:Label ID="lbl1Acre100KHeader" runat="server" Text="1 Acre (100K)" />
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="lbl1Acre100KQty" runat="server" Text='<%# Bind("One100K") %>' Width="50px"
                                                Visible="false" />
                                            <asp:CheckBox ID="chk1Acre100K" runat="server" Checked='<%# Bind("One100KSelected") %>'
                                                OnCheckedChanged="chk1Acre100K_CheckChanged" AutoPostBack="true" Visible="false" />
                                            <asp:HiddenField ID="hf1Acre100KCost" runat="server" Value='<%# Bind("One100KCost", "{0:$###,###,##0.00}") %>' />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                        <HeaderTemplate>
                                            <asp:Label ID="lbl2Acre50KHeader" runat="server" Text="Prospect 2Acre+" />
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="lbl2Acre50KQty" runat="server" Text='<%# Bind("Two50K") %>' Width="50px" />
                                            <asp:CheckBox ID="chk2Acre50K" runat="server" Checked='<%# Bind("Two50KSelected") %>'
                                                OnCheckedChanged="chk2Acre50K_CheckChanged" AutoPostBack="true" />
                                            <asp:HiddenField ID="hf2Acre50KPrice" runat="server" Value='<%# Bind("Two50KCost", "{0:$###,###,##0.00}") %>' />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                        <HeaderTemplate>
                                            <asp:Label ID="lbl2Acre100KHeader" runat="server" Text="Prospect 3Acre+" />
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="lbl2Acre100KQty" runat="server" Text='<%# Bind("Two100K") %>' Width="50px" />
                                            <asp:CheckBox ID="chk2Acre100K" runat="server" Checked='<%# Bind("Two100KSelected") %>'
                                                OnCheckedChanged="chk2Acre100K_CheckChanged" AutoPostBack="true" />
                                            <asp:HiddenField ID="hf2Acre100KPrice" runat="server" Value='<%# Bind("Two100KCost", "{0:$###,###,##0.00}") %>' />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                        <HeaderTemplate>
                                            <asp:Label ID="lbl3Acre50KHeader" runat="server" Text="3 Acre (50K)" Visible="false" />
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="lbl3Acre50KQty" runat="server" Text='<%# Bind("Three50K") %>' Visible="false"
                                                Width="50px" />
                                            <asp:CheckBox ID="chk3Acre50K" runat="server" Checked='<%# Bind("Three50KSelected") %>'
                                                OnCheckedChanged="chk3Acre50K_CheckChanged" AutoPostBack="true" Visible="false" />
                                            <asp:HiddenField ID="hf3Acre50KPrice" runat="server" Value='<%# Bind("Three50KCost", "{0:$###,###,##0.00}") %>' />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                        <HeaderTemplate>
                                            <asp:Label ID="lbl3Acre100KHeader" runat="server" Text="3 Acre (100K)" Visible="false" />
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="lbl3Acre100KQty" runat="server" Text='<%# Bind("Three100K") %>' Width="50px"
                                                Visible="false" />
                                            <asp:CheckBox ID="chk3Acre100K" runat="server" Checked='<%# Bind("Three100KSelected") %>'
                                                OnCheckedChanged="chk3Acre100K_CheckChanged" AutoPostBack="true" Visible="false" />
                                            <asp:HiddenField ID="hf3Acre100KPrice" runat="server" Value='<%# Bind("Three100KCost", "{0:$###,###,##0.00}") %>' />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                        <HeaderTemplate>
                                            <asp:LinkButton ID="lblOccupiedHousingUnit" runat="server" Text="Housing Unit" Visible="false"
                                                ForeColor="White" />
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="txtOccupiedHousingUnit" runat="server" Text='<%# Bind("OccupiedHousingUnit") %>'
                                                Visible="false" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                        <HeaderTemplate>
                                            <asp:LinkButton ID="lblHouseholdIncome" runat="server" Text="Household Income" Visible="false"
                                                ForeColor="White" />
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="txtHouseholdIncome" runat="server" Text='<%# Bind("HouseholdIncome", "{0:$###,###,##0.00}") %>'
                                                Visible="false" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                        <HeaderTemplate>
                                            <asp:LinkButton ID="lblDistancetoSite" runat="server" Text="Distance" Visible="false"
                                                ForeColor="White" />
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="txtDistancetoSite" runat="server" Text='<%# Bind("DistancetoSite") %>'
                                                Visible="false" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                        <HeaderTemplate>
                                            <asp:LinkButton ID="lblAverageIncome" runat="server" Text="Home Value" Visible="false"
                                                ForeColor="White" />
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="txtAverageIncome" runat="server" Text='<%# Bind("AverageIncome", "{0:$###,###,##0.00}") %>'
                                                Visible="false" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                        <HeaderTemplate>
                                            <asp:Label ID="lblRuralPct" runat="server" Text="% Rural" Visible="false" ForeColor="White" />
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="txtRuralPct" runat="server" Text='<%# Bind("RuralPct") %>' Visible="false" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                        <HeaderTemplate>
                                            <asp:Label ID="lblLawnGarden" runat="server" Text="Lawn & Garden" Visible="false"
                                                ForeColor="White" />
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="txtLawnGarden" runat="server" Text='<%# Bind("LawnGarden") %>' Visible="false" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                        <HeaderTemplate>
                                            <asp:Label ID="lblLawnGardenEquipment" runat="server" Text="Lawn & Garden Equipment"
                                                Visible="false" ForeColor="White" />
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="txtLawnGardenEquipment" runat="server" Text='<%# Bind("LawnGardenEquipment") %>'
                                                Visible="false" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                                <HeaderStyle CssClass="HeaderFreez" />
                                <AlternatingRowStyle BackColor="#E4E4E4" />
                                <RowStyle BackColor="#F7F7F7" />
                            </asp:GridView>
                        </div>
</ContentTemplate>
</asp:UpdatePanel>

誰かが私に何をすべきかについての洞察を与えることができますか. 参考までに - scriptmanager はマスター ページにあります。

Answer 1

You need to do like this ,

full detail : Maintain Scrollbar Position Inside UpdatePanel After Partial PostBack

You need to write down javascript which is part of image for maintaining scroll position

Answer 2

グリッドビューはユーザー コントロール内にあるため、スクロール位置を維持するためのコードを追加するのに適切な場所です。

言及する価値のある重要なことの 1 つは、DOM が完全にロードされたら、JavaScript を実行する必要があることです。これは次のように実行できます。

1. @Pranay Rana のメソッドを使用して、ScriptManagerコントロールの後にスクリプトを配置します
2. jQuery への参照を追加して使用する$(document).ready()...

これを行う方法の簡単な例を次に示します。シナリオに合わせてこれを変更できると確信しています:-)

ASPX:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UserControl1.ascx.cs"
    Inherits="WebApplication16.UserControl1" %>
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var xPos, yPos;
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(BeginRequestHandler);
        prm.add_endRequest(EndRequestHandler);

        function BeginRequestHandler(sender, args) {
            xPos = $get('scrollDiv').scrollLeft;
            yPos = $get('scrollDiv').scrollTop;
        }

        function EndRequestHandler(sender, args) {
            $get('scrollDiv').scrollLeft = xPos;
            $get('scrollDiv').scrollTop = yPos;
        }
    });
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div id="scrollDiv" style="overflow:auto;height: 100px;" />
        <asp:GridView ID="gvEmployees" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:CommandField ShowSelectButton="true" />
                <asp:BoundField DataField="Name" />
            </Columns>
        </asp:GridView>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

コードビハインド:

public partial class UserControl1 : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            gvEmployees.DataSource = new List<Employee>
            {
                new Employee{Name="Employee 1"},
                new Employee{Name="Employee 2"},
                new Employee{Name="Employee 3"},
                new Employee{Name="Employee 4"},
                new Employee{Name="Employee 5"},
                new Employee{Name="Employee 6"},
                new Employee{Name="Employee 7"},
            };
            gvEmployees.DataBind();
        }
    }
}

public class Employee
{
    public string Name { get; set; }
}