מדריך ASP.NET – עבודה עם נתונים: עריכת מידע בפקד GridView

‏ • Sela

במדריך זה נראה איך עורכים נתונים בפקד GridView.

שלב 1 – הכנה

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

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

public class Person
{
  public int ID { get; set; }
  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; }
}

נוסיף עוד מחלקה בשם PersonLogic שתכיל את הפעולות שאנו רוצים לבצע. אנו נרצה להוסיף למחלקה זו שתי פעולות:

1. פעולת Select. פעולה שתחזיר את רשימת האנשים.

2. פעולת Update. פעולה שתעדכן פרטים של אדם.

את רשימת האנשים נוכל לאחזר מבסיס הנתונים ואת העדכונים לבצע מול בסיס הנתונים, אך לשם ההדגמה אנחנו נשמור אותם ב-Session, לכן נוסיף גם מאפיין למחלקה החדשה שיחזיר רשימה של אנשים.

הקוד של המחלקה PersonLogic יראה כך:

public class PersonLogic
{
  private List<Person> PersonList
  {
    get
    {
      return HttpContext.Current.Session["People"]
        as List<Person>;
    }
    set
    {
      HttpContext.Current.Session["People"] = value;
    }
  }

  public List<Person> SelectPeople()
  {
    if (PersonList == null)
    {
      List<Person> persons = new List<Person>();
      for (int i = 0; i < 5; i++)
      {
        persons.Add(new Person()
        {
          ID = i,
          FirstName = string.Format("First{0}", i),
          LastName = string.Format("Last{0}", i),
          BirthDate = new DateTime(1980, 10, i + 1),
        });
      }
      PersonList = persons;
    }

    return PersonList;
  }

  public void UpdatePerson(int id, string FirstName,
    string LastName, DateTime BirthDate)
  {
    if (PersonList == null)
      return;
    Person personToUpdate = PersonList.Where(
      person => person.ID == id).FirstOrDefault();
    if (personToUpdate == null)
      return;
    personToUpdate.FirstName = FirstName;
    personToUpdate.LastName = LastName;
    personToUpdate.BirthDate = BirthDate;

  }
}

נוסיף דף ASPX למערכת שלנו ונוסיף לדף פקד ObjectDataSource. נעדכן את הפקד שיצביע על המתודות שיצרנו במחלקה PersonLogic (שימו לב שהשדה TypeName מכיל את שם ה-Namespace וייתכן שתצטרכו לתקן אותו בהתאם ל-Namespace שלכם):

<asp:ObjectDataSource runat="server" ID="myDataSource"  
  TypeName="DataDemo.PersonLogic" 
  SelectMethod="SelectPeople" 
  UpdateMethod="UpdatePerson"></asp:ObjectDataSource
>

לדף נוסיף גם פקד מסוג GridView ונקרא לו gvPeople. נצביע מתוך ה – GridView על ה – ObjectDataSource ונגדיר אילו עמודות יוצגו ב-GridView. זהו הכיתוב המלא של ה – GridView:

<asp:GridView ID="GridView1" EnableViewState=true 
  runat="server" DataSourceID="myDataSource" 
  AutoGenerateColumns="False">
  <Columns>
    <asp:BoundField DataField="ID" HeaderText="ID"/>
    <asp:BoundField DataField="FirstName" HeaderText="FirstName"/>
    <asp:BoundField DataField="LastName" HeaderText="LastName"/>
    <asp:BoundField DataField="FullName" HeaderText="FullName" 
      ReadOnly="True"/>
    <asp:BoundField DataField="BirthDate" HeaderText="BirthDate"/>
  </Columns
>
</
asp:GridView
>

בשלב זה יצרנו פקד GridView לתצוגה בלבד אשר אינו מאפשר עריכה של הנתונים שבתוכו. בשלב הבא נאפשר עריכה של תוכן הפקד.

שלב 2 – הוספת עמודת פקודה (CommandColumn) ל – Grid

נוסיף בתוך הגדרות ה – GridView את העמודה הבאה:

<asp:CommandField ButtonType="Link" EditText="Edit" 
  HeaderText="Edit" ShowEditButton="true" 
/>

כך שהכיתוב של ה – Grid יראה כך:

<asp:GridView ID="GridView2" EnableViewState=true runat="server" 
  DataSourceID="myDataSource" AutoGenerateColumns="False">
  <Columns>
    <asp:CommandField ButtonType="Link" EditText="Edit" 
      HeaderText="Edit" ShowEditButton="true" />
    <asp:BoundField DataField="ID" HeaderText="ID" />
    <asp:BoundField DataField="FirstName" HeaderText="FirstName"/>
    <asp:BoundField DataField="LastName" HeaderText="LastName"/>
    <asp:BoundField DataField="FullName" HeaderText="FullName" 
      ReadOnly="True"/>
    <asp:BoundField DataField="BirthDate" HeaderText="BirthDate"/>
  </Columns
>
</
asp:GridView
>

כעת נראה מה יופיע על המסך:

ASPNET - GridView בתצוגה

נראה שנוספו לנו קישורים עם המלה "Edit". אם נלחץ על אחד מהם (למשל על השורה השלישית) נקבל את המסך הבא:

ASPNET - GridView בעריכה

נראה כי קיבלנו את השורה עליה לחצנו לעריכה, ובמקום הקישור ל – "Edit" קיבלנו שני קישורים עבור "Update" ו –"Cancel" כאשר לחיצה על "Update" תבצע את המתודה אותה כתבנו קודם לכן.

נשנה את השם הפרטי ל – Web ואת שם המשפחה ל – Master ונלחץ על Update:

ASPNET - GridView לאחר עריכה

כעת ניתן לראות את השינוי.

תגיות: , , , ,

IdoFlatow

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

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