有效利用数据源绑定

通常js需要从服务器获取一些数据来实现应用,
有两种思路:1.使用ajax异步加载  2.利用服务器加载页面的时候同时加载数据

这里要提的是第二种方式,很普遍的,但是性能却很值得考究.如何来加载这些数据的绑定.

场景如下:
需要生成一列表,根据点击不同的列表项显示不同图片;
很显然,这里的列表项是包含图片的信息的,这样的话我们就应该利用这点来有效使用数据源的绑定

  Dictionary<int, string> ImgsList = new Dictionary<int, string>();

    public string Imgs;
   
    public int Index;

    protected override void OnInit(EventArgs e)
    {
        //this.repItems.ItemCreated += new RepeaterItemEventHandler(repItems_ItemCreated);
        this.repItems.PreRender += new EventHandler(repItems_PreRender);
        this.repItems.ItemDataBound += new RepeaterItemEventHandler(repItems_ItemDataBound);
        base.OnInit(e);
    }

    void repItems_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        Index = e.Item.ItemIndex;
        ImgsList.Add((int)DataBinder.GetPropertyValue(e.Item.DataItem, ("ROOMTYPEID")), Convert.ToString(DataBinder.GetPropertyValue(e.Item.DataItem, ("Picture"))));
    }

    //void repItems_ItemCreated(object sender, RepeaterItemEventArgs e)
    //{
        //if (!IsPostBack)
        //{
            //Index = e.Item.ItemIndex;
            //ImgsList.Add((int)DataBinder.GetPropertyValue(e.Item.DataItem, ("ROOMTYPEID")), Convert.ToString(DataBinder.GetPropertyValue(e.Item.DataItem, ("Picture"))));
        //}
    //}

    void repItems_PreRender(object sender, EventArgs e)
    {
        Imgs = "";
        foreach (string s in ImgsList.Values)
        {
            Imgs += "'" + GetPath(s) + "',";
        }
        Imgs = Imgs.TrimEnd(',');
    }
//
//页面绑定处理
/
<asp:Repeater ID="repItems" runat="server" DataSourceID="rooms">
                <ItemTemplate>
                    <li ROOMTYPEID") %>','<%#Eval("ROOMTYPENAME") %>','<%#Eval("MEMBERPRICE") %>',<%#Index %>)">
                        <div class="_title"><%#Eval("ROOMTYPENAME") %></div>
                        <div class="_price">￥<%#Eval("MEMBERPRICE","{0:F2}")%>-￥<%#Eval ("PRICE","{0:F2}")%></div>
                    </li>
                </ItemTemplate>
            </asp:Repeater>
<script type="text/javascript">
      var imgs=new Array(<%=Imgs %>);//利用绑定生成的图片信息数组
        function setImg(index){
            $('div#itemPic').html('<img src='+imgs[index]+'>');
        }
</script>






这里利用了数据控件的事件句柄来实现加载资源的利用,而不必对图片数组使用另外的加载方式来重新访问一次数据,
在基于数据web应用里,很多时候性能就是出现在数据库的访问上,既然我们已经能在一次访问边可以得到所有有效数据,
就没有必要另外的去写单独的绑定,ajax方式也可以加快加载,但是还是浪费了一次绑定,造成加载后过多的对数据的原子操作

PS:注意一点,对于事件的生命周期,要多考究一下,上述代码里注释了一段void repItems_ItemCreated
回发的时候可以看到,图片不会再显示了,这恐怕是这个方式的缺陷,因为这种变量式的绑定是无法利用视图状态来在回发期间保持数据的,
当然,可以考虑使用天然的html input控件来存放数组信息,
同时如果是使用void repItems_ItemCreated而不是用repItems_ItemDataBound委托的话,
在回发的时候将会出现将空引用,ItemCreated事件在回发期间会被调用重建数据控件绑定项目,
而ItemDataBound只会在页面第一次加载的时候被调用来进行绑定,也就是说回发的时候不会进行绑定,只是利用视图状态重建列表项目,
所以e.Item.DataItem数据绑定项目的引用将会为空引用.

repItems_PreRender则用来在呈现列表项之前输出我们所要得到的图片数组信息(如果数组的绑定不放在这里,
可能会出现ImgsList为空的情况,因为ImgsList 是在数据绑定之后才被赋值完成的,所有数组的绑定就直接放在这个事件中比较安全);


利用事件编程可以处理很多事情,减少很多代码量,多多理解页面的编程模型咯~



尝试自己理解写一些文章,多多指正^^

转载于:https://www.cnblogs.com/wsky/archive/2008/03/30/1129640.html