用ASP.net 的GridView控制項分頁顯示圖片,並曆遍給定的檔案夾中的檔案綁定到GridView控

來源:互聯網
上載者:User
       在做相簿時,有時候由於圖片較多,往往需要進行分布顯示圖片。使用ASP.net分頁顯示的方法有很多種,本人喜歡使用GridView控制項,因為GridView控制項本身具有強大的分頁功能,無需太多的編程,使用起來非常方便,下面是本網站中組織圖庫時使用到的自做的自訂控制項,貼出來供大家參考。其方法是:

        (1)在GridView控制項中進行分頁設定,主要有以下幾項設定:

        AutoGenerateColumns="False"  運行時不讓資料來源自動產生列;

        AllowPaging="True"                       開啟自動分布功能;

        PageSize="2"                                  每頁顯示2行,我這裡是每頁顯示2張圖片;

        PagerSettings FirstPageText="第一頁"

        LastPageText="最後頁"

        Mode="NextPreviousFirstLast"   顯示的模式,自訂     

        NextPageText="下一頁"

         Position="TopAndBottom"          分頁選擇在控制項上部和下部均顯示;

         PreviousPageText="上一頁"

        onpageindexchanging="GridView1_PageIndexChanging"     當選擇上頁、下頁等換頁時激發它

        (2)在GridView控制項中添加TemplateField模板,在TemplateField模板中添加〈ima〉,用以顯示圖片

        (3)在後台定然字元數組,用於存入曆遍給定的檔案夾下的檔案

        (4)使用foreach迴圈將檔案目錄及圖片檔案名稱賦予資料來源,並綁定到GridView控制項

        (5)告訴GridView1_PageIndexChanging事件,需要幹什麼事兒。

        以下是前台原始碼:

〈%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

〈!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

〈html xmlns="http://www.w3.org/1999/xhtml">
〈head runat="server">
    〈title>無標題頁〈/title>
〈/head>
〈body>
    〈form id="form1" runat="server">
    〈label for="pagebody1" style="display: none">〈/label>
    〈fieldset id="container">
        〈legend>不分頁顯示圖片〈/legend>
        〈div style="list-style: none;">
            〈ul style="width: 808px; margin: 0px">
                〈li style="margin-left: 10px">
                    〈asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
                        AllowPaging="True" PageSize="2" Width="800px" CellPadding="3"
                        CellSpacing="1" GridLines="None"  onpageindexchanging="GridView1_PageIndexChanging">
                        〈PagerSettings FirstPageText="第一頁" LastPageText="最後頁" Mode="NextPreviousFirstLast"
                            NextPageText="下一頁" Position="TopAndBottom" PreviousPageText="上一頁" />
                        〈Columns>
                            〈asp:TemplateField HeaderText="獨上高樓網圖庫">
                            〈ItemTemplate>
                                〈img alt="" src='〈%# DataBinder.Eval(Container, "DataItem.filePath", "{0}") %>' />
                            〈/ItemTemplate>
                            〈/asp:TemplateField>
                        〈/Columns>
                    〈/asp:GridView>
                〈/li>
            〈/ul>
        〈/div>
    〈/fieldset>
    〈/form>
〈/body>
〈/html>
        後台原始碼:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.IO;
using System.Net;
using System.Text.RegularExpressions;

public partial class Default4 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            this.BindToGridView();   //調用上面的BindToGridView()綁定
        }
    }
    protected void BindToGridView()
    {
        //擷取檔案名稱
        //string[] files = Directory.GetFiles(Server.MapPath(imagepath));
        string[] files = Directory.GetFiles(Server.MapPath("images/"));
        //建立資料表
        DataTable dt = new DataTable();
        //dt.Columns.Add("filename");
        //dt.Columns.Add("size");
        dt.Columns.Add("filePath");
        foreach (string s in files)
        {
            DataRow dr = dt.NewRow();
            FileInfo f = new FileInfo(s);
            //dr["filename"] = f.Name;
            //dr["size"] = f.Length;
            //dr["filePath"] = imagepath + "/" + f.Name;
            dr["filePath"] = "/images/" + f.Name;
            dt.Rows.Add(dr);
        }
        //綁定顯示
        this.GridView1.DataSource = dt;
        this.GridView1.DataBind();
    }

    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        this.GridView1.PageIndex = e.NewPageIndex;
        this.BindToGridView();   //調用上面的BindToGridView()綁定
    }
}
 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.