וובמאסטר - תיכנות ובניית אתרים

מדריך ASP.NET - הצגת נתונים בדף

IdoFlatow ,‏ מכללת סלע‏ ‏/‏ 4 פברואר, 2011
F+
F-

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

הכנה

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

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

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

ASPNET - הוספת מחלקה

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

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. כתוצאה מכך תתקבל במסך הטבלה הבאה:

ASPNET - תצוגת GridView סטנדרטית

זהו למעשה ייצוג של הנתונים שייצרנו ב – 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 כזה יתקבל המסך הבא (שימו לב לשוני בריווח המילים בכותרות העמודות):

ASPNET - שינוי מבנה GridView

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

IdoFlatow, מכללת סלע

יועץ ומרצה בקבוצת סלע לתחומי Web ו-Data. עוסק בתחומים Asp.Net, WCF, Silverlight, IIS ו-Entity Framework.
כותב הקורס הרשמי של מיקרוסופט ל-WCF וכן שותף בכתיבת הספר ASP.NET Programmer's Reference (ISBN 978-0470505458)
תגיות: ASP.NET‏  /  .net‏  /  פיתוח‏  /  צד שרת‏  /  מדריך‏  

תגובות בפייסבוק

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות