כיצד להשתמש בפקד DataList כדי ליצור גלריית תמונות

רמת קושי

מידע אודות הורדות

כדי להוריד את דוגמת קוד זה, לחץ על אחד מהקישורים הבאים:

סקירה טכנית

ייתכן שתמצא שגלריית תמונות בשימוש נרחב אתרי רשת חברתי, אתרי אינטרנט אישי ו- E-Business אתרי אינטרנט רבים. לדוגמה, באפשרותך להשתמש גלריית תמונות להצגת ספריית תמונות שהועלו אישי באתר האישי. הצגת שקופיות היא גם כלי פופולרי כדי להציג תמונות על אתרי אינטרנט. דוגמת קוד זה מדגים כיצד להשתמש DataList פקדים ImageButton ב- ASP.NET כדי ליצור גלריית תמונות עם תמונת ניווט. באפשרותך ללחוץ על תמונה ממוזערת בפקד Datalist כדי להציג גירסה גדולה יותר של התמונה בדף. דוגמה של קוד זה קורא את נתיבי התמונה מספריה מסוימים לתוך מערך FileInfo . לאחר מכן, מערך FileInfo משמש לאכלוס באובייקט נתונים (datatable) מותאם אישית אשר מאוגד לפקד Datalist . דוגמת קוד זה מיישם גם מערכת ההחלפה מותאמת אישית המאפשרת חמש תמונות שיוצגו בצורה אופקית בעמוד אחד. הלחצנים קישור הבאים משמשים להטמעת מערכת ההחלפה מותאמת אישית:

• ראשון

• הקודם

• הבא

• האחרון

הערה אנו ממליצים לך להשתמש בשיטה זו כדי לטעון תמונות לא יותר מחמישה בכל פעם.


באפשרותך גם להגדיר את המאפיין ' SelectedIndex ' עבור הפקד DataList להגביל את מספר התמונות הממוזערות שניתן לבחור. כדי לציין איזו תמונה נבחר, באפשרותך להגדיר את המאפיין ' SelectedStyle ' עבור הפקד DataList .

מבט כולל על דגימה

דוגמת קוד זו מכילה שלושה חלקים:

• פקד תמונה עבור הצגת תמונות גדולות כאשר הם נבחרו על-ידי משתמש.

• פקד DataList עבור רישום תמונות ממוזערות עבור ניווט.

• קישור ארבעה לחצני סרגל הניווט ליישום.

באפשרותך להוריד את הקוד לדוגמה ולאחר בצע שלבים אלה כדי ליצור גלריית תמונות:

1. יצירת יישום אינטרנט של ASP.NET C# בשם CSASPNETDataListImageGallery ב- Microsoft Visual Studio 2008.
   

2. גרור פקד DataList אל דף. לאחר מכן, השתמש בקוד הבא כדי להגדיר את המאפיין RepeatColumns 5, והגדר את המאפיין RepeatDirection לאופקי:
   <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

3. להשתמש בקוד הבא כדי להגדיר את התבנית בפקד DataList כדי לאגוד שדה כתובת URL:
   <ItemTemplate>
   <asp:ImageButton ID="IB_tn" runat="server" ImageUrl='<%# "/Image/" + Eval("Url") %>' Width="100px" Height="100px" OnClick="IB_tn_Click" CommandArgument='<%# Container.ItemIndex %>' />
   </ItemTemplate>

4. להשתמש בקוד הבא כדי להוסיף ארבעה לחצני הניווט בעמוד:
   <asp:LinkButton ID="lbnFirstPage" Text="First" CommandName="first" OnCommand="Page_OnClick" runat="server" Width="125px" />
   <asp:LinkButton ID="lbnPrevPage" Text="Prev" CommandName="prev" OnCommand="Page_OnClick" runat="server" Width="125px" />
   <asp:LinkButton ID="lbnNextPage" Text="Next" CommandName="next" OnCommand="Page_OnClick" runat="server" Width="125px" />
   <asp:LinkButton ID="lbnLastPage" Text="Last" CommandName="last" OnCommand="Page_OnClick" runat="server" Width="125px" />

5. פתח את הקובץ קוד Default.aspx.cs.

6. להשתמש בקוד הבא כדי לייבא את טווחי השמות System.Data ו- System.IO לדף:
   using System.Data;
   using System.IO;

7. הוסף את הקוד הבא כדי ליצור שני מאפיינים חדשים, Page_Index ו- Page_Count:
   //property for current page index
   public int Page_Index
   {
   get { return (int)ViewState["_Page_Index"]; }
   set { ViewState["_Page_Index"] = value; }
   }
   //property for total page count
   public int Page_Count
   {
   get { return (int)ViewState["_Page_Count"]; }
   set { ViewState["_Page_Count"] = value; }
   }

8. הוסף את הקוד הבא כדי לקבל את מספר התמונות:
   //return total number of images
   protected int ImageCount()
   {
   DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
   FileInfo[] fi = di.GetFiles();
   return fi.GetLength(0);
   }

9. הוסף את הקוד הבא כדי לאגוד את הפקד DataList :
   //return the data source for DataList
   protected DataTable BindGrid()
   {
   //get all image paths
   DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
   FileInfo[] fi = di.GetFiles();
   
   //save all paths to the DataTable as the data source
   DataTable dt = new DataTable();
   DataColumn dc = new DataColumn("Url", typeof(System.String));
   dt.Columns.Add(dc);
   int lastindex = 0;
   if (Page_Count == 0 || Page_Index == Page_Count - 1)
   {
   lastindex = ImageCount();
   }
   else
   {
   lastindex = Page_Index * PageSize + 5;
   }
   for (int i = Page_Index * PageSize; i < lastindex; i++)
   {
   DataRow dro = dt.NewRow();
   dro[0] = fi[i].Name;
   dt.Rows.Add(dro);
   }
   return dt;
   }

10. הוסף את הקוד הבא כדי לטפל באירועים לחצן עמוד:
    //handle the navigation button event
    public void Page_OnClick(Object sender, CommandEventArgs e)
    {
    if (e.CommandName == "first")
    {
    Page_Index = 0;
    lbnFirstPage.Enabled = false;
    lbnPrevPage.Enabled = false;
    lbnNextPage.Enabled = true;
    lbnLastPage.Enabled = true;
    }
    else if (e.CommandName == "prev")
    {
    Page_Index -= 1;
    if (Page_Index == 0)
    {
    lbnFirstPage.Enabled = false;
    lbnPrevPage.Enabled = false;
    lbnNextPage.Enabled = true;
    lbnLastPage.Enabled = true;
    }
    else
    {
    lbnFirstPage.Enabled = true;
    lbnPrevPage.Enabled = true;
    lbnNextPage.Enabled = true;
    lbnLastPage.Enabled = true;
    }
    }
    else if (e.CommandName == "next")
    {
    Page_Index += 1;
    if (Page_Index == Page_Count - 1)
    {
    lbnFirstPage.Enabled = true;
    lbnPrevPage.Enabled = true;
    lbnNextPage.Enabled = false;
    lbnLastPage.Enabled = false;
    }
    else
    {
    lbnFirstPage.Enabled = true;
    lbnPrevPage.Enabled = true;
    lbnNextPage.Enabled = true;
    lbnLastPage.Enabled = true;
    }
    }
    else if (e.CommandName == "last")
    {
    Page_Index = Page_Count - 1;
    lbnFirstPage.Enabled = true;
    lbnPrevPage.Enabled = true;
    lbnNextPage.Enabled = false;
    lbnLastPage.Enabled = false;
    }
    
    DataList1.SelectedIndex = 0;
    DataList1.DataSource = BindGrid();
    DataList1.DataBind();
    Image1.ImageUrl
    = ((Image)DataList1.Items[0].FindControl("IB_tn")).ImageUrl;
    }

11. הוסף הקוד הבא כדי לטפל תמונה לחץ על אירועים:
    //handle the thumbnail image selecting event
    protected void IB_tn_Click(object sender, EventArgs e)
    {
    ImageButton ib = (ImageButton)sender;
    Image1.ImageUrl = ib.ImageUrl;
    DataList1.SelectedIndex = Convert.ToInt32(ib.CommandArgument);
    }

טכנולוגיית קטגוריה

• ASP.NET 2.0

• ASP.NET 3.5

• ASP.NET 4.0

שפות

דוגמת קוד זו זמינה בשפות תכנות הבאות:

הפניות

לקבלת מידע נוסף אודות בקרת שרת של DataList , בקר באתר האינטרנט הבא של Microsoft מפתחים (MSDN):

מידע כללי אודות פקד השרת DataListלקבלת מידע נוסף אודות כיצד להחליט מתי להשתמש DataGrid, DataList ובקרה של מגבר , בקר באתר האינטרנט הבא של MSDN:

כיצד להחליט מתי להשתמש בפקד DataGrid, DataList ומגברלקבלת מידע נוסף אודות ההחלפה נתונים יעיל עם פקד ASP.NET 2.0 DataList ו- ObjectDataSource, בקר websit הבאים:

מידע כללי אודות ההחלפה נתונים יעיל עם פקד ASP.NET 2.0 DataList ו- ObjectDataSource

מהי מסגרת הקוד All-In-One?

מסגרת הקוד All-In-One מציגה את רוב טכניקות פיתוח של Microsoft באמצעות דוגמאות קוד בשפות תכנות שונות. כל דוגמה בקפידה נבחרה, המורכב, והיא מתועדים כדי להציג תרחיש נפוץ אחד של קוד. לקבלת מידע נוסף אודות מסגרת הקוד All-In-One, בקר באתר האינטרנט הבא של Microsoft:

http://1code.codeplex.com

כיצד למצוא דוגמאות נוספות של מסגרת הקוד All-In-One

כדי למצוא דוגמאות נוספות של מסגרת הקוד All-In-One, חפש "kbcodefx" יחד עם מילות מפתח קשורות ב- Microsoft תומכת באתר האינטרנט. לחלופין, בקר באתר האינטרנט הבא של Microsoft:

דוגמאות קוד Framework All-In-One