如何在Listview ASP.net中维护DIV滚动条位置

时间:2016-11-10 08:14:27

标签: asp.net vb.net

我的问题是当我点击列表视图中的图像按钮(“imgEdit”)时,我的列表视图的滚动条不会停留在我点击它的位置。

继承我的代码:

 <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
 <ContentTemplate>
 <asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>

    <asp:ListView ID="LV_Profile" runat="server" GroupItemCount="1"  GroupPlaceholderID="groupPlaceHolder1"
        ItemPlaceholderID="itemPlaceHolder1" OnItemDataBound="LV_Profile_ItemDataBound" OnSelectedIndexChanged="LV_Profile_SelectedIndexChanged" >
        <LayoutTemplate>
          <div id ="mainprofile" style="overflow-x: scroll; margin: 0 65px;" runat="server">
            <div id="subdivprof" runat="server" style="height: inherit; width: 3400px; margin: 10px 0;">

                <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
            </div>
          </div>
        </LayoutTemplate>
        <GroupTemplate>
                <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
        </GroupTemplate>       
        <ItemTemplate>
            <div class="divprofile">
                <div id="proftools" class="tools" runat="server">
                    <asp:ImageButton ID="imgCancel" CssClass="img" 
                            ImageUrl="~/images/Delete-52 (1).png" runat="server" alt="" 
                            ToolTip="Cancel edit" Visible="False" OnClick="DoneEdit" />
                    <asp:ImageButton ID="imgDone" CssClass="img" 
                            ImageUrl="~/images/Checkmark-52.png" runat="server" alt="" 
                            ToolTip="Done edit" Visible="False" />
                    <asp:ImageButton ID="imgEdit" CssClass="img" ImageUrl="~/images/Edit User Male-52.png" 
                            runat="server" alt="" ToolTip="Edit profile" OnClick = "EditUser" />
                    <asp:ImageButton ID="imgEmail" CssClass="img" ImageUrl="~/images/-Message Filled-52.png" 
                            runat="server" alt="" ToolTip="Send an email" />
                </div>
                <div id="proginfo" runat="server">
                    <div class="level"><%#Eval("Prog_Pos")%></div>
                    <div class="pic"><asp:ImageButton ID="ImageButton1" CssClass="img"  runat="server" onclick="FindUser" OnClientClick="return chooseFile();" ToolTip='<%#Eval("Idno")%>' Enabled="False" /></div>
                    <div class="nickname"><asp:Textbox ID="txtNickname" runat="server" Text='<%#Eval("NickName") %>'  CssClass="txt" Enabled="false" style="margin-top:10px;"></asp:Textbox></div>
                    <div class="name"><asp:TextBox ID="txtName" runat="server" Text='<%#Eval("Name")%>' CssClass ="txt" Enabled="false" ></asp:TextBox></div>
                    <div class="email"><asp:Textbox ID="txtEmail" runat="server" Text='<%#Eval("emailAddress")%>' CssClass="txt" Enabled="false"></asp:Textbox></div>
                </div>
            </div>
        </ItemTemplate>
        </asp:ListView>
 </ContentTemplate>
    </asp:UpdatePanel>

提前致谢。 :)

1 个答案:

答案 0 :(得分:0)

您需要在更新返回列表位置之后。

添加.aspx

<asp:HiddenField id="scrollPosition" runat="server"/>

接下来你需要JS

找到这个隐藏的地方

var hdField = document.getElementById(<%=scrollPosition.ClientID%>);

查找清单

var list= document.getElementById('LV_Profile');

OnScroll事件设定值为HiddenField

list.onscroll = function() {
     hdField .value = list.scrollTop;
}

当窗口或文档处于onload返回保存位置时

window.onload = function () { 
    list.scrollTop = hdField.value;
}