回到首頁

2012年4月20日 星期五

ASP.NET 3.5 ListView 控制項

ASP.NET 3.5 新增的控制項,以下這篇MSDN的文章開頭就說,它可以取代所有的資料控制項,如果你跟我一樣是個懶人,那就好好的學一下XD

http://msdn.microsoft.com/zh-tw/magazine/cc337898.aspx
覺的太難,沒關係,下面這篇是更簡單的教學
http://www.cnblogs.com/nuaalfm/archive/2008/09/01/1281646.html
http://www.dotblogs.com.tw/kevintan1983/archive/2012/03/14/70730.aspx
我還在模索中,慢慢的會把心得寫在這篇,先做個記錄XD

----------------------------------------------------------
2012/09/24 更新
ListView 是一個純樣版的資料控制項,拉進VS預設不會顯示任何html碼,先用一個最簡單的範例來說明
 <asp:ListView ID="ListView1" runat="server" OnItemDataBound="ListView1_ItemDataBound">
                <LayoutTemplate>
                     <div >
                     
                         
                        <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
                           
                      </div>


                </LayoutTemplate>

                <ItemTemplate>
                    <p>
                    <asp:LinkButton ID="LinkButton1" runat="server"><%# Eval("Name") %></asp:LinkButton>
                        </p>
                </ItemTemplate>



            </asp:ListView>

重點在  LayoutTemplate 和   ItemTemplate 己及 ID="itemPlaceholder"
LayoutTemplate  樣版裡面,放的是要自訂的html 碼,通常都會放容器,例如table,例如這個範例只放一個div ,最終顯示出來的,就是一個div的html碼

 ItemTemplate 樣版裡面,放的是和資料庫連結的html,有點像是Repeater,這時候最後產生出來的,就是div裡面包一堆 p   linkbutton   /p  的html 碼  ,為什麼會產生在div 裡面 ,這時候就是看的就是在LayoutTemplate  裡面的 ID="itemPlaceholder" 

也就是重複產生資料的位罝,是對應在LayoutTemplate  裡面的 ID="itemPlaceholder", 
itemPlaceholder 這個參數是固定的,但可以在ListView 的屬性修改,
這個範例是放一個 PlaceHolder(因為PlaceHolder不會產生任何html碼),
或者是在某個html 標籤,加上 runat="server" ID="itemPlaceholder",則這個html標籤,
就是ItemTemplate 樣版裡面連結資料的地方
後端的.cs 假設是這樣

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            school e1 = new school { Name = " 長安校" };
            school e2 = new school { Name = " 五股校 " };
            school e3 = new school { Name = " 苗栗校 " };
            school e4 = new school { Name = " 南崁校 " };


            school[] schools = { e1, e2, e3, e4 };
            ListView1.DataSource = schools;
            ListView1.DataBind();

        }

    }
最後在html 頁面,顯示的,就是div 裡面包4個p  /p   裡面有 linkbutton 的連結

沒有留言: