מדריך ASP.NET – עבודה עם נתונים: עריכת מידע בפקד GridView
במדריך זה נראה איך עורכים נתונים בפקד GridView.
שלב 1 – הכנה
נוסיף מחלקה חדשה בשם Person לפרויקט שלנו (בחירה ב-Add Class מתפריט Project):
נרשום את מבנה המחלקה באופן הבא:
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>
כעת נראה מה יופיע על המסך:
נראה שנוספו לנו קישורים עם המלה "Edit". אם נלחץ על אחד מהם (למשל על השורה השלישית) נקבל את המסך הבא:
נראה כי קיבלנו את השורה עליה לחצנו לעריכה, ובמקום הקישור ל – "Edit" קיבלנו שני קישורים עבור "Update" ו –"Cancel" כאשר לחיצה על "Update" תבצע את המתודה אותה כתבנו קודם לכן.
נשנה את השם הפרטי ל – Web ואת שם המשפחה ל – Master ונלחץ על Update:
כעת ניתן לראות את השינוי.
תגובות בפייסבוק