虚拟列表视图的ASP.net？ [英] Virtual Listview for ASP.net?

问题描述

是否有ASP.net虚拟列表视图？

---

大多数表（和网格，列表视图，数据表，数据网格，网格视图，列表网格），我找到asp.net期望通过数据用户页面。

我想，包含，一个ListView例如，10,000项;我不希望10页。

一长串的问题是在1994年使用虚拟模式列表视图解决。该控制只需要给予项显示的数目。有关要求这些项目的控制信息（即当用户滚动他们的眼帘，或尝试进行排序的列）。

有没有人创建的虚拟列表视图（presumably使用异步JavaScript和XML，或同步JavaScript和XML）？

---

如果答案的不：不要害怕回答这个问题。这没有什么错的话回答：

  

否

解决方案

我只是做一个虚拟的ListView样本。

我开始与我呈现的div一个中继器，与包含数据库的ID需要装载的一个属性。

 ＆LT; ASP：直放站ID =Repeater1=服务器＆GT;
＆LT;＆ItemTemplate中GT;
        ＆LT; D​​IV数据-ID =＆LT;％＃的getId（的Container.DataItem）％GT;类=的DataLine＆GT;
        载入中...
        ＆LT; / DIV＆GT;
    ＆LT; / ItemTemplate中＆GT;
＆LT; / ASP：直放站＆GT;
 

下次检查，如果这个格是可见的，并使用AJAX获取数据。的JavaScript

 ＆LT;脚本SRC =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;＆LT;脚本＆GT;
功能isScrolledIntoView（ELEM）
{
    变种docViewTop = $（窗口）.scrollTop（）;
    变种docViewBottom = docViewTop + $（窗口）.height（）;    VAR elemTop = elem.offset（）顶部。
    变种elemBottom = elemTop + elem.height（）;    返回（（elemBottom＆下; = docViewBottom）及及（elemTop＆GT = docViewTop））;
}VAR cTimerID = NULL;
功能RunWithSomeDelay（）
{
    如果（cTimerID）
        clearTimeout（cTimerID）;    cTimerID = setTimeout的（CheckWhatToShow，1000）;
}功能CheckWhatToShow（）
{
    $（的DataLine）。每个（函数（I，选择）{        VAR ThisOne = $（选择）;        如果（ThisOne.attr（完成）！=1）
        {
            如果（isScrolledIntoView（ThisOne））
            {
                ThisOne.attr（完成，1）;
                //这里你可以使用一个简单的ajax负荷，加载数据。
                ThisOne.text（ThisOne.attr（数据ID））;
            }
        }
    }）;
}$（文件）。就绪（函数（）{
    //第一次运行
    CheckWhatToShow（）;
    //上双击自动滚屏运行
    $（窗口）.scroll（RunWithSomeDelay）;
}）;＆LT; / SCRIPT＆GT;
 

和这里是我的code身后，测试一个

 公共部分类Dokimes_StackOverFlow_VirtualList：System.Web.UI.Page
{
    清单＆LT; INT＆GT; oMainIds =新的List＆LT; INT＆GT;（）;    保护无效的Page_Load（对象发件人，EventArgs的发送）
    {
        的for（int i = 0; I＆LT; 3000;我++）
            oMainIds.Add（ⅰ）;        Repeater1.DataSource = oMainIds;
        Repeater1.DataBind（）;
    }    公众诠释的getId（对象OITEM）{
        返回（INT）OITEM;
    }
}
 

我测试和它的工作只是找到。

和这里是源$ C ​​$ C： http://www.planethost.gr/VirtualList。 RAR

这是可以做到的改进：

• 要优化什么div来搜索上的滚动点知名度基地。


• 要加载的一组数据，并把他们放在div的

更新
我做了一些优化速度，并添加AJAX调用测试。对于这种优化工作更正所包含的数据必须是跨页相同的div的高度。左装载一组数据，让他们为JSON并把他们放在正确的位置。

http://www.planethost.gr/VirtualList2.rar

Is there a virtual listview for ASP.net?

---

Most tables (and grids, listview, data tables, data grids, grid views, list grids) i find for asp.net expect the user to page through data.

i want a listview that contains, for example, 10,000 items; and i don't want 10 pages.

The problem of a long list was solved in 1994 using a listview in "virtual" mode. The control need only be given the number of items to show. The control information about those items as required (i.e. as the user scrolls them into view, or tries to sort on a column).

Has anyone created a virtual listview (presumably using Asynchronous Javascript and XML, or Synchronous Javascript and XML)?

---

If the answer's "no": don't be afraid to answer the question. There's nothing wrong with an answer of:

No.

解决方案

I just make one virtual ListView sample.

I start with a repeater that I render divs, with an attribute that contain the Data Base id that need to be loaded.

<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
        <div data-id="<%# GetID(Container.DataItem) %>" class="DataLine"> 
        loading...
        </div>
    </ItemTemplate>
</asp:Repeater>

Next the javascript that check if this div is visible, and get the data using ajax.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script>
function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = elem.offset().top;
    var elemBottom = elemTop + elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

var cTimerID = null;
function RunWithSomeDelay()
{
    if(cTimerID) 
        clearTimeout(cTimerID);

    cTimerID = setTimeout(CheckWhatToShow, 1000);
}

function CheckWhatToShow()
{
    $(".DataLine").each(function(i, selected) {

        var ThisOne = $(selected);

        if(ThisOne.attr("Done") != "1")
        {
            if(isScrolledIntoView(ThisOne))
            {                   
                ThisOne.attr("Done", "1");
                // here you can use a simple ajax load, to load your data.
                ThisOne.text(ThisOne.attr("data-id"));
            }
        }
    });
}

$(document).ready(function() {  
    // first time run
    CheckWhatToShow();
    // run on scrool
    $(window).scroll(RunWithSomeDelay);
}); 

</script>

and here is my code behind as test that one

public partial class Dokimes_StackOverFlow_VirtualList : System.Web.UI.Page
{
    List<int> oMainIds = new List<int>();

    protected void Page_Load(object sender, EventArgs e)
    {
        for (int i = 0; i < 3000; i++)            
            oMainIds.Add(i);            

        Repeater1.DataSource = oMainIds;
        Repeater1.DataBind();
    }

    public int GetID(object oItem){
        return (int)oItem;
    }
}

I tested and its working just find.

and here is the source code: http://www.planethost.gr/VirtualList.rar

Improvements that can be done:

• To optimize what div to search for visibility base on the scroll point.
• To load a group of data and place them on divs

Update I make some speed optimizing, and add ajax call test. For this optimizations work correct the height of the div that contains the data must be the same across the page. Left to load a group of data, get them as json and place them on the correct place.

http://www.planethost.gr/VirtualList2.rar

这篇关于虚拟列表视图的ASP.net？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！