מדריך ASP.NET MVC – היכרות עם WebGrid

WebGrid הינה Helper Function המהוה חלק מספרית העזר WebPages הכלולה ב-namespace System.Web.Helpers.

WebGrid יודע לקבל כפרמטר אוסף של אובייקטים ובתגובה להוציא פלט של HTML במבנה של טבלה. WebGrid תומך באופן אוטומטי במיון ודפדוף.

להוספת WebGrid חדש פתח את הקובץ Views/Person/Index.cshtml והוסף את הקוד הבא בתחתית התצוגה:

<div class="addresses">
    @{
        WebGrid grid = new WebGrid(
                  source: this.Model.Addresses);
        
        @: @grid.GetHtml(
             tableStyle: "grid", 
             columns: grid.Columns(
	          grid.Column("Value", "Address", 
                   style: "columnAddress"),
		   grid.Column("Description", "Description", 
                   style: "columnDescription")))
    }
</div>

הקוד מגדיר משתנה חדש מסוג WebGrid ומאתחל אותו באוסף הכתובות עבור איש הקשר הנוכחי. בנוסף יש קריאה לפונקציה GetHtml אשר מקבלת מספר פרמטרים המשפיעים על התצוגה.

הרץ את התוכנית ובחן את התצוגה המעודכנת:

כאשר משתמשים ב-WebGrid איננו מוגבלים רק לעמודות מסוג טקסט אלא ניתן לשנות את התוכן של עמודה מסוימת לכל תוכן HTML אשר נבחר. פתח שוב את הקובץ Views/Person/Index.cshtml ועדכן את הקוד הבא:

<div class="addresses">
@{
  WebGrid grid = new WebGrid(source: this.Model.Addresses);
 
  @: @grid.GetHtml(
        tableStyle: "grid",
        columns: grid.Columns(
           grid.Column("Value", "Address", style: 
                       "columnAddress"),
           grid.Column("Description", "Description", 
                       style: "columnDescription"),
           grid.Column(null, null, style: "columnActions",
                        format: 
                          @<text>
                             @Html.ActionLink(
                                "Delete",
                                "ConfirmDeleteAddress", 
                                "Person", 
                                new { id = item.ID }, 
                                null)
                          </text>)
        ))
    }
 
</div>

שים לב כיצד הקוד מוסיף עמודה חדשה על העמודות הקודמות. הפעם, העמודה החדשה היא ללא כותרת וכן איננה משויכת לתכונה באובייקט Address (שני הפרמטרים הראשונים מסוג null). עם זאת, הקוד עושה שימוש בפרמטר format אשר דרכו ניתן לקבוע את התוכן ה-HTML-י אשר יוצג תחת העמודה המדוברת. שים לב לשימוש בתגית <text> אשר מכילה את ה-HTML הרצוי לעמודה. תחת התגית <text> אנו יכולים לכתוב כל קוד CSHTML תיקני ולהשתמש בפרמטר item על מנת לגשת לאובייקט אותו אנו מציגים כרגע.

הרץ את הקוד ובחן את התצוגה/התנהגות החדשה:

המימוש של WebGrid איננו מגיע עם CSS מותאם מראש ולכן יש לבנות אותו באופן ידני. פתח את הקובץ Content/Site.css ובחן את ה-CSS אשר משפיע על התצוגה של ה-WebGrid:

.grid
{
    border-collapse: collapse;
}
 
.grid th
{
    text-align: left;
}
 
.grid thead
{
    background-color: rgb(200,200,200);
}
 
.grid th a
{
    color: Green;
}
 
.grid .columnAddress
{
    width: 200px;
}

...

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