滚动到 UserControl 中的特定 DataList 项

发布于 2024-11-19 16:30:09 字数 1020 浏览 2 评论 0原文

我正在开发一个 ASP.NET 应用程序,其中在 aspx 页面中嵌入了 3 个用户控件,该页面又使用母版页。

3 个用户控件中的 2 个具有 DataList。我想滚动到用户控件中的特定/选定的 DataListItem。

另外,我查看了这个线程(http://forums.asp.net/t/1596201.aspx)。但我认为这对我的情况不起作用。我在aspx页面中有MaintainScrollPositionOnPostback =“true” - 仍然没有运气。

如果有人能帮我找出一种方法来做到这一点,那将非常有帮助

标记看起来像这样

     <asp:DataList ID="dl" runat="server"
            SkinID="DataList" onitemcommand="dl_ItemCommand" 
            >
            <ItemTemplate>
                <asp:Label ID="lblIDTitle" runat="server" Text="ID: " />
                <asp:Label ID="dlLabel" runat="server" Text='<%# Eval("Id") %>'  />
                <asp:LinkButton ID="btnSelect" runat="server" CommandName="Select">Select</asp:LinkButton>
                <br />
                <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("DisplayName") %>' />
                <br />
            </ItemTemplate>
        </asp:DataList>

I am working on an ASP.NET application where I have 3 user controls embedded in an aspx page which in turn uses a master page.

2 Usercontrols out of the 3 have a DataList. I would like to scroll to a specific / selected DataListItem in the usercontrol.

Also, I looked at this thread (http://forums.asp.net/t/1596201.aspx). But I don't think it will work in my case. And I have MaintainScrollPositionOnPostback="true" in the aspx page - No luck still.

It would be really helpful, if someone could help me figure out a way to do this

The markup looks something like this

     <asp:DataList ID="dl" runat="server"
            SkinID="DataList" onitemcommand="dl_ItemCommand" 
            >
            <ItemTemplate>
                <asp:Label ID="lblIDTitle" runat="server" Text="ID: " />
                <asp:Label ID="dlLabel" runat="server" Text='<%# Eval("Id") %>'  />
                <asp:LinkButton ID="btnSelect" runat="server" CommandName="Select">Select</asp:LinkButton>
                <br />
                <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("DisplayName") %>' />
                <br />
            </ItemTemplate>
        </asp:DataList>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

白云悠悠 2024-11-26 16:30:10

看起来好像很简单。步骤如下:

  • 在包含数据列表的用户控件中,添加此方法..

     public void FocusControlOnPageLoad(string ClientID, System.Web.UI.Page 页面)
     {
         ClientScriptManager clientScript = this.Page.ClientScript;
         clientScript.RegisterClientScriptBlock(this.GetType(),"CtrlFocus",
    
                        @"<脚本> 
    
              函数ScrollView()
    
              {
                 var el = document.getElementById('" + ClientID + @"')
                 if (el!= null)
                 {        
                    el.scrollIntoView();
                    el.focus();
                 }
              }
    
              window.onload = ScrollView;
    
              ");
    
    } 
    
  • 正如您从标记中看到的那样,我有一个链接按钮。因此,使用 OnItemCommand,每当单击链接按钮时我都会调用此函数。像这样的东西;

    protected void dlCommitment_ItemCommand(对象源,DataListCommandEventArgs e)
    {            
        if (e.CommandName == "选择")
        {  
            LinkBut​​ton 链接 = LinkBut​​ton)dlCommitment.Items[e.Item.ItemIndex].FindControl("btnSelectCMTMT");
             FocusControlOnPageLoad(link.ClientID, this.Page);
        }
    }
    

它就像一个魅力。感谢一篇讨论 ScrollIntoView 的帖子和一篇关于我上面发布的方法的代码项目文章。由于我比较着急,所以无法附上链接。感谢最初发布此信息的人。

Looks like it is pretty simple. Here are the steps:

  • In the user control containing the datalist, added this method..

     public void FocusControlOnPageLoad(string ClientID, System.Web.UI.Page page)
     {
         ClientScriptManager clientScript = this.Page.ClientScript;
         clientScript.RegisterClientScriptBlock(this.GetType(),"CtrlFocus",
    
                        @"<script> 
    
              function ScrollView()
    
              {
                 var el = document.getElementById('" + ClientID + @"')
                 if (el != null)
                 {        
                    el.scrollIntoView();
                    el.focus();
                 }
              }
    
              window.onload = ScrollView;
    
              </script>");
    
    } 
    
  • As you can see from the mark-up I had a linkbutton. So with the OnItemCommand, I called this function whenever the link button was clicked. Something like this;

    protected void dlCommitment_ItemCommand(object source, DataListCommandEventArgs e)
    {            
        if (e.CommandName == "Select")
        {  
            LinkButton link = LinkButton)dlCommitment.Items[e.Item.ItemIndex].FindControl("btnSelectCMTMT");
             FocusControlOnPageLoad(link.ClientID, this.Page);
        }
    }
    

And it worked like a charm. Thanks to a post that discussed about ScrollIntoView and a code project article about the method I have posted above. Since I'm on a rush, I'm not able to attach the links. Thanks to the ones who posted this information originially.

只涨不跌 2024-11-26 16:30:10

最简单的技巧是,如果你有任何可聚焦的 html 元素,例如数据列表中的锚点或按钮,请将选项卡索引设置为零,或者使用 js 将焦点放在它上面。

easiest trick will be if u have any focusable html element like anchor or button in datalist, set tab index to it as zero, or use js to put focus on it.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文