במדריך זה נראה איך ניתן להציג נתונים ב – GridView. אנו נייצר נתוני דמה ונחבר אותם ל – GridView.

הכנה

נוסיף דף ASPX למערכת שלנו. לדף נוסיף פקד מסוג GridView ונקרא לו gvPeople. הכיתוב עבורו יהיה כך:

<asp:GridView runat="server" ID="gvPeople" />

נוסיף מחלקה חדשה בשם Person לפרויקט שלנו (בחירה ב-Add Class מתפריט Project):

נרשום את מבנה המחלקה באופן הבא:

public class Person
{
  public string FirstName { get; set; }
  public string LastName { get; set; }
  public string FullName
  {
    get
    {
      return string.Format("{0} {1}", FirstName, LastName);
    }
  }
  public DateTime BirthDate { get; set; }
}

נעבור ל-Code Behind של עמוד ה-ASPX שלנו ונייצר מתודה שמחזירה רשימה של People:

private List<Person> CreatePeopleList()
{
  List<Person> people = new List<Person>();
  for (int i = 0; i < 5; i++)
  {
    people.Add(new Person()
    {
      FirstName = string.Format("First{0}", i),
      LastName = string.Format("Last{0}", i),
      BirthDate = new DateTime(1980, 10, i + 1),
    });
  }
  return people;
}

שימו לב שב – BirthDate אנחנו משתמשים ב – i+1 זאת כדי להמנע מכך שיווצר תאריך עם יום בחודש 0 שכן החודש תמיד מתחיל מ-1.

כעת, ב – Page_Load נחבר את רשימת ה – People ל- GridView באופן הבא:

protected void Page_Load(object sender, EventArgs e)
{     
  List<Person> people = CreatePeopleList();
  gvPeople.DataSource = people;
  gvPeople.DataBind();
}

את הרשימה שחזרה מ – CreatePeopleList אנחנו מחברים ל – gvPeople דרך המאפיין DataSource. לאחר מכן אנחנו קוראים ל – DataBind. כתוצאה מכך תתקבל במסך הטבלה הבאה:

זהו למעשה ייצוג של הנתונים שייצרנו ב – CreatePeopleList בטבלה.

שינוי התצוגה

נוכל לשנות את הכיתוב בעמודות ע"י:

א. השמת ערך False במאפיין AutoGenerateColumns של פקד ה-GridView.

ב. עריכת העמודות. הדוגמה הבאה מציגה GridView עם עמודות מוגדרות:

<asp:GridView runat="server" ID="gvPeople" 
  AutoGenerateColumns="false">
  <Columns>
    <asp:BoundField HeaderText="First Name" 
      DataField="FirstName" />
    <asp:BoundField HeaderText="Last Name" 
      DataField="LastName" />
    <asp:BoundField HeaderText="Full Name" 
      DataField="FullName" />
    <asp:BoundField HeaderText="Birth Date" 
      DataField="BirthDate" />
  </Columns>
</asp:GridView>

עבור GridView כזה יתקבל המסך הבא (שימו לב לשוני בריווח המילים בכותרות העמודות):

אם נרצה לייצג את הנתונים בצורה אחרת נוכל להשתמש בפקדים נוספים כגון Repeater, FormView, DataList וכו'.