使用Rows属性控制ASP.Net列表框的滚动

时间:2017-11-01 22:28:57

标签: javascript c# asp.net scroll listbox

所以我有这个简单的jane Listbox控件,它填充了来自页面init的数据库中的条目。现在默认情况下,它的行数/大小属性为4.我将此控件包含在div中,该div设置为左侧和100%高度,禁用页面滚动,以便所有内容都在一个非滚动页面上。

使用默认设置,如果单击任何大于4的条目,列表框将滚动以将您单击的内容放在框中的第4个位置,这也会导致我的event.target对象返回到select元素而不是单击的选项元素,阻止基于所点击的内容进行处理(为清楚起见,这是在客户端js)。这一直持续到您已经一直滚动到底部,此时您可以点击列表框中显示的任何内容。

如果我将其设置为可用记录的数量,您可以点击第一个"页面中的任何内容"项目,它将工作正常,但如果你滚动并尝试单击不在第一个显示集合中的任何项目(甚至1项目),一旦你点击它,列表框将滚动回到顶部,并保存事件.target对象问题显示出来。如果您尝试使用箭头键进行导航,突出显示将会更改,但列表框将保持在顶部滚动,您无法看到它。

如果我设置为我在屏幕上显示的项目的确切数量,那么它的工作方式与我期望的完全相同。我可以点击顶部的任何条目或滚动到所有事件,所有事件都很高兴。这一切都很棒,但仅适用于我特定的浏览器高度。

我关闭了AutoPostback,尝试将MaintainScrollPositionOnPostback设置为true,现在我正在尝试使用javascript例程来扫描select并计算屏幕上实际可见选项的数量并设置size属性在页面到达客户端后手动在元素上。

有谁知道控制此滚动问题的更好方法。有没有办法告诉.Net或Listbox自动执行此操作?由于我将要修改.Net控制客户端,我担心这会导致后期问题,如果我必须做任何事情。我不相信任何时候尺寸变化都必须重新计算每个选项在屏幕上或屏幕外的位置。我已经用Google搜索了好几天,似乎人们有类似的问题,但是要么是回发,要么他们已经知道将会有多少行,或者他们正在添加/删除/ rows导致重绘。是javascript真的是我唯一的答案,如果是这样,那会怎么回事我的会话状态?

编辑1:添加代码

HTML:

<html>
  <head></head>
  <body>
    <div id="main" class="flexRow">
      <div id="listWrap" class="flexCol w25p">
        <asp:ListBox runat="server" ID="lstContents"></asp:ListBox>
        <div class="flexRow">
          <button value="New">New</button>
          <button value="Del">Delete</button>
        </div>
      </div>
      <div id="content" class="flexCol"></div>
    </div>
  </body>
</html>

代码隐藏:

//Global Variable
List<Content> ContentList { get;set; }

protected void Page_PreRender(object sender, EventArgs e)
{
    lstContents.Items.Clear();
    var ctx = HttpContent.Current;
    using (var s = new SQL(Conn))
    using (var r = (IDataReader)s.ExecProc(QType.Reader, "GetContent"))
        while (r.Read()) {
            ContentList.Add(new Content(r));

    var orderedSet = from c in ContentList
                     orderby c.ID
                     select c;

    foreach (var c in orderedSet)
        lstContents.Items.Add(new ListItem(c.Name, c.ID));

    lstContents.SlectionMode = ListSelectionMode.Single;
    lstContents.AutoPostBack = false;
    lstContents.Rows = 44; //ContentList.Count; //2; //1; //0; //999999;
}

1 个答案:

答案 0 :(得分:0)

你在&#34; ...失去了我...这也导致我的event.target对象指向select元素而不是点击的选项元素...&#34;

但是我走到了尽头。 :)我认为您正在谈论在列表框中保持滚动位置。

我在updatepanels中使用下面的代码。也许你可以适应它。

// To maintain scroll position of a listbox inside an update panel.
// Make sure this script is after the scriptmanager.
// Source: http://weblogs.asp.net/andrewfrederick/archive/2008/03/04/maintain-scroll-position-after-asynchronous-postback.aspx

var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();

function BeginRequestHandler(sender, args) {
    if ($get('lst') !== null) {
        // Get X and Y positions of scrollbar before the partial postback
        xPos = $get('lst').scrollLeft;
        yPos = $get('lst').scrollTop;
    }
}

function EndRequestHandler(sender, args) {
    if ($get('lst') !== null) {
        // Set X and Y positions back to the scrollbar after the partial postback
        $get('lst').scrollLeft = xPos;
        $get('lst').scrollTop = yPos;
    }
}

prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);